Разделите пользовательский интерфейс на блестящие ряды - PullRequest
1 голос
/ 06 февраля 2020

У меня проблема с моим пользовательским интерфейсом в блестящем. Мне нужно, чтобы панель инструментов была разделена на две строки.

Первая строка разделена на 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'))
    )
  )
)

Вот как я хочу, чтобы это выглядело:

идеальный макет

1 Ответ

1 голос
/ 06 февраля 2020

См. Ниже: фокус сначала делит все на 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)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...