CSS फ़ॉर्मैटिंग से कस्टमाइज़ेशन

shinydashboard के साथ डैशबोर्ड बनाना

Png Kee Seng

Researcher

shinydashboard को और कैसे कस्टमाइज़ करें?

  • डार्क थीम के लिए "black" skin चुनें
  • क्या हम अलग-अलग ऑब्जेक्ट्स का लुक बदल सकते हैं?
  • हाँ, cascading style sheets (CSS) कोड से
  • अब एक छोटा CSS क्रैश कोर्स
    • बारीकियों की अभी ज्यादा चिंता न करें
shinydashboard के साथ डैशबोर्ड बनाना

CSS परिचय: comments जोड़ना

  • CSS एक स्टाइलिंग भाषा है
    • हर ऑब्जेक्ट की उपस्थिति नियंत्रित करती है
  • CSS कोड चयनकर्ताओं (selectors) के हिस्सों से बनता है
    • इनके साथ properties, subproperties आदि
    • यह एक डिक्शनरी बनाता है जो हर फीचर के लुक को ट्रैक करता है
  • हम CSS कोड को एक string के रूप में सेव करेंगे
    • सिंगल क्वोट्स '...' का उपयोग करें
  • CSS कोड में comments डाले जा सकते हैं
css_code <- '
/* This is a comment */
'
shinydashboard के साथ डैशबोर्ड बनाना

CSS परिचय: selectors

  • हर chunk में एक selector होता है
    • यह किसी फीचर से संबद्ध होता है
  • .selector एक CSS class को दर्शाता है
css_code <- '
/* This is a selector */
selector {

  property1: value1;
  property2: value2;

}
`

css_code <- '
/* This is a selector class */
.selector {
  property1: value1;
  property2: value2;
}
`
shinydashboard के साथ डैशबोर्ड बनाना

CSS परिचय: selector संयोजन

  • दो selectors .class1 और .class2 को .class1 .class2 की तरह जोड़ सकते हैं
    • यानी .class1 के भीतर .class2 subclass चुनें
  • स्पेस बहुत महत्वपूर्ण है
    • नहीं तो कोड सही नहीं चलेगा
css_code <- '
.class1 .class2 {
  property1: value1;
  property2: value2;
  property3: value3;
}
`
shinydashboard के साथ डैशबोर्ड बनाना

एक ठोस उदाहरण

  • shinydashboard header में font सेटिंग बदलने के लिए
    • .main-header .logo चाहिए
    • पहले .main-header class चुनें, फिर .logo subclass देखें
  • background color को black करने के लिए
    • .skin-blue .main-header .logo चाहिए
css_code <- '
/* Format the text in the main header */
.main-header .logo {

  font-family: "Times New Roman";

  font-weight: bold;

  font-size: 24px;

}
'

css_code <- '
/* Change the background-color to black */
.skin-blue .main-header .logo {

          background-color: #000000; 
}
'
shinydashboard के साथ डैशबोर्ड बनाना

पूरा उदाहरण

  • .main-header .logo, .skin-blue .main-header .logo
    • .skin-blue .main-header .logo:hover
    • .skin-blue .main-header .navbar
  • और भी कई selector संयोजन हैं
css_code <- '
.main-header .logo {
  font-family: "helvetica",  serif, Times, "Times New Roman";
  font-weight: bold;
  font-size: 24px;
}
.skin-blue .main-header .logo {
          background-color: #000000; 
}

.skin-blue .main-header .logo:hover {
          background-color: blue; 
}

.skin-blue .main-header .navbar {
          background-color: #999999;
}
'
shinydashboard के साथ डैशबोर्ड बनाना

shinydashboard पर CSS फ़ॉर्मैटिंग लागू करना

  • CSS कोड को dashboardBody() में डालना चाहिए

CSS फ़ॉर्मैट किया हुआ shinydashboard.

body <- dashboardBody(

  tags$head(

    tags$style(

      HTML(css_code)

      )

    ),

  ...)
shinydashboard के साथ डैशबोर्ड बनाना

अभ्यास करते हैं!

shinydashboard के साथ डैशबोर्ड बनाना

Preparing Video For Download...