ÎncepețiÎncepe gratuit

Wireframing cu box-uri

Un rând nou este definit prin fluidRow().

În plus, box() poate fi adăugat în corp pentru a organiza conținutul. Poți adăuga mai multe box()-uri, fiecare cu o lățime implicită de 6, care poate fi ajustată cu argumentul width. Într-un rând pot fi plasate doar două box()-uri cu lățimea implicită, deoarece lățimea maximă a unui rând este 12. Poți seta și height pentru a adăuga box-uri cu dimensiuni diferite.

Aceste box()-uri au două roluri principale. În primul rând, organizează elementele din shinydashboard; în al doilea rând, facilitează wireframing-ul, astfel încât să poți planifica pozițiile fiecărui obiect înainte de a adăuga conținut.

În acest exercițiu vei realiza wireframing cu box-uri goale.

Bibliotecile shiny și shinydashboard au fost încărcate. Antetul și bara laterală ale dashboard-ului sunt stocate ca header și sidebar.

Acest exercițiu face parte din cursul

Crearea dashboardurilor cu shinydashboard

Vezi cursul

Instrucțiuni pentru exercițiu

  • În primul rând, adaugă trei box()-uri cu lățimile 2, 2 și 8.
  • În al doilea rând, adaugă un box() care ocupă întregul rând și are înălțimea 200.
  • În al treilea rând, care conține două box-uri goale cu lățimi egale, etichetate ca "A slider goes here" și "Some info boxes go here".

Exercițiu interactiv practic

Încearcă acest exercițiu completând acest cod de exemplu.

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)
Editează și rulează codul