Comece agoraComece grátis

Wireframing com boxes

Uma nova linha é definida por fluidRow().

Além disso, box() pode ser adicionada ao corpo para organizar o conteúdo. Várias box() podem ser adicionadas, cada uma com largura padrão de 6, e podem ser ajustadas com o argumento width. Apenas duas box() padrão podem ser colocadas em uma linha, já que a largura máxima de uma linha é 12. Você também pode definir height para que boxes de várias dimensões possam ser adicionadas.

Essas box() servem a dois propósitos principais aqui. Primeiro, elas organizam os elementos do seu shinydashboard; e segundo, permitem fazer o wireframing, para que você possa planejar a posição de cada objeto antes de adicionar o conteúdo.

Neste exercício, você fará o wireframing com boxes vazias.

Os pacotes shiny e shinydashboard já foram carregados. O cabeçalho e a barra lateral do dashboard estão armazenados como header e sidebar.

Este exercicio faz parte do curso

Construindo dashboards com shinydashboard

Ver curso

Instruções do exercicio

  • Na primeira linha, adicione três box() com larguras 2, 2 e 8.
  • Na segunda linha, adicione uma box() que preencha a linha inteira e tenha altura 200.
  • Na terceira linha, inclua duas boxes vazias com larguras iguais, rotuladas como "A slider goes here" e "Some info boxes go here".

exercicio interativo prático

Tente este exercicio completando este código de exemplo.

body <- dashboardBody(
  # Add three boxes with widths 2, 2 and 8
  fluidRow(box("Some buttons go here", ___, height = 100), 
           ___("Checkboxes go here", ___, height = 50),
           ___("A chart goes here", ___, height = 150)),
  # Add one box that fills the entire row and has height 200
  fluidRow(___("Data table goes here"), ___, ___),
  # Add a third row containing two boxes with equal widths
  fluidRow(___)
)

ui <- dashboardPage(header, sidebar, body)
server <- function(input, output){}
shinyApp(ui, server)
Editar e Executar Código