НачатьНачать бесплатно

Добавьте CSS для настройки внешнего вида приложения

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

Напомним, что CSS состоит из набора правил, где каждое правило — это пара свойство: значение, связанная с определённым элементом страницы. CSS можно подключить к приложению, написав его в отдельном файле и импортировав с помощью includeCSS(), однако в этом курсе мы воспользуемся более простым способом: разместим CSS-код внутри tags$style() в пользовательском интерфейсе.

Это упражнение является частью курса

Примеры использования: создание веб-приложений с 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)
Редактировать и запускать код