R闪亮：switchInput的RenderUI不显示答案

【问题标题】：R shiny: RenderUI of switchInput not displayingR闪亮：switchInput的RenderUI不显示
【发布时间】：2021-09-02 12:29:53
【问题描述】：

我正在尝试拥有以下switchInput 外观：

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  tags$head(tags$style(HTML('.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,
                                       .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
                                        background: #1ee38d;
                                        }'))),
  
  #switchInput color while off
  tags$head(tags$style(HTML('.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning,
                                       .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning {
                                        background: #00bfff;
                                        }'))),
  switchInput(inputId = "ans_1", value = TRUE,
              onLabel = "T", onStatus = "success", offStatus = "warning", 
              offLabel = "F")
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)

但是，我通过renderUI 和uiOutput 尝试这样做没有成功：

library(shiny)
library(shinyWidgets)


ui <- fluidPage(
  tags$head(tags$style(HTML('.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,
                                       .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
                                        background: #1ee38d;
                                        }'))),
  
  #switchInput color while off
  tags$head(tags$style(HTML('.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning,
                                       .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning {
                                        background: #00bfff;
                                        }'))),
  uiOutput("ex1")
)

server <- function(input, output, session) {
  
  
   output$ex1 = renderUI({
     switchInput(inputId = "ans_1", value = TRUE,
                 onLabel = "T", onStatus = "success", offStatus = "warning", 
                 offLabel = "F")})
  
}

shinyApp(ui, server)

感谢您通过 renderUI 促进它的工作。谢谢

【问题讨论】：

标签： css r twitter-bootstrap shiny

【解决方案1】：

您必须使用 labelWidth 和 handleWidth 参数指定适当的宽度。我将它们设置为每个 100 像素。 renderUI下好像没有正确调整自动宽度。

library(shiny)
library(shinyWidgets)


ui <- fluidPage(
  uiOutput("ex1")
)

server <- function(input, output, session) {
  
  
  output$ex1 = renderUI({
    tagList(
      tags$head(tags$style(HTML('.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,
                                       .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
                                        background: #1ee38d;
                                        }'))),
      
      #switchInput color while off
      tags$head(tags$style(HTML('.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning,
                                       .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning {
                                        background: #00bfff;
                                        }'))),
    switchInput(inputId = "ans_1", value = TRUE,
                onLabel = "T", onStatus = "success", offStatus = "warning", 
                offLabel = "F",
                labelWidth = "100",
                handleWidth = "100")
  )
  })
}

shinyApp(ui, server)

^{由reprex package (v2.0.0) 于 2021-06-17 创建}

【讨论】：

这很有帮助，谢谢@polkas。关于未按照我的 CSS 标签中指定的颜色呈现的问题，您知道如何解决吗？谢谢
您可以在renderUI 内的tagList() 中包含CSS。我已经在单独的答案中展示了如何输入评论
@Baroque 不幸的是，您的解决方案不适用于这两个问题:)
@Baroque 至少我的例子工作正常，真正的 tagList 适用于 CSS。
奇怪，我的示例在运行时运行良好。你有什么问题？

【解决方案2】：

这是另一个解决方案，使用设置为 200 的 width 选项。还通过包含在 tagList 中来保留您的 CSS 样式。

library(shiny)
library(shinyWidgets)


ui <- fluidPage(
    tags$head(tags$style(HTML('.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,
                                       .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
                                        background: #1ee38d;
                                        }'))),
    
    #switchInput color while off
    tags$head(tags$style(HTML('.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning,
                                       .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning {
                                        background: #00bfff;
                                        }'))),
    uiOutput("ex1")
)

server <- function(input, output, session) {
    
    
    output$ex1 <- renderUI({
        tagList(tags$head(tags$style(HTML('.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,
                                       .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
                                        background: #1ee38d;
                                        }'))),
                
                #switchInput color while off
                tags$head(tags$style(HTML('.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning,
                                       .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning {
                                        background: #00bfff;
                                        }'))),
        switchInput(inputId = "ans_1", value = TRUE,
                    onLabel = "T", onStatus = "success", offStatus = "warning", 
                    offLabel = "F", width="200px"))})
    
}

shinyApp(ui, server)

【讨论】：

谢谢@polkas 和@Baroque。 @Baroque，我认为您需要包含 labelWidth 和 handleWidth 而不是 width