rmarkdown icon indicating copy to clipboard operation
rmarkdown copied to clipboard

Rework tabset-dropdown to use regular Bootstrap dropdowns

Open sdiebolt opened this issue 3 years ago • 6 comments

This PR reworks the .tabset-dropdown class to work similarly to regular tabsets. It should also close #1697.


I wasn't satisfied with the current .tabset-dropdown class and wanted to use regular Boostrap dropdowns included in navs. This lead me to remove the .tabset-dropdown CSS and improve the buildTabsets JS function to include the .tabset-dropdown class.

The .tabset-dropdown class can now be added to any sub-header of a header with class .tabset or .tabset-pills. The tabset-dropdown header will determine the dropdown's name and all of its sub-headers will be added as dropdown tabs.

Example

---
title: "RMarkdown Dropdown"
output: 
  html_document:
    self_contained: false
    theme:
      version: 4
---

# First header

Lorem Ipsum

# Dropdown {.tabset .tabset-fade}

## Dropdown {.tabset-dropdown}

### Choice 1

Dropdown 1

### Choice 2

Dropdown 2

### Choice 3

Dropdown 3

## Tab 1

Tab 1

## Tab 2

Tab 2

## Tab 3

Tab 3

# Second header

Lorem Ipsum
Screenshot 2021-02-24 at 10 24 37

sdiebolt avatar Feb 24 '21 09:02 sdiebolt