設定狀態

在影片中強調的一個良好 UI/UX 做法，就是善用顏色。就像你剛剛看到的，透過設定適當的引數，你可以在 box() 和 notificationItem() 上加入以顏色區分的狀態。

Available statuses

這讓你可以使用預先定義的顏色，幫助使用者快速辨識訊息的性質，而不必特別仔細閱讀。

接下來，你會在 shinydashboard 中嘗試不同的狀態設定。

在本練習中，shiny 與 shinydashboard 函式庫已為你載入。除此之外，標頭與側邊欄已分別儲存為 sidebar，而 server() 是一個空的函式。

本練習屬於課程

使用 shinydashboard 建立儀表板

檢視課程

動手互動練習

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

library(shiny)
library(shinydashboard)

sidebar <- dashboardSidebar(
  width = 300,
  sidebarMenu(
    id = "pages",
    menuItem("Historical trends",
             tabName = "historical"),
    menuItem("Profits and Losses (PnLs)", 
             tabName = "profit", 
             icon = icon("money-bill-alt"),
             badgeLabel = "+2.3%", badgeColor = "green")
  )
)

header <- dashboardHeader(
  title = "Portfolio dashboard for Sally",
  titleWidth = 300,
  dropdownMenu(type = "notifications",
               # Change status of "Sell alert" from "warning" to "danger"
               notificationItem("Sell alert", status = "warning"),
               # Set status of "Buy alert" to "success".
               notificationItem("Buy alert", ___))
)

body <- dashboardBody()

ui <- dashboardPage(header, sidebar, body)
server <- function(input, output){}
shinyApp(ui, server)

編輯並執行程式碼