MulaiMulai sekarang secara gratis

Setting statuses

One of the good UI/UX practices, that were highlighted in the video, is to use colors effectively. As you have also seen, color-coded statuses can be added to box()es and notificationItem() by setting the appropriate arguments.

Available statuses

This allows you to use these predefined colors to help users quickly identity the nature of the message without having to pay close attention.

In the following, you will try different statuses in the shinydashboard.

In this exercise, the shiny and shinydashboard libraries have already been loaded for you. Furthermore, the header and sidebar have been stored as sidebar, and server() is an empty function.

Latihan ini adalah bagian dari kursus

Building Dashboards with shinydashboard

Lihat Kursus

Latihan interaktif praktis

Cobalah latihan ini dengan menyelesaikan kode contoh berikut.

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