Блог

Я публикую простой пример checkboxInput в shiny (пример моего полного кода, есть причина, по которой я использую uiOutput в ui.R). Однако я хотел бы использовать макет css для флажка, размещенного здесь http://codepen.io/geedmo/pen/kBHsI /. Это будет моя первая попытка использования css в приложении shiny, поэтому я был бы благодарен за реализацию в примере с блестящим кодом.

ui.R

 library(shiny)

shinyUI(fluidPage(

  uiOutput("checkbox")

))
  

server.R

 shinyServer(function(input, output) {

  output$checkbox <- renderUI({

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

  })

})
  

Мне любопытно увидеть более элегантное решение, чем то, к которому я пришел. Приведенный ниже код представляет собой практически реконструкцию http://codepen.io/geedmo/pen/kBHsI / из вопроса. Скопируйте соответствующий css-файл в style.css и поместите его в папку www. Скомпилированный HTML-код модифицируется, чтобы включить атрибуты и теги, необходимые shiny для работы.

Это код:

     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)