LoslegenKostenlos loslegen

Füge CSS hinzu, um das Aussehen der App anzupassen

CSS ist eine äußerst verbreitete Auszeichnungssprache, mit der dem Browser mitgeteilt wird, wie Elemente auf einer Seite dargestellt werden sollen. Du brauchst CSS, wenn du vom Standard-Look-and-Feel von Shiny abweichen und das Erscheinungsbild verschiedener Elemente in deiner App anpassen möchtest.

Zur Erinnerung: CSS besteht aus einer Reihe von Regeln, bei denen jede Regel ein property: value-Paar ist, das einem Element auf der Seite zugeordnet ist. Es ist möglich, CSS in deiner App zu verwenden, indem du es in eine separate Datei schreibst und mit includeCSS() importierst. In diesem Kurs verwenden wir jedoch den einfacheren Ansatz und platzieren den CSS-Code in der UI innerhalb von tags$style().

Diese Übung ist Teil des Kurses

Fallstudien: Webanwendungen mit Shiny in R erstellen

Kurs anzeigen

Anleitung zur Übung

  • Schreibe CSS-Regeln, um die App wie folgt zu ändern:
    • Ändere die Hintergrundfarbe des Download-Buttons auf Orange (Zeile 5).
    • Ändere die Textgröße des Download-Buttons auf 20 Pixel (Zeile 8).
    • Ändere die Textfarbe der Tabelle auf Rot (Zeile 13).
  • Füge diese CSS-Regeln in die Shiny-App ein (Zeile 20).

Interaktive Übung

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

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