ComenzarEmpieza gratis

Añade CSS para modificar el aspecto de la app

CSS es un lenguaje de marcado muy popular que se utiliza para indicar al navegador cómo mostrar los elementos de una página. Necesitas usar CSS si quieres apartarte del aspecto predeterminado de Shiny y personalizar la apariencia de distintos elementos de tu app.

Recuerda que CSS se compone de un conjunto de reglas, donde cada regla es un par propiedad: valor asociado a un elemento de la página. Es posible incluir CSS en tu app escribiéndolo en un archivo aparte e importándolo con includeCSS(), pero en este curso usaremos el enfoque más sencillo de colocar el código CSS dentro de tags$style() en la interfaz (UI).

Este ejercicio forma parte del curso

Casos prácticos: crea aplicaciones web con Shiny en R

Ver curso

Instrucciones del ejercicio

  • Escribe reglas CSS para modificar la app de las siguientes maneras:
    • Cambia el color de fondo del botón de descarga a naranja (línea 5).
    • Cambia el tamaño del texto del botón de descarga a 20 píxeles (línea 8).
    • Cambia el color del texto de la tabla a rojo (línea 13).
  • Añade estas reglas CSS a la app de Shiny (línea 20).

Ejercicio interactivo práctico

Prueba este ejercicio y completa el código de muestra.

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)
Editar y ejecutar código