Aan de slagBegin gratis

Statuses instellen

Een van de goede UI/UX-praktijken die in de video werden uitgelicht, is kleuren effectief gebruiken. Zoals je ook hebt gezien, kun je kleurgecodeerde statuses toevoegen aan box()-en en notificationItem() door de juiste argumenten in te stellen.

Available statuses

Hiermee kun je deze vooraf gedefinieerde kleuren gebruiken zodat gebruikers snel de aard van het bericht herkennen zonder er heel geconcentreerd naar te hoeven kijken.

Hierna ga je verschillende statuses in de shinydashboard uitproberen.

In deze oefening zijn de libraries shiny en shinydashboard al voor je geladen. Daarnaast zijn de header en sidebar opgeslagen als sidebar, en is server() een lege functie.

Deze oefening maakt deel uit van de cursus

Dashboards bouwen met shinydashboard

Bekijk cursus

Interactieve oefening met praktijkervaring

Probeer deze oefening door deze voorbeeldcode aan te vullen.

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)
Code bewerken en uitvoeren