CommencezCommencez gratuitement

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

CSS est un langage de balisage extrêmement populaire qui sert à indiquer au navigateur comment afficher les éléments d'une page. Vous devez utiliser du CSS si vous souhaitez vous éloigner de l'apparence par défaut de Shiny et personnaliser la présentation de différents éléments de votre application.

Rappelez-vous que le CSS se compose d'un ensemble de règles, où chaque règle est une paire property: value associée à un élément de la page. Il est possible d'inclure du CSS dans votre application en l'écrivant dans un fichier distinct 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'interface utilisateur (UI).

Cette activité fait partie du cours

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

Voir le cours

Instructions de l’exercice

  • Rédigez des règles CSS pour modifier l'application comme suit :
    • Changez la couleur d'arrière-plan du bouton de téléversement en orange (ligne 5).
    • Changez la taille du texte du bouton de téléversement à 20 pixels (ligne 8).
    • Changez 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 ce code d’exemple.

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