在 Shiny 应用程序中更改 shinyWidget 的 switchInput 默认颜色

Question

如何更改 SwitchInput 元素的颜色（来自 ShinyWidgets 包）？

Answer 1

首先，在您的 switchInput() 函数中，您必须通过更改 onStatus 和 offStatus 参数来指定“开”和“关”状态：

switchInput(
                       inputId = "switch",
                       label = "Label", 
                       labelWidth = "120px", 
                       onLabel = "ON",
                       offLabel = "OFF",
                       onStatus = "danger",
                       offStatus = "info"
                     ),

然后，在您的 UI.r 文件或 Shiny 应用程序的 UI 部分中，添加以下 CSS 标签：

#switchInput color while on
            tags$head(tags$style(HTML('.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger,
                                       .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger {
                                        background: green;
                                        color: white;
                                        }'))),
            
#switchInput color while off
            tags$head(tags$style(HTML('.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info,
                                       .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info {
                                        background: red;
                                        color: black;
                                        }'))),

使用background设置开关的背景色，color设置文字颜色

在 Shiny 应用程序中更改 shinyWidget 的 switchInput 默认颜色

Change shinyWidget's switchInput default colors in Shiny app

r

shiny

bootstrap-switch

shinywidgets