MulaiMulai sekarang secara gratis

Tambahkan CSS untuk memodifikasi tampilan aplikasi

CSS adalah bahasa markup yang sangat populer untuk memberi tahu peramban cara menampilkan elemen pada halaman. Anda perlu menggunakan CSS jika ingin menyimpang dari tampilan baku Shiny dan menyesuaikan tampilan berbagai item di aplikasi Anda.

Ingat bahwa CSS terdiri dari sekumpulan aturan, di mana setiap aturan adalah pasangan property: value yang dikaitkan dengan sebuah elemen pada halaman. Anda dapat menyertakan CSS dalam aplikasi dengan menuliskannya di berkas terpisah dan mengimpornya dengan includeCSS(), tetapi dalam kursus ini kita akan menggunakan pendekatan yang lebih sederhana, yaitu menempatkan kode CSS di dalam tags$style() pada UI.

Latihan ini adalah bagian dari kursus

Studi Kasus: Membangun Aplikasi Web dengan Shiny di R

Lihat Kursus

Petunjuk latihan

  • Tulis aturan CSS untuk memodifikasi aplikasi sebagai berikut:
    • Ubah warna latar belakang tombol unduh menjadi oranye (baris 5).
    • Ubah ukuran teks tombol unduh menjadi 20 piksel (baris 8).
    • Ubah warna teks tabel menjadi merah (baris 13).
  • Tambahkan aturan CSS ini ke aplikasi Shiny (baris 20).

Latihan interaktif praktis

Cobalah latihan ini dengan menyelesaikan kode contoh berikut.

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)
Edit dan Jalankan Kode