使用 ShinyWidgets 和 bslib 清理闪亮应用程序中的选择表单

Question

以下代码可用于重现我的问题并帮助说明我的问题。使用 litera 主题时，UI 中的框 2 在屏幕上呈现得有些“丑陋”。您可以在图中看到方框 2 的角上有一点白边。

我更喜欢 ShinyWidgets 中框 2 的功能（尤其是多重选择），但前提是我能让它看起来更专业一点。这似乎是针对特定主题的。如果我将主题更改为“扁平”，两种形式看起来都不错。

此外，该主题的浏览按钮似乎与输入框不太对齐。

我的两个问题是：1）有谁知道如何去除盒子 2 内的一点颜色，使其变成白色并渲染得更像盒子 1？其次，关于如何清理浏览器使其排列更多并且看起来更干净有什么建议吗？

library(shiny)
library(bslib)
library(shinyWidgets)

ui <- fluidPage(
    navbarPage(
        theme = bs_theme(bootswatch = "litera"),
        title = 'Methods',
        tabPanel('One'),
    ),  
    sidebarLayout(
        sidebarPanel(
            fileInput('input0', 'Browse'),
            uiOutput("input1"),
            uiOutput("input2")
        ),
        mainPanel(
            h1('Hello World!'),
        ),
    )
)

server <- function(input, output) {
output$input1 <- renderUI({
    selectInput("input1", "Choose:", letters[1:5])
})

output$input2 <- renderUI({
    pickerInput("input2", "Choose:", letters[1:5])
})

}

shinyApp(ui, server)

Answer 1

shinyWidgets::pickerInput 似乎在按钮周围添加了一个“

<div class="form-control">

”。然而，引导程序中的“form-control”类用于表单控件而不是容器。对于容器，有“form-group”或“input-group”类。因此，白色背景是所有输入控件所期望的（对于这个主题）。

要摆脱白色背景，您可以在fluidPage中添加自定义样式：

tags$head(tags$style(HTML("div.form-control {background-color: transparent;}"))),

shiny::fileInput 与shinyWidgets 无关：它因为bslib 而变得混乱。不过，您可以构建自己的自己的文件上传