闪亮的下拉复选框输入
Posted
技术标签:
【中文标题】闪亮的下拉复选框输入【英文标题】：drop-down checkbox input in shiny 【发布时间】：2016-04-04 11:08:52 【问题描述】：是否可以在 Shiny 中有一个下拉列表，您可以在其中选择多个值？我知道selectInput 有设置multiple = T 的选项，但我不喜欢所有选定的选项都在屏幕上可见，特别是因为我有超过40 个。checkboxGroupInput() 也是如此，我更喜欢但仍然显示所有选定的值。是不是可以像我从下面的 Excel 中复制的那样获得一个下拉列表，而不是之后的 Shinys selectInput 和 checkboxGroupInput() 的示例？
【问题讨论】：
看起来你必须创建自己的自定义闪亮小部件:) 鉴于我缺乏知识或 CSS/html，希望有其他解决方案...... 【参考方案1】：EDIT：这个函数（和其他）在包shinyWidgets中可用
嗨，我曾经写过这个dropdownButton 函数，它创建了一个引导下拉按钮（doc here），结果如下所示：
代码如下：
# func --------------------------------------------------------------------
dropdownButton <- function(label = "", status = c("default", "primary", "success", "info", "warning", "danger"), ..., width = NULL)
status <- match.arg(status)
# dropdown button content
html_ul <- list(
class = "dropdown-menu",
style = if (!is.null(width))
paste0("width: ", validateCssUnit(width), ";"),
lapply(X = list(...), FUN = tags$li, style = "margin-left: 10px; margin-right: 10px;")
)
# dropdown button apparence
html_button <- list(
class = paste0("btn btn-", status," dropdown-toggle"),
type = "button",
`data-toggle` = "dropdown"
)
html_button <- c(html_button, list(label))
html_button <- c(html_button, list(tags$span(class = "caret")))
# final result
tags$div(
class = "dropdown",
do.call(tags$button, html_button),
do.call(tags$ul, html_ul),
tags$script(
"$('.dropdown-menu').click(function(e)
e.stopPropagation();
);")
)
还有一个例子：
# app ---------------------------------------------------------------------
library("shiny")
ui <- fluidPage(
tags$h1("Example dropdown button"),
br(),
fluidRow(
column(
width = 6,
dropdownButton(
label = "Check some boxes", status = "default", width = 80,
checkboxGroupInput(inputId = "check1", label = "Choose", choices = paste(1:26, ") Choice ", LETTERS))
),
verbatimTextOutput(outputId = "res1")
),
column(
width = 6,
dropdownButton(
label = "Check some boxes", status = "default", width = 80,
actionButton(inputId = "a2z", label = "Sort A to Z", icon = icon("sort-alpha-asc")),
actionButton(inputId = "z2a", label = "Sort Z to A", icon = icon("sort-alpha-desc")),
br(),
actionButton(inputId = "all", label = "(Un)select all"),
checkboxGroupInput(inputId = "check2", label = "Choose", choices = paste(1:26, ") Choice ", LETTERS))
),
verbatimTextOutput(outputId = "res2")
)
)
)
server <- function(input, output, session)
output$res1 <- renderPrint(
input$check1
)
# Sorting asc
observeEvent(input$a2z,
updateCheckboxGroupInput(
session = session, inputId = "check2", choices = paste(1:26, ") Choice ", LETTERS), selected = input$check2
)
)
# Sorting desc
observeEvent(input$z2a,
updateCheckboxGroupInput(
session = session, inputId = "check2", choices = paste(26:1, ") Choice ", rev(LETTERS)), selected = input$check2
)
)
output$res2 <- renderPrint(
input$check2
)
# Select all / Unselect all
observeEvent(input$all,
if (is.null(input$check2))
updateCheckboxGroupInput(
session = session, inputId = "check2", selected = paste(1:26, ") Choice ", LETTERS)
)
else
updateCheckboxGroupInput(
session = session, inputId = "check2", selected = ""
)
)
shinyApp(ui = ui, server = server)
作为奖励，我将升序/降序排序放在第二个下拉按钮中。
2016 年 3 月 22 日编辑
要将您的复选框拆分为多个列，您可以使用fluidRow 和columns 以及多个复选框自己进行拆分，您只需在服务器端绑定值。
要实现滚动，请将您的复选框放入带有 style='overflow-y: scroll; height: 200px;' 的 div 中。
看看这个例子：
library("shiny")
ui <- fluidPage(
tags$h1("Example dropdown button"),
br(),
fluidRow(
column(
width = 6,
dropdownButton(
label = "Check some boxes", status = "default", width = 450,
tags$label("Choose :"),
fluidRow(
column(
width = 4,
checkboxGroupInput(inputId = "check1a", label = NULL, choices = paste0(1:10, ") ", LETTERS[1:10]))
),
column(
width = 4,
checkboxGroupInput(inputId = "check1b", label = NULL, choices = paste0(11:20, ") ", LETTERS[11:20]))
),
column(
width = 4,
checkboxGroupInput(inputId = "check1c", label = NULL, choices = paste0(21:26, ") ", LETTERS[21:26]))
)
)
),
verbatimTextOutput(outputId = "res1")
),
column(
width = 6,
tags$style(".container border:2px solid steelblue; width: 100%; height: 200px; overflow-y: scroll; "),
dropdownButton(
label = "Check some boxes", status = "default", width = 120,
tags$div(
class = "container",
checkboxGroupInput(inputId = "check2", label = "Choose", choices = paste0(1:26, ") ", LETTERS))
)
),
verbatimTextOutput(outputId = "res2")
)
)
)
server <- function(input, output, session)
valuesCheck1 <- reactiveValues(x = NULL)
observeEvent(input$check1a, valuesCheck1$x <- unique(c(valuesCheck1$x, input$check1a)))
observeEvent(input$check1b, valuesCheck1$x <- unique(c(valuesCheck1$x, input$check1b)))
observeEvent(input$check1c, valuesCheck1$x <- unique(c(valuesCheck1$x, input$check1c)))
output$res1 <- renderPrint(
valuesCheck1$x
)
output$res2 <- renderPrint(
input$check2
)
shinyApp(ui = ui, server = server)
【讨论】：
似乎宽度参数不起作用。如果我将 40 更改为 80，则没有任何变化。 解决方案：只需将 style=("width: 120px;"), 添加到 html 按钮外观即可。 宽度参数有效，试试width = "100%"或者"width = 400"，就是40或者80太小了，不能设置比子元素宽度低的宽度
谢谢，你是对的。 A (de)select 选项也将是一个不错的功能，但我在互联网上读到这需要 CSS。
actionButton 也可以，我编辑了答案，重新运行代码并查看第二个下拉按钮。【参考方案2】：
首先，非常感谢这个 dropdownButton 功能。很有用！
其次，我尝试将它用于闪亮的仪表板侧边栏菜单，但默认字符的样式是“颜色：白色”（因为背景较暗）。这需要我几个小时才能理解可以在您的函数内部进行更改，更准确地说是在 html_ul 内容中。这是感兴趣的线，带有 color:black ：
lapply(X = list(...), FUN = tags$li, style = "margin-left: 10px; margin-right: 10px; color:black")
很简单...但是当您不知道它时（R 是我知道的唯一语言）...所以，我希望这将有助于像我这样的任何其他 css-ignorant（和/或 HTML？）！
干杯！
【讨论】：
【参考方案3】：cmets 中有几个与 dropdownButton 相关的问题（对我很有用，谢谢）关于如何在下拉菜单上创建 滚动条。抱歉，我没有直接在 cmets 中回复的声誉。
尝试在你的 style.css 中调整相关的 ID，无论你放在 dropdownButton 中的任何对象。所以对于这个例子，checkboxGroupInput ID 需要有：
#check1
height: 200px;
overflow: auto;
编辑：
在ui.R中调用styles.css：
navbarPage("Superzip", id="nav",
tabPanel("Interactive map",
div(class="outer",
tags$head(
# Include our custom CSS
includeCSS("styles.css")
),
leafletOutput("map", , ),
...
还有styles.css，输入ID ttype 和chain 会自动溢出：
input[type="number"]
max-width: 80%;
div.outer
position: fixed;
top: 41px;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
padding: 0;
/* Customize fonts */
body, label, input, button, select
font-family: 'Helvetica Neue', Helvetica;
font-weight: 200;
h1, h2, h3, h4 font-weight: 400;
#controls
/* Appearance */
background-color: white;
padding: 0 20px 20px 20px;
cursor: move;
/* Fade out while not hovering */
opacity: 0.65;
zoom: 0.9;
transition: opacity 500ms 1s;
#controls:hover
/* Fade in while hovering */
opacity: 0.95;
transition-delay: 0;
#data_inputs
/* Appearance */
background-color: white;
padding: 0 20px 20px 20px;
cursor: move;
/* Fade out while not hovering */
opacity: 0.65;
zoom: 0.9;
transition: opacity 500ms 1s;
#data_inputs:hover
/* Fade in while hovering */
opacity: 0.95;
transition-delay: 0;
/* Position and style citation */
#cite
position: absolute;
bottom: 10px;
left: 10px;
font-size: 12px;
#cite
position: absolute;
bottom: 10px;
left: 10px;
font-size: 12px;
#ttype
height: 200px;
overflow: auto;
#chain
height: 200px;
overflow: auto;
."form-group shiny-input-checkboxgroup shiny-input-container"
height: 50px;
overflow: auto;
/* If not using map tiles, show a white background */
.leaflet-container
background-color: white !important;
【讨论】：
我对滚动条功能还是很感兴趣的。但我没有完全得到你的答案，你的意思是这个简单的解决方案包括一个滚动条？！ @Tim_Utrecht 它对我有用。我不是 HTML 和 CSS 方面的专家，但似乎你可以告诉它在元素大于所选高度时自动使用滚动条。dropdownButton( label = "Chains", status = "default", actionButton(inputId = "all_chains", label = "(Un)select all"), checkboxGroupInput(inputId = "chain", label = "", choices = chains, selected = chains) ) 和风格：#chain height: 200px; overflow: auto;
我也没有......你在哪里加载styles.css？您能否在答案中添加完整的 styles.css 文件和调用它的位置？
@Tim_Utrecht 见上文，基本上是对this Shiny example的代码的改编【参考方案4】：
对于可能需要类似解决方案的未来访问者，selectizeInput 是一个不错的选择。
优点：
-
您可以设置列表长度
是下拉功能
用户可以通过搜索列表选择一个或多个选项
或在框中输入。
有关更多信息，请查看上面的链接。希望这会有所帮助。
干杯！
【讨论】：
以上是关于闪亮的下拉复选框输入的主要内容，如果未能解决你的问题，请参考以下文章