R Shiny 中的自定义值框被压缩，它们之间有大的空白

Question

我正在尝试在 R Shiny 中制作自定义值框。我发现了如何更改背景的颜色，但有些东西使我的值框变得粗短并在它们之间留下很大的间隙。我想理想地在一条线上显示 3，但即使宽度为 4，它们看起来也被压扁了。我怎样才能让他们有更多的红色，中间只有一小段白色。

下面是一个可重现的示例和屏幕截图。

library(shinydashboard)
library(shiny)
library(dplyr)

red_box_format <- ".inner , p , h3 { background-color: red};"


ui <- fluidPage(
    
    sidebarLayout(
        sidebarPanel(
            textInput(inputId = "greeting",
                      label = "Say hi!"),
            actionButton(inputId = "submit", 
                         label = "Submit")
            
        ),
        mainPanel(
            tags$style(red_box_format),
            column(4,align="center",div(valueBoxOutput("total_perfect"), style= "color: #FFFFFF")),
            column(4,align="center",div(valueBoxOutput("total_fails"), style= "color: #FFFFFF"))
        )
    ))
server <- function(input, output) {
    
    data <- tibble(name = c("Justin", "Corey", "Sibley"),
                   grade = c(50, 100, 100))
    
    
    output$total_perfect <- renderValueBox({
        shiny::req(input$greeting)
        shiny::req(input$submit)
        if(input$greeting == "hi!") {
            num_100s <- data %>% filter(grade == 100) %>% nrow()
            valueBox(value = num_100s, subtitle = "Number of Perfect Scores")
        }
    })
    
    output$total_fails <- renderValueBox({
        shiny::req(input$greeting)
        shiny::req(input$submit)
        if(input$greeting == "hi!") {
            num_50s <- data %>% filter(grade == 50) %>% nrow()
            valueBox(value = num_50s, subtitle = "Number of Failures")
        }
    })
    
}
shinyApp(ui, server)

Answer 1

将输出插入fluidRow；它们将更好地放置在引导程序网格中：

mainPanel(
      fluidRow(
      tags$style(red_box_format),
      valueBoxOutput("total_perfect"),
      valueBoxOutput("total_fails")
    ))

然后，您必须在 server:

中像这样渲染它们

valueBox(value = tags$p(num_100s, style = "text-align:center;color: #FFFFFF;"),
               subtitle = tags$p("Number of Perfect Scores", style = "text-align:center;color: #FFFFFF;"))

Answer 2

如果这有用，我扩展了上面的答案以允许对每个单独的框进行颜色编码，包括如果您愿意，如何将多种颜色合并到一个值框中。（屏幕截图、代码和下面的 explanation/tips [特别是如果你是 CSS 的新手，就像我一样]）。

截图

代码

library(shinydashboard)
library(shiny)
library(dplyr)

navy_inner_box <- "#total_fails .inner{ background-color: navy};"
yellow_inner_box <- "#total_perfect .inner , p , h3 { background-color: yellow};"


ui <- fluidPage(
    
    sidebarLayout(
        sidebarPanel(
            textInput(inputId = "greeting",
                      label = "Say hi!"),
            actionButton(inputId = "submit", 
                         label = "Submit")
            
        ),
        mainPanel(
            fluidRow(
                tags$style(yellow_inner_box),
                tags$style(navy_inner_box),
                valueBoxOutput("total_perfect"),
                valueBoxOutput("total_fails")
            ))
    ))
server <- function(input, output) {
    
    data <- tibble(name = c("Justin", "Corey", "Sibley"),
                   grade = c(50, 100, 100))
    
    
    output$total_perfect <- renderValueBox({
        shiny::req(input$greeting)
        shiny::req(input$submit)
        if(input$greeting == "hi!") {
            num_100s <- data %>% filter(grade == 100) %>% nrow()
            valueBox(value = tags$p(num_100s, style = "text-align:center;color: #FFFFFF; background-color: red"),
                     subtitle = tags$p("Number of Perfect Scores", style = "text-align:center;color: #FFFFFF; background-color: red"))        }
    })
    
    output$total_fails <- renderValueBox({
        shiny::req(input$greeting)
        shiny::req(input$submit)
        if(input$greeting == "hi!") {
            num_50s <- data %>% filter(grade == 50) %>% nrow()
            valueBox(value = tags$p(num_50s, style = "text-align:center;color: #FFFFFF; background-color: navy"),
                     subtitle = tags$p("Number of Total Failures", style = "text-align:center;color: #FFFFFF; background-color: navy"))}
    })
    
}
shinyApp(ui, server)

Explanation/Tips

作为 CSS 的新手，我不明白为什么当我指定背景颜色参数时，这些框要么不改变颜色，要么只改变其中的一部分。值框分为 3 个部分：值（我的屏幕截图中的 2 和 1）、字幕和内部部分（没有文本的地方）。每一个都有自己的背景，所以如果你想让每个盒子都有不同的颜色，你需要通过它们的名字来指定每个盒子的颜色（注意CSS name of #total_fails in the navy_inner_box) 对应输出名称，output$total_fails.

其他背景颜色在服务器中分别包装值和字幕的调用中指定。

如果不是通过免费 Google Chrome 扩展 CSS Selector，我不会发现这些盒子的内部名称。如果您是 CSS 的新手并且这些标签对您来说没有直观意义，我强烈建议您检查一下。

R Shiny 中的自定义值框被压缩，它们之间有大的空白

custom valueboxes in R Shiny are compressed with large white spaces in between them

r

reactive-programming

shiny

shinydashboard

renderui