Kom igångKom igång gratis

Wireframing med boxar

En ny rad definieras med fluidRow().

Dessutom kan box() läggas till i kroppen för att organisera innehåll. Flera box()ar kan läggas till, var och en med en standardbredd på 6, och bredden kan justeras med argumentet width. Endast två box()ar med standardbredd får plats på en rad, eftersom den maximala radbredden är 12. Du kan även ange height för att lägga till boxar med olika dimensioner.

Dessa box()ar fyller två huvudsyften här. För det första organiserar de elementen i ditt shinydashboard, och för det andra används de för wireframing – så att du kan planera placeringen av varje objekt innan du lägger till innehåll.

I den här övningen utför du wireframing med tomma boxar.

Paketen shiny och shinydashboard har laddats. Dashboardets sidhuvud och sidopanel är lagrade som header och sidebar.

Den här övningen är en del av kursen

Bygga dashboards med shinydashboard

Visa kurs

Övningsinstruktioner

  • Lägg till tre box()ar i den första raden med bredderna 2, 2 och 8.
  • Lägg till en box() i den andra raden som fyller hela raden och har höjden 200.
  • I den tredje raden, som innehåller två tomma boxar med lika bredd, märkta som "A slider goes here" och "Some info boxes go here".

Interaktiv övning med praktiskt arbete

Testa den här övningen genom att slutföra den här exempelkoden.

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)
Redigera och kör kod