ПочатиПочніть безкоштовно

Додайте CSS, щоб змінити вигляд застосунку

CSS — це надзвичайно популярна мова стилів, яку використовують, щоб указати браузеру, як відображати елементи на сторінці. Вам знадобиться CSS, якщо ви хочете відступити від стандартного вигляду Shiny та налаштувати вигляд різних елементів вашого застосунку.

Пам'ятайте, що CSS складається з набору правил, де кожне правило — це пара властивість: значення, пов'язана з певним елементом на сторінці. Додати CSS до вашого застосунку можна, записавши його в окремий файл і підключивши через includeCSS(), але в цьому курсі ми скористаємося простішим підходом — розмістимо CSS-код усередині tags$style() в інтерфейсі користувача (UI).

Ця вправа є частиною курсу

Case Studies: створення вебзастосунків із Shiny в R

Переглянути курс

Інструкції до вправи

  • Напишіть правила CSS, щоб змінити застосунок у такий спосіб:
    • Змініть колір фону кнопки завантаження на помаранчевий (рядок 5).
    • Змініть розмір тексту на кнопці завантаження на 20 пікселів (рядок 8).
    • Змініть колір тексту таблиці на червоний (рядок 13).
  • Додайте ці правила CSS до застосунку Shiny (рядок 20).

Інтерактивна практична вправа

Спробуйте виконати цю вправу, доповнивши цей зразок коду.

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)
Редагувати та запускати код