BaşlayınÜcretsiz Başlayın

Uygulamanın görünümünü değiştirmek için CSS ekle

CSS, bir sayfadaki öğelerin tarayıcıda nasıl görüntüleneceğini söylemek için kullanılan son derece popüler bir biçimlendirme dilidir. Shiny’nin varsayılan görünümünden sapmak ve uygulamandaki farklı öğelerin görünümünü özelleştirmek istiyorsan CSS kullanman gerekir.

CSS’in, sayfadaki bir öğeyle ilişkili özellik: değer çiftlerinden oluşan bir dizi kuraldan oluştuğunu unutma. CSS’i uygulamana ayrı bir dosyaya yazarak ve includeCSS() ile içe aktararak eklemek mümkündür; ancak bu kursta, CSS kodunu UI içinde tags$style() içine yerleştirme gibi daha basit bir yaklaşımı kullanacağız.

Bu egzersiz

Vaka Çalışmaları: R ile Shiny Kullanarak Web Uygulamaları Geliştirme

kursunun bir parçasıdır
Kursu Görüntüle

Egzersiz talimatları

  • Aşağıdaki yollarla uygulamayı değiştirmek için CSS kuralları yaz:
    • İndirme düğmesinin arka plan rengini turuncuya çevir (satır 5).
    • İndirme düğmesinin metin boyutunu 20 piksel yap (satır 8).
    • Tablonun metin rengini kırmızıya çevir (satır 13).
  • Bu CSS kurallarını Shiny uygulamasına ekle (satır 20).

Uygulamalı interaktif egzersiz

Bu örnek kodu tamamlayarak bu egzersizi bitirin.

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)
Kodu Düzenle ve Çalıştır