शुरू करेंमुफ़्त में शुरू करें

ऐप के लुक को बदलने के लिए CSS जोड़ें

CSS एक बेहद लोकप्रिय मार्कअप लैंग्वेज है, जिसका उपयोग ब्राउज़र को यह बताने के लिए किया जाता है कि किसी पेज पर एलिमेंट्स कैसे दिखें. अगर आप Shiny के डिफॉल्ट लुक-एंड-फील से अलग जाना चाहते हैं और अपने ऐप में अलग-अलग आइटम्स का रूप बदलकर कस्टमाइज़ करना चाहते हैं, तो आपको CSS का उपयोग करना होगा.

याद रखिए कि CSS नियमों के सेट से बना होता है, जहाँ हर नियम पेज के किसी एलिमेंट से जुड़ा property: value पेयर होता है. आप अपने ऐप में CSS को एक अलग फाइल में लिखकर और उसे includeCSS() से इम्पोर्ट करके शामिल कर सकते हैं, लेकिन इस कोर्स में हम सरल तरीका अपनाएँगे: UI में tags$style() के अंदर सीधे CSS कोड रखना.

यह अभ्यास पाठ्यक्रम का हिस्सा है

केस स्टडीज़: R में Shiny के साथ वेब एप्लिकेशन बनाना

पाठ्यक्रम देखें

अभ्यास निर्देश

  • निम्न तरीकों से ऐप को बदलने के लिए 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)
कोड संपादित करें और चलाएँ