r - 在Rmarkdown中创建动态标签

Question

在Rmarkdown中，可以创建选项卡，例如:

---
output: html_document
---

# Tabs {.tabset}

## Tab 1

foo

## Tab 2

bar

我想知道是否可以创建任意数量的标签？如何以编程方式创建标签页？

以下代码是尝试执行此操作的较差的尝试，但是它导致标题而不是制表符。

---
output: html_document
---

# Tabs {.tabset}

```{r echo=FALSE}
shiny::tags$h2("Tab 1")
```

foo

## Tab 2

bar

解决方案

感谢@GGamba提供了出色的解决方案。我需要更进一步，并且能够将选项卡添加为循环的一部分，因此我需要进行两项更改。首先，我使用此代码动态添加了制表符(此处的唯一区别是，我强制对超时内的 hrefCode求值，否则所有一起调用的超时将使用相同的值)

(function(hrefCode){setTimeout(function(){
 var tabContent = document.createElement('div');
 var tabContainerTarget = document.getElementsByClassName('tab-content')[0];

   tabContent.setAttribute('id', 'tab-' + hrefCode);
   tabContent.setAttribute('class', 'tab-pane')
   tabContent.innerHTML = '", gsub('\n', '', Panel, fixed = TRUE), "';

   tabContainerTarget.appendChild(tabContent);
   }, 100);
})(hrefCode);

其次，要在循环中添加标签，您可以执行以下操作:

tabsToAdd <- list("tab3" = "hello", "tab4" = "world")

shiny::tagList(lapply(names(tabsToAdd), function(x) {
  addToTabset(title = x, tabsetId = 'tbSet1',
              tabPanel(x, tabsToAdd[[x]]))
}))

Answer 1

据我所知，您无法在rmarkdown中进行操作(但是我很乐意接受纠正)。但是，当然，我们可以实现一个功能来做到这一点。

我的答案基于@KRohde的this答案，因此所有功劳归于他。我只是对其进行了调整，以在更简单的 Markdown 文档中工作。

答案主要是使用JS而不是R构建的，但是由于 Markdown 主要是HTML，所以我觉得JS是更好的工具。

这是代码:

---
output: html_document
---


```{r echo=FALSE, results='asis'}
library(shiny)
addToTabset <- function(title, tabsetId, Panel) {

  tags$script(HTML(paste0("
                   /* Getting the right tabsetPanel */
                   var tabsetTarget = document.getElementById('", tabsetId, "');

                   /* Creating 6-digit tab ID and check, whether it was already assigned. */
                   hrefCode = Math.floor(Math.random()*100000);

                   /* Creating node in the navigation bar */
                   var navNode = document.createElement('li');
                   var linkNode = document.createElement('a');

                   linkNode.appendChild(document.createTextNode('", title, "'));
                   linkNode.setAttribute('data-toggle', 'tab');
                   linkNode.setAttribute('data-value', '", title, "');
                   linkNode.setAttribute('href', '#tab-' + hrefCode);

                   navNode.appendChild(linkNode);
                   tabsetTarget.appendChild(navNode);
                   setTimeout(function(){
                     var tabContent = document.createElement('div');
                     var tabContainerTarget = document.getElementsByClassName('tab-content')[0];

                       tabContent.setAttribute('id', 'tab-' + hrefCode);
                       tabContent.setAttribute('class', 'tab-pane')
                       tabContent.innerHTML = '", gsub('\n', '', Panel, fixed = T), "';

                       tabContainerTarget.appendChild(tabContent);
                       }, 100);
                   ")
  ))
}

```

上面的代码应保留在“设置块”中，因为它定义了一个 R函数来调用 JS函数，该函数通常只是将正确的内容添加到DOM中。

然后可以在需要时使用它，并传递 tabPanel标题，“目标” tabset和常规 tabPanel函数。

```{r results='asis', echo=FALSE}

shiny::tabsetPanel(id = 'tbSet1',
                   shiny::tabPanel('Tab 1', 'foo'),
                   shiny::tabPanel('Tab 2', 'bar')
)
```



```{r results='asis', echo=FALSE}

addToTabset(title = 'Tab 3',
            tabsetId = 'tbSet1',
            tabPanel(
              h1('This is a title'),
              actionButton('btn',label = 'Clicky button'),
              radioButtons('asd', LETTERS[1:5], LETTERS[1:5])) )

```