r语言 - 将 UI 划分为闪亮的行

Question

我的UI在闪亮时遇到了问题。我需要仪表板主体被两行分开。

第一行由 2 列分隔。一个带有一个图，另一个具有 2 个图，每个图都是连续的。

第二行由 3 列分隔，每列都有一个信息框。

这是我的代码：

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'))
)
)
)

这就是我希望它的样子：

理想的布局

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)