Aan de slagBegin gratis

Voeg CSS toe om het uiterlijk van de app aan te passen

CSS is een enorm populaire opmaaktaal waarmee je de browser vertelt hoe elementen op een pagina moeten worden weergegeven. Je hebt CSS nodig als je wilt afwijken van de standaard look-and-feel van Shiny en het uiterlijk van onderdelen in je app wilt aanpassen.

Onthoud dat CSS bestaat uit een set regels, waarbij elke regel een property: value-paar is dat hoort bij een element op de pagina. Je kunt CSS in je app opnemen door het in een apart bestand te schrijven en te importeren met includeCSS(), maar in deze cursus gebruiken we de eenvoudigere aanpak: de CSS-code in de UI plaatsen binnen tags$style().

Deze oefening maakt deel uit van de cursus

Casestudies: webapplicaties bouwen met Shiny in R

Bekijk cursus

Oefeninstructies

  • Schrijf CSS-regels om de app als volgt aan te passen:
    • Verander de achtergrondkleur van de downloadknop in oranje (regel 5).
    • Zet de tekstgrootte van de downloadknop op 20 pixels (regel 8).
    • Verander de tekstkleur van de tabel in rood (regel 13).
  • Voeg deze CSS-regels toe aan de Shiny-app (regel 20).

Interactieve oefening met praktijkervaring

Probeer deze oefening door deze voorbeeldcode aan te vullen.

my_css <- "
#download_data {
  /* Change the background color of the download button
     to orange. */
  background: ___;

  /* Change the text size to 20 pixels. */
  font-size: ___px;
}

#table {
  /* Change the text color of the table to red. */
  color: ___;
}
"

ui <- fluidPage(
  h1("Gapminder"),
  # Add the CSS that we wrote to the Shiny app
  tags$style(___),
  tabsetPanel(
    tabPanel(
      title = "Inputs",
      sliderInput(inputId = "life", label = "Life expectancy",
                  min = 0, max = 120,
                  value = c(30, 50)),
      selectInput("continent", "Continent",
                  choices = c("All", levels(gapminder$continent))),
      downloadButton("download_data")
    ),
    tabPanel(
      title = "Plot",
      plotOutput("plot")
    ),
    tabPanel(
      title = "Table",
      DT::dataTableOutput("table")
    )
  )
)

server <- function(input, output) {
  filtered_data <- reactive({
    data <- gapminder
    data <- subset(
      data,
      lifeExp >= input$life[1] & lifeExp <= input$life[2]
    )
    if (input$continent != "All") {
      data <- subset(
        data,
        continent == input$continent
      )
    }
    data
  })
  
  output$table <- DT::renderDataTable({
    data <- filtered_data()
    data
  })

  output$download_data <- downloadHandler(
    filename = "gapminder_data.csv",
    content = function(file) {
      data <- filtered_data()
      write.csv(data, file, row.names = FALSE)
    }
  )

  output$plot <- renderPlot({
    data <- filtered_data()
    ggplot(data, aes(gdpPercap, lifeExp)) +
      geom_point() +
      scale_x_log10()
  })
}

shinyApp(ui, server)
Code bewerken en uitvoeren