Question

我的UI出现问题了。我需要将dashboardBody分为两行。

第一行分为两列。一个带有一个地块，另一个带有2个地块，每一个都连续。

第二行分为三列，每列都有一个信息框。

这是我的代码：

dashboardPage(skin = 'green',
  dashboardHeader(title = 'Zanity - Análise de Dados e Consultoria', titleWidth = 400),
  dashboardSidebar(width = 400),
  dashboardBody(
    box(title = 'Weekly revenue', plotlyOutput('plot_revenue')),
    box(title = 'Loading %', plotlyOutput('plot_porc_loading')),
    box(title = 'Manufacture', plotly('plot_manu')),
    fluidRow(
      infoBox('Ex. Load', 200, icon = icon('weight')),
      infoBox('Loading %', '0.97%', icon = icon('percent')),
      infoBox('Revenue', 'R$ 60.000,00', icon = icon('dollar-sign'))
    )
  )
)

这就是我想要的样子：

ideal layout

Answer 1

请参阅下文：诀窍是先将所有内容划分为fluidRow()，然后将column()中的每一行都跳水，并理解每一列都有一个width = 12，即使该行中的列不是

library(shiny)
library(shinydashboard)

ui <- dashboardPage(skin = 'green',
  dashboardHeader(title = 'Zanity - Análise de Dados e Consultoria', titleWidth = 400),
  dashboardSidebar(width = 400),
  dashboardBody(
    #First Row:
    fluidRow(
      column(6,
             box(title = 'Weekly revenue', width = 12)
             ),
      column(6,
             box(title = 'Loading %', width = 12),
             box(title = 'Manufacture', width = 12)
             )
    ),
    #Second Row:
    fluidRow(
      infoBox('Ex. Load', 200, icon = icon('weight')),
      infoBox('Loading %', '0.97%', icon = icon('percent')),
      infoBox('Revenue', 'R$ 60.000,00', icon = icon('dollar-sign'))
    )
  )
)

server <- function(input, output) { }

shinyApp(ui, server)

将用户界面划分为闪亮的行

1 个答案: