2017-03-06 8 views
0

でダイナミックなタブを作成し、それは例えば、タブを作成することが可能です:がRmarkdownでRmarkdown

--- 
output: html_document 
--- 

# Tabs {.tabset} 

## Tab 1 

foo 

## Tab 2 

bar 

それはタグの任意の数を作成することが可能だ場合、私は思ったんだけど?プログラムでタブを作成するにはどうすればよいですか?

次のコードはこれを行うのが貧弱ですが、結果としてタブの代わりに見出しが表示されます。最適なソリューションを提供するための@GGambaへ

--- 
output: html_document 
--- 

# Tabs {.tabset} 

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

foo 

## Tab 2 

bar 

ソリューション

感謝。私はさらに一歩進んで、タブをループの一部として追加する必要があったので、私は2つの変更を加える必要がありました。まず第一に、私は動的にタブを追加するには、このコードを使用し

(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); 

第二に、(ここでの唯一の違いは、一緒に呼ばれるそれ以外の場合は、すべてのタイムアウトは同じ値を使用しますので、私はタイムアウト内hrefCodeの評価を強制することです)

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

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

答えて

1

私の知る限りは何をやろうとしていることrmarkdownでは不可能である知っている(私は修正立ってみたい)として:ループ内のタブを追加し、あなたはこのような何かを行うことができます。もちろん、それを行うための関数を実装することができます。

私は答えをthisに基づいています@KRohdeによって、すべてのクレジットは彼に行きます。私はそれをより簡単なマークダウン文書で作業するように改造しました。

答えはほとんどJSではなくRで構築されていますが、値下げはほとんど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); 
        ") 
)) 
} 

``` 

それはほとんどがちょうどDOMに物事を正しく追加JS関数を呼び出すR関数を定義として、上記のコードは、「セットアップチャンク」に滞在する必要があります。ここでは

はコードです。

これは、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]))) 

``` 
+0

shinyがネイティブにできない場合は、これが最適な回避策です。ループでこれを行うためのソリューションもありますか? 'lapply(文字、関数(文字)addToTabset(文字、 'tbSet1'、tabPanel(文字、文字)))'?私は高度なRmdでうまくやっていないし、htmlを適切にレンダリングする方法を教えてください –

+0

それを考え出しました。ループを 'tagList()'にラップする必要があり、javascriptに小さな修正が必要でした(変更されたコードの質問自体を参照) –