Mulai sekarangMulai gratis

Wireframing dengan box

Satu baris baru didefinisikan oleh fluidRow().

Selain itu, box() dapat ditambahkan ke body untuk mengatur konten. Beberapa box() dapat ditambahkan, masing-masing dengan lebar bawaan 6, dan dapat disesuaikan dengan argumen width. Hanya dua box() bawaan yang dapat ditempatkan dalam satu baris, karena lebar maksimum satu baris adalah 12. Anda juga dapat menetapkan height sehingga box dengan berbagai dimensi dapat ditambahkan.

box() ini kemudian memiliki dua tujuan utama di sini. Pertama, untuk mengatur elemen-elemen shinydashboard Anda; dan kedua, untuk melakukan wireframing, sehingga Anda dapat merencanakan penempatan setiap objek sebelum menambahkan konten.

Anda akan melakukan wireframing dengan box kosong dalam latihan ini.

Paket shiny dan shinydashboard telah dimuat. Header dan sidebar dashboard disimpan sebagai header dan sidebar.

Latihan ini merupakan bagian dari kursus

Membangun Dashboard dengan shinydashboard

Lihat Kursus

Instruksi latihan

  • Pada baris pertama, tambahkan tiga box() dengan lebar 2, 2, dan 8.
  • Pada baris kedua, tambahkan satu box() yang memenuhi seluruh baris dan memiliki tinggi 200.
  • Pada baris ketiga berisi dua box kosong dengan lebar yang sama, beri label "A slider goes here" dan "Some info boxes go here".

Latihan interaktif langsung praktik

Cobalah latihan ini dengan melengkapi kode contoh ini.

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)
Edit dan Jalankan Kode