ÎncepețiÎncepe gratuit

Adaugă CSS pentru a modifica aspectul aplicației

CSS este un limbaj de marcare extrem de popular, folosit pentru a indica browserului cum să afișeze elementele unei pagini. Ai nevoie de CSS dacă vrei să te abați de la aspectul implicit al Shiny și să personalizezi modul în care arată diferite elemente din aplicația ta.

Reține că CSS este alcătuit dintr-un set de reguli, unde fiecare regulă este o pereche proprietate: valoare asociată unui element de pe pagină. Poți include CSS în aplicație scriindu-l într-un fișier separat și importându-l cu includeCSS(), însă în acest curs vom folosi abordarea mai simplă de a plasa codul CSS în interiorul tags$style() din UI.

Acest exercițiu face parte din cursul

Studii de caz: Construirea aplicațiilor web cu Shiny în R

Vezi cursul

Instrucțiuni pentru exercițiu

  • Scrie reguli CSS pentru a modifica aplicația în următoarele moduri:
    • Schimbă culoarea de fundal a butonului de descărcare în portocaliu (linia 5).
    • Schimbă dimensiunea textului butonului de descărcare la 20 de pixeli (linia 8).
    • Schimbă culoarea textului din tabel în roșu (linia 13).
  • Adaugă aceste reguli CSS în aplicația Shiny (linia 20).

Exercițiu interactiv practic

Încearcă acest exercițiu completând acest cod de exemplu.

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)
Editează și rulează codul