CommencerCommencer gratuitement

Ajouter du CSS pour modifier l’apparence de l’application

CSS est un langage de balisage très populaire qui indique au navigateur comment afficher les éléments d’une page. Vous devez utiliser CSS si vous souhaitez vous écarter du style par défaut de Shiny et personnaliser l’apparence des différents éléments de votre application.

Rappelez-vous que CSS se compose d’un ensemble de règles, où chaque règle est une paire propriété: valeur associée à un élément de la page. Il est possible d’inclure du CSS dans votre application en l’écrivant dans un fichier séparé et en l’important avec includeCSS(), mais dans ce cours, nous utiliserons l’approche plus simple qui consiste à placer le code CSS dans tags$style() dans l’UI.

Cet exercice fait partie du cours

Études de cas : créer des applications web avec Shiny en R

Afficher le cours

Instructions

  • Écrivez des règles CSS pour modifier l’application de la manière suivante :
    • Changer la couleur d’arrière-plan du bouton de téléchargement en orange (ligne 5).
    • Définir la taille du texte du bouton de téléchargement à 20 pixels (ligne 8).
    • Changer la couleur du texte du tableau en rouge (ligne 13).
  • Ajoutez ces règles CSS à l’application Shiny (ligne 20).

Exercice interactif pratique

Essayez cet exercice en complétant cet exemple de code.

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)
Modifier et exécuter le code