Thema's

Shiny maakt het eenvoudig om het thema van een app aan te passen. De UI-functies in Shiny maken gebruik van Twitter Bootstrap, een populair framework voor het bouwen van webapplicaties. Bootswatch breidt Bootstrap uit en maakt het heel gemakkelijk om een applicatie een nieuw uiterlijk te geven met minimale codewijzigingen.

In deze oefening voeg je een titelpaneel toe aan je app, gebruik je de themaselector om verschillende thema's te verkennen en pas je vervolgens een thema naar keuze toe.

Deze oefening maakt deel uit van de cursus

Webapplicaties bouwen met Shiny in R

Cursus bekijken

Oefeninstructies

Voer de app uit en gebruik de themaselector rechtsboven om verschillende Bootswatch-thema's te verkennen.
Voeg een passende titel toe aan de pagina.
Vervang themeSelector() door een thema naar jouw keuze.

Praktische interactieve oefening

Probeer deze oefening eens door deze voorbeeldcode in te vullen.

ui <- fluidPage(
  # CODE BELOW: Add a titlePanel with an appropriate title
  
  # REPLACE CODE BELOW: with theme = shinythemes::shinytheme("")
  shinythemes::themeSelector(),
  sidebarLayout(
    sidebarPanel(
      selectInput('name', 'Select Name', top_trendy_names$name)
    ),
    mainPanel(
      tabsetPanel(
        tabPanel('Plot', plotly::plotlyOutput('plot_trendy_names')),
        tabPanel('Table', DT::DTOutput('table_trendy_names'))
      )
    )
  )
)

server <- function(input, output, session){
  # Function to plot trends in a name
  plot_trends <- function(){
     babynames %>% 
      filter(name == input$name) %>% 
      ggplot(aes(x = year, y = n)) +
      geom_col()
  }
  output$plot_trendy_names <- plotly::renderPlotly({
    plot_trends()
  })
  
  output$table_trendy_names <- DT::renderDT({
    babynames %>% 
      filter(name == input$name)
  })
}

shinyApp(ui = ui, server = server)

Code bewerken en uitvoeren