Dash में Advanced CSS

Dash और Plotly के साथ डैशबोर्ड बनाना

Alex Scriven

Data Scientist

ऑब्जेक्ट्स के बीच स्पेसिंग के लिए CSS

'Box Model' हर HTML एलिमेंट को परतों वाले बॉक्स की तरह मानता है:

ऑब्जेक्ट की सामग्री (height और width प्रॉपर्टी)
Padding (सामग्री के बाहर)
Border (padding और margin के बीच)
Margin (border के बाहर, एलिमेंट्स के बीच अंतर)

सबसे छोटे से सबसे बड़े तक एक-दूसरे के अंदर चार आयतें. सबसे छोटे पर content लिखा है, उसके बाहर padding, फिर border, और सबसे बाहर margin.

Border जोड़ना

border CSS आर्ग्युमेंट तीन हिस्से लेता है:

'border':'A B C'
- A = पिक्सेल में मोटाई
- B = स्टाइल (जैसे solid या dotted)
- C = रंग (जैसे red)

हमारे ऐप में बॉर्डर

dcc.Graph(figure=ecom_bar, 
 style={'width':'500px', 
        'height':'450px',
        'border':'5px dotted red'}
         )

शीर्षक "Top Sales Categories". इसके नीचे, लाल डॉटेड बॉर्डर के अंदर, y-अक्ष पर minor purchase categories और x-अक्ष पर total orders के साथ एक क्षैतिज बार चार्ट. बॉर्डर के बाहर नीचे शीर्ष दो श्रेणियों की सूची.

CSS स्पेसिंग

किसी HTML एलिमेंट की स्पेसिंग सेट करने के लिए:

हर प्रॉपर्टी (Padding और Margin) के लिए चार नंबर दें
- क्रम होगा ऊपर, दाएँ, नीचे, बाएँ (clockwise)
वैकल्पिक: एक नंबर (सभी तरफ लागू)
वैकल्पिक: दो नंबर (ऊपर-नीचे और बाएँ-दाएँ)

उदा., 'padding':'10px 5px 5px 15px'

बॉक्स-मॉडल का चित्र, जिसमें padding लेयर के हर किनारे पर नंबर हैं. ऊपर से clockwise: 10, 5, 5, 10.

Dash में padding जोड़ना

कोई padding नहीं:

पहला ही बॉर्डर वाला चित्र. शीर्षक "Top Sales Categories". इसके नीचे, लाल डॉटेड बॉर्डर के अंदर क्षैतिज बार चार्ट. बॉर्डर के बाहर नीचे शीर्ष दो श्रेणियों की सूची.

'padding':'100px' जोड़ना:

बाएँ वाले चित्र जैसा, लेकिन बॉर्डर हर तरफ बाहर धकेला गया है, तीर इस बदलाव को दिखाते हैं. ग्राफ, शीर्षक और नीचे का टेक्स्ट बॉर्डर से दूर हुए हैं.

Dash में margin जोड़ना

कोई margin नहीं:

margin: 100px auto जोड़ना:

पिछली स्लाइड के दाएँ चित्र जैसा, तीर अतिरिक्त स्पेस दिखाते हैं. यह स्पेस बॉर्डर के बाहर है. शीर्षक और नीचे का टेक्स्ट बाहर धकेले गए हैं, पर बॉर्डर और ग्राफ के बीच की दूरी समान है.

auto margin से सेंटर करना

इसके साथ: 'margin':'100px'

पहला ही बॉर्डर वाला चित्र, पर ज़ूम-आउट. बीच का ग्राफ बाएँ-संरेखित है, इसलिए वह शीर्षक के नीचे केंद्र में नहीं है. शीर्षक "Top Sales Categories"; लाल डॉटेड बॉर्डर के अंदर क्षैतिज बार चार्ट; नीचे बाहर सूची.

इसके साथ: 'margin':'100px auto'

वही चित्र, अब ग्राफ शीर्षक के नीचे और नीचे के टेक्स्ट के ऊपर केंद्र-संरेखित है. शीर्षक "Top Sales Categories"; लाल डॉटेड बॉर्डर के अंदर क्षैतिज बार चार्ट; नीचे बाहर सूची.

लेआउट के लिए CSS

एलिमेंट्स align नहीं हो रहे? HTML एलिमेंट्स 'inline' या 'block' हो सकते हैं.

Inline एक ही लाइन में दिखते हैं
- height/width (या box) प्रॉपर्टी नहीं होती
- उदाहरण: <strong>, <a>, <img>
Block लाइन ब्रेक के साथ ऊपर-नीचे स्टैक होते हैं
- साथ-साथ एक से अधिक नहीं रख सकते
- उदाहरण: <h1>, <div>
एक inline-block भी होता है
- height/width/box प्रॉपर्टी सेट कर सकते हैं
- साथ-साथ रख सकते हैं

Inline-block एलिमेंट्स

<div style='width:50px;height:50px;
     background-color:blue'></div>
<div style='width:50px;height:50px;
     background-color:red
     ;display:inline-block'></div>
<div style='width:50px;height:50px;
     background-color:green;
     display:inline-block'></div>

तीन छोटे रंगीन बॉक्स L-आकार में. ऊपर नीला बॉक्स, उसके नीचे लाल बॉक्स, और लाल के दाईं ओर हरा बॉक्स.

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

Dash और Plotly के साथ डैशबोर्ड बनाना