css - 在R Shiny中的fluidRow中设置不等列长度文本的格式

Question

我目前正在构建一个 Shiny 的应用程序，并且想要显示一些文本 block 。文本 block 的长度不同，我想为每个 block 着色，并且 block 之间也有一些间隙。

但是，由于 block 具有不同的文本长度，我只能将 block 着色到有文本的位置，而不是空白区域。然而，这会导致颜色有点难看。

而且，列之间的最小间隙显然是 1，从视觉 Angular 来看，这个间隙太大了。

我想要的是将 B 列和 C 列的颜色减小到 A 列的长度。 我还想减少列之间的间隙，并将其设置为偏移量 1，但无法将其偏移到 < 1 的分数。

这是生成上图的代码:

    ui <- fluidPage(
  mainPanel(
    tabsetPanel(
      tabPanel("Data Visualization",
               fluidRow(
                 column(3,h3("Title A",align = "center"),style = "background-color: red;"),
                 column(3,h3("Title B",align = "center"),style = "background-color: yellow;",offset = 1),
                 column(3,h3("Title C",align = "center"),style = "background-color: green;",offset = 1)
               ),
               fluidRow(
                 column(3, h4(tags$li("Text A")),style = "background-color: red;"),
                 column(3,tags$li(h4("Text B")),style = "background-color: yellow;",offset = 1),
                 column(3,tags$li(h4("Text C")),style = "background-color: green;",offset = 1)                       
               ),
               fluidRow(
                 column(3, h4(tags$li("More Text A")),style = "background-color: red;"),
                 column(3,"",style = "background-color: yellow;", offset = 1),
                 column(3,"",style = "background-color: green;", offset = 1)                       
               ),    
               fluidRow(
                 column(3, h4(tags$li("More and More Text A")),style = "background-color: red;"),
                 column(3,"",style = "background-color: yellow;", offset = 1),
                 column(3,"",style = "background-color: green;", offset = 1)                       
               )
))))

server <- function(input,output) {}

shinyApp(ui = ui, server = server)

请告诉我如何在没有任何硬编码像素宽度的情况下设置样式(因为这可能会影响不同屏幕尺寸的观看体验)以使颜色等于最大长度列。

如果有另一种方法可以使此类文本框 Shiny ，那么了解一下也会有所帮助。

非常感谢!

Answer 1

我认为使用shinydashboard::box()将是一种更简单的方法:

library(shiny)
library(shinydashboard)

body <- dashboardBody(
# change this to set space between boxes
  tags$head(tags$style(
    HTML('.row div {padding: 0% 1% 0% 1% !important;}'))), 
  
  fluidRow(
    box(
      title = "Title A", width = 4, background = "red",
      "Some text that is contained within a red box"
    ),
    box(
      title = "Title B", width = 4, background = "yellow",
      "Some text that is contained within a yellow box and also a bit longer
      than the other boxes."
    ),
    box(
      title = "Title C",width = 4, background = "green",
      "Some text that is contained within a green box"
    )
  ), 
  
  fluidRow(
    box(
      width = 4, background = "red", 
      "And simply don't specify a title to create some more text about topic A."
    )
  )
)

ui <- dashboardPage(
  dashboardHeader(title = "Example of Dashboard"),
  dashboardSidebar(),
  body
)

shinyApp(ui = ui, server = function(input, output) { })

这给了你