Kom igångKom igång gratis

Lägg till CSS för att anpassa appens utseende

CSS är ett mycket populärt märkspråk som används för att tala om för webbläsaren hur element ska visas på en sida. Du behöver CSS om du vill avvika från Shinys standardutseende och anpassa hur olika delar av appen ser ut.

Kom ihåg att CSS består av en uppsättning regler, där varje regel är ett property: value-par kopplat till ett element på sidan. Det går att inkludera CSS i appen genom att skriva den i en separat fil och importera den med includeCSS(), men i den här kursen använder vi det enklare tillvägagångssättet att placera CSS-koden inuti tags$style() i UI:t.

Den här övningen är en del av kursen

Fallstudier: Bygg webbapplikationer med Shiny i R

Visa kurs

Övningsinstruktioner

  • Skriv CSS-regler för att ändra appen på följande sätt:
    • Ändra bakgrundsfärgen på nedladdningsknappen till orange (rad 5).
    • Ändra textstorleken på nedladdningsknappen till 20 pixlar (rad 8).
    • Ändra textfärgen i tabellen till röd (rad 13).
  • Lägg till dessa CSS-regler i Shiny-appen (rad 20).

Interaktiv övning med praktiskt arbete

Testa den här övningen genom att slutföra den här exempelkoden.

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)
Redigera och kör kod