ionic2
Ionic2 CSS घटक
खोज…
ग्रिड
आयोनिक की ग्रिड प्रणाली फ्लेक्सबॉक्स पर आधारित है, एक सीएसएस फीचर जो सभी उपकरणों द्वारा समर्थित है जो आयोनिक का समर्थन करता है। ग्रिड तीन इकाइयों-ग्रिड, पंक्तियों और स्तंभों से बना है। कॉलम अपनी पंक्ति को भरने के लिए विस्तारित होंगे, और अतिरिक्त कॉलम फिट करने के लिए आकार बदलेंगे।
| कक्षा | चौड़ाई |
|---|---|
| चौड़ाई-10 | 10% |
| चौड़ाई -20 | 20% |
| चौड़ाई -25 | 25% |
| चौड़ाई-33 | 33.3333% |
| चौड़ाई-50 | 50% |
| चौड़ाई-67 | 66.6666% |
| चौड़ाई -75 | 75% |
| चौड़ाई-80 | 80% |
| चौड़ाई -90 | 90% |
उदाहरण।
<ion-grid>
<ion-row>
<ion-col width-10>This column will take 10% of space</ion-col>
</ion-row>
</ion-grid>
पत्ते
कार्ड सामग्री के महत्वपूर्ण टुकड़ों को प्रदर्शित करने का एक शानदार तरीका है, और तेज़ी से ऐप्स के लिए एक कोर डिज़ाइन पैटर्न के रूप में उभर रहे हैं। वे उपयोगकर्ता को जानकारी प्रदान करने और व्यवस्थित करने का एक शानदार तरीका हैं, साथ ही उपयोगकर्ता के लिए पूर्वानुमानित अपेक्षाएं भी स्थापित करते हैं। एक साथ प्रदर्शित करने के लिए बहुत अधिक सामग्री के साथ, और अक्सर इतनी कम स्क्रीन अचल संपत्ति, कार्ड तेजी से कई कंपनियों के लिए पसंद के डिजाइन पैटर्न बन गए हैं।
उदाहरण।
<ion-card>
<ion-card-header>
Header
</ion-card-header>
<ion-card-content>
The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
</ion-card-content>
</ion-card>