如何在tab / tabset上添加下拉菜单[rmarkdown / bootstrap]

时间:2017-05-13 18:06:56

标签: html r twitter-bootstrap r-markdown blogdown

Bootswatch的文档建议我可以使用标签集中的标签下拉菜单:

enter image description here

如何通过Rmarkdown实现这一目标?我试过了:

# SECTION 1 {.tabset .tabset-fade}

## Section 1.1 

## Section 1.2 {????something here?????}
 ### Section 1.2.1  <<<<<<<<< want this to appear under the dropdown menu

2 个答案:

答案 0 :(得分:2)

目前,我认为只需使用rmarkdown即可完成此操作。但是,您可以使用rmarkdown生成带有tabset部分的HTML文档,然后调整HTML以将选项卡集转换为下拉菜单。或者,你可以使用bsselectR包,遗憾的是,它仍处于一个有些停滞的开发阶段。

以下是如何使用rmarkdown制作HTML文档并使用下拉菜单替换标签集的示例。

首先,您要编写您的rmarkdown文档,然后将其编织为HTML。

---
title: "Tabset Example"
output: html_document
---

# The Tabset Section {.tabset .tabset-fade}

## First Tab
Here is the first tab's content.

## Second Tab
Here is the second tab's content
```

enter image description here

然后,在生成的HTML文件中,您将找到HTML的这一部分:

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
        <a role="tab" data-toggle="tab" href="#first-tab" aria-controls="first-tab">First Tab</a>
    </li>
    <li role="presentation">
        <a role="tab" data-toggle="tab" href="#second-tab" aria-controls="second-tab">Second Tab</a>
    </li>
</ul>

并将其替换为此HTML:

 <ul class="nav nav-tabs" role="tablist">
     <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
          Choose a Tab <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li class=""><a href="#first-tab" data-toggle="tab" aria-expanded="false" aria-controls="first-tab">First Tab</a></li>
          <li class=""><a href="#second-tab" data-toggle="tab" aria-expanded="false" aria-controls="second-tab">Second Tab</a></li>
        </ul>
     </li>
</ul>

这会导致您的标签集显示为下拉菜单,例如:

enter image description here

答案 1 :(得分:2)

现在在 rmarkdown 的开发版本中可用,您可以通过devtools::install_github("rstudio/rmarkdown")安装该版本。要添加下拉菜单,必须将.tabset-dropdown添加到类标题中,如下所示:

---
output: html_document
---

# Heading {.tabset .tabset-dropdown}

## Dropdown 1

## Dropdown 2

## Dropdown 3 

## Dropdown 4

enter image description here enter image description here