線框圖規劃（Wireframing）

讓我們回到先前那個足球錦標賽分析結果的儀表板範例。在之前的練習中，你已經設定了標頭與側邊欄。

特別是，側邊欄中的按鈕是用 menuItem() 定義，並包含在 sidebarMenu() 之中。你可能注意到，這些按鈕目前還不會有任何作用。接下來你要把這些側邊欄按鈕連結到 UI 主體（body）中的不同頁面。這仍然屬於線框圖規劃流程的一部分，你還在決定各個物件的擺放位置。主體中的每個頁面由 tabItem() 定義，且必須包含在 tabItems 之中。

shiny 與 shinydashboard 套件已為你載入。此外，儀表板的標頭已經存成 header。

本練習屬於課程

使用 shinydashboard 建立儀表板

檢視課程

動手互動練習

試著完成這個範例程式碼，體驗一下這個練習。

library(shiny)
library(shinydashboard)

header <- dashboardHeader(
  title = "Analysis results for global soccer tournament",
  titleWidth = 400,
  dropdownMenu(type = "messages",
               messageItem("Colleage", "Hello world!")),
  dropdownMenu(type = "notifications",
               notificationItem("Have you rested today?"),
               taskItem("Dashboard completion", value = 20)))

sidebar <- dashboardSidebar(
  sidebarMenu(
    width = 400,
    id = "pages",
    menuItem("Match details", tabName = "matches", icon = icon("futbol"),
             badgeLabel = "New content!", badgeColor = "green"),
    menuItem("Overall results", tabName = "overall", 
             menuSubItem("Charts", tabName = "charts"),
             menuSubItem("Data table", tabName = "datatable", icon=icon("file-excel"))),
    menuItem("A slider",  sliderInput("slider", "Number of goals", min=0, max=10, value = 2))
  )
)

body <- dashboardBody(
  # Link "matches" to an empty page in the body
  ___(
    ___(___, "Match information goes here")
  )
)
ui <- dashboardPage(header, sidebar, body)
server <- function(input, output){}
shinyApp(ui, server)

編輯並執行程式碼