เริ่มต้นใช้งานเริ่มต้นใช้งานได้ฟรี

การวาง Wireframe ด้วย Box

แถวใหม่ถูกกำหนดด้วย fluidRow()

นอกจากนี้ยังสามารถเพิ่ม box() ลงใน body เพื่อจัดระเบียบเนื้อหาได้ สามารถเพิ่ม box() ได้หลายกล่อง โดยแต่ละกล่องมีความกว้างเริ่มต้นเท่ากับ 6 และปรับได้ด้วยอาร์กิวเมนต์ width ในแถวหนึ่งวาง box() แบบค่าเริ่มต้นได้สูงสุด 2 กล่อง เนื่องจากความกว้างสูงสุดของแถวคือ 12 นอกจากนี้ยังกำหนด height ได้ด้วย เพื่อให้กล่องมีขนาดหลากหลายตามต้องการ

box() เหล่านี้มีประโยชน์หลัก 2 ประการ ได้แก่ ช่วยจัดระเบียบองค์ประกอบภายใน shinydashboard และช่วยในการวาง wireframe เพื่อวางแผนตำแหน่งของแต่ละออบเจกต์ก่อนเพิ่มเนื้อหาจริง

ในแบบฝึกหัดนี้จะฝึกการวาง wireframe ด้วยกล่องเปล่า

โหลดแพ็กเกจ shiny และ shinydashboard ไว้แล้ว และเก็บส่วน header และ sidebar ของ dashboard ไว้ในตัวแปร header และ sidebar ตามลำดับ

แบบฝึกหัดนี้เป็นส่วนหนึ่งของหลักสูตร

การสร้างแดชบอร์ดด้วย shinydashboard

ดูคอร์ส

คำแนะนำการฝึกหัด

  • ในแถวแรก เพิ่ม box() จำนวน 3 กล่อง โดยมีความกว้างเป็น 2, 2 และ 8
  • ในแถวที่สอง เพิ่ม box() 1 กล่องที่ขยายเต็มแถวและมีความสูง 200
  • ในแถวที่สามซึ่งมีกล่องเปล่า 2 กล่องความกว้างเท่ากัน ระบุป้ายกำกับว่า "A slider goes here" และ "Some info boxes go here"

แบบฝึกหัดเชิงโต้ตอบแบบลงมือทำ

ลองทำแบบฝึกหัดนี้โดยเติมโค้ดตัวอย่างนี้ให้สมบูรณ์

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)
แก้ไขและรันโค้ด