Themes

Shiny macht es leicht, das Theme einer App anzupassen. Die UI-Funktionen in Shiny verwenden Twitter Bootstrap, ein beliebtes Framework zum Erstellen von Webanwendungen. Bootswatch erweitert Bootstrap und macht es sehr einfach, eine Anwendung mit minimalen Codeänderungen mit einem neuen Look zu versehen.

In dieser Übung fügst du deiner App ein Titel-Panel hinzu, nutzt den Theme-Selector, um verschiedene Themes auszuprobieren, und wendest anschließend ein Theme deiner Wahl an.

Diese Übung ist Teil des Kurses

Webanwendungen mit Shiny in R entwickeln

Kurs anzeigen

Anleitung zur Übung

Starte die App und verwende oben rechts den Theme-Selector, um verschiedene Bootswatch-Themes auszuprobieren.
Füge der Seite einen passenden Titel hinzu.
Ersetze themeSelector() durch ein Theme deiner Wahl.

Interaktive Übung

Vervollständige den Beispielcode, um diese Übung erfolgreich abzuschließen.

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 bearbeiten und ausführen