[英]R shiny: use css for checkboxInput
我以閃亮的形式發布了一個checkboxInput的簡單示例(完整代碼示例,這是我在ui.R中使用uiOutput的原因)。 但是我想使用css布局作為http://codepen.io/geedmo/pen/kBHsI/發布的復選框。 這將是我第一次在閃亮的應用程序中使用CSS的嘗試,因此,對於在閃亮代碼發布示例中的實現,我將不勝感激。
用戶界面
library(shiny)
shinyUI(fluidPage(
uiOutput("checkbox")
))
服務器
shinyServer(function(input, output) {
output$checkbox <- renderUI({
checkboxInput('checkboxid',
'Check me',
FALSE)
})
})
我很好奇看到比我想出的解決方案更優雅的解決方案。 下面的代碼實際上是該問題對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)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.