R shiny：checkboxInputにcssを使用

Question

checkboxInputの簡単な例をshinyに投稿しています（私のフルコードのサンプル、ui.RをuiOutputで使用する理由があります）。しかし、私はhttp://codepen.io/geedmo/pen/kBHsI/投稿されたチェックボックスのCSSレイアウトを使用したいと思います。これは、光沢のあるアプリでCSSを使用して私の最初の試行になるので、私は光り輝くコードの実装例に感謝しています。

ui.R

library(shiny) 

shinyUI(fluidPage(

    uiOutput("checkbox") 

)) 

server.R

shinyServer(function(input, output) { 

    output$checkbox <- renderUI({ 

    checkboxInput('checkboxid', 
       'Check me', 
       FALSE) 

    }) 

}) 

Answer 1

私は私が出ているものよりもエレガントな解決策を見て好奇心旺盛です。以下のコードは、実際には質問からのhttp://codepen.io/geedmo/pen/kBHsI/の再構成です。準拠したCSSをstyle.cssにコピーし、それをwwwフォルダに置きます。コンパイルされたHTMLは、光沢が働くために必要な属性とタグを含むように変更されています。

これはコードです：ここでは

library(shiny) 

    ui <- shinyUI(fluidPage(
      HTML("<link rel='stylesheet' type='text/css' href='style.css'>"), 

     titlePanel("Checkboxgroup"), 
     fluidRow(
     HTML(
       '<div id="checkGroup" class="form-group shiny-input-checkboxgroup shiny-input-container-inline"> 
          <!--div class="shiny-options-group" --> 
            <div class="btn-switch btn-switch-primary form-group"> 
              <input type="checkbox" id="input-btn-switch-primary" name="checkGroup" value="1"/> 
              <label for="input-btn-switch-primary" class="btn btn-round btn-primary"><em class="glyphicon glyphicon-ok"></em><strong> CLICK ME</strong></label> 
            </div> 
            <div class="btn-switch btn-switch-success form-group"> 
              <input type="checkbox" id="input-btn-switch-success" name="checkGroup" value="2"/> 
              <label for="input-btn-switch-success" class="btn btn-round btn-success"><em class="glyphicon glyphicon-ok"></em><strong> CLICK ME</strong></label> 
            </div> 
            <div class="btn-switch btn-switch-info form-group"> 
              <input type="checkbox" id="input-btn-switch-info" name="checkGroup" value="3"/> 
              <label for="input-btn-switch-info" class="btn btn-round btn-info"><em class="glyphicon glyphicon-ok"></em><strong> CLICK ME</strong></label> 
            </div> 
            <div class="btn-switch btn-switch-warning form-group"> 
              <input type="checkbox" id="input-btn-switch-warning" name="checkGroup" value="4"/> 
              <label for="input-btn-switch-warning" class="btn btn-round btn-warning"><em class="glyphicon glyphicon-ok"></em><strong> CLICK ME</strong></label> 
            </div> 
            <div class="btn-switch btn-switch-danger form-group"> 
              <input type="checkbox" id="input-btn-switch-danger" name="checkGroup" value="5"/> 
              <label for="input-btn-switch-danger" class="btn btn-round btn-danger"><em class="glyphicon glyphicon-ok"></em><strong> CLICK ME</strong></label> 
            </div> 
          <!-- /div --> 
       </div>' 
     ), 
     textOutput("selectedOptions") 
    ) 

    )) 


    server <- shinyServer(function(input, output) { 

     output$selectedOptions <- renderText({ 
      paste("Selected options:", paste((input$checkGroup), collapse = " "), sep = " ") 
     }) 
    }) 


    shinyApp(ui = ui, server = server)