ionic-framework
आयनिक सीएसएस घटक

टिप्पणियों

बेसिक ग्रिड सिस्टम सिंटैक्स

मूल ग्रिड

आयोनिक में आप row को एक तत्व में सेट करके पंक्तियों की घोषणा कर सकते हैं। पंक्तियां ऐसे तत्व होंगे जो क्षैतिज रूप से गठबंधन किए जाते हैं और इस तत्व के अंदर कुछ भी होता है जो पंक्ति से संबंधित होंगे। पंक्ति के अंदर आप विभिन्न चौड़ाई के कॉलम घोषित कर सकते हैं। आपके पास निम्नलिखित घोषणाओं का एक विकल्प है।

एक पंक्ति के अंदर अधिकतम मान स्तंभ 100 हो सकते हैं। यहां मूल ग्रिड के कुछ उदाहरण दिए गए हैं।

<div class="row">
  <div class="col col-50">.col.col-50</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-75">.col.col-75</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col col-75">.col.col-75</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

ऑफसेट ग्रिड

आप col-offset-<value> भी सेट कर सकते हैं। चौड़ाई कॉलम के एक तिहाई से नीचे के उदाहरण में चौड़ाई का एक तिहाई ऑफसेट है, जिसका अर्थ है कि यह एक तिहाई चौड़ाई चौड़ा होगा और ऑफसेट होने के कारण पृष्ठ में केंद्रित होगा।

<div class="row">
  <div class="col col-33 col-offset-33">.col</div>
  <div class="col">.col</div>
</div>

कॉलम संरेखित करें

स्तंभों को लंबवत रूप से संरेखित करना संभवत: इस तरह अलग से एक कॉलम में col-<align_value> सेट करके है।

<div class="row">
  <div class="col col-top">.col</div>
  <div class="col col-center">.col</div>
  <div class="col col-bottom">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

उपरोक्त प्रत्येक कॉलम को स्वयं संरेखित करेगा। यदि आप पंक्ति के अंदर सभी कॉलम संरेखित करना चाहते हैं तो आप पंक्ति में संरेखित मान को स्वयं सेट कर सकते हैं। नीचे दिए गए उदाहरण में इस पंक्ति के अंदर के सभी कॉलम पंक्ति के केंद्र में खुद को लंबवत संरेखित करेंगे।

<div class="row row-center">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

उत्तरदायी ग्रिड

आप स्तंभों को भी उत्तरदायी बनाना चाहते हैं क्योंकि वे किसी व्यूपोर्ट की चौड़ाई पर एक-दूसरे के ऊपर ढेर हो जाएंगे। आपके पास तीन विकल्प हैं।

इस उदाहरण में ये कॉलम लगभग एक लैंडस्केप फोन की चौड़ाई के नीचे ढेर हो जाएंगे।

<div class="row responsive-sm">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

यदि आप ये ब्रेकप्वाइंट आपके लिए उपयुक्त नहीं हैं और / या आपको अधिक विशिष्ट ब्रेकप्वाइंट की आवश्यकता है, तो आप अपने स्वयं के मीडिया प्रश्नों को भी कर सकते हैं।

मूल सूची आइटम सिंटैक्स

लगभग हर एप्लिकेशन में किसी न किसी तरह की सूची होती है। Ionic के पास अपने स्वयं के तैयार-टू-गो-लिस्ट आइटम सीएसएस घोषणाएं हैं जो आपके एप्लिकेशन के अंदर सूचियों को करना आसान बनाती हैं। आप या तो एचटीएमएल तत्वों का उपयोग कर सकते हैं और उन्हें बनाने के लिए निर्देश ion-list का उपयोग कर सकते हैं। एक निर्देश का उदाहरण सबसे नीचे है।

मूल सूची आइटम CSS सिंटैक्स:

<ul class="list">
  <li class="item"></li>
</ul>

डिवाइडर के साथ सूची:

<div class="list">
  <a class="item" href="#">
    List item
  </a>
  <div class="item item-divider">
    Divider that looks a bit different from items
  </div>
  <a class="item" href="#">
    Another list item
  </a>
</div>

आइकन के साथ आइटम सूची:

<div class="list">
  <a class="item item-icon-left" href="#">
    <i class="icon ion-trash-b"></i>
    List item with a trashcan icon on the left
  </a>
</div>

आप निम्नलिखित सिंटैक्स के साथ आइटम के दोनों किनारों पर आइकन सेट कर सकते हैं:

<div class="list">
  <a class="item item-icon-left item-icon-right" href="#">
    <i class="icon ion-trash-b"></i>
    List item with a trashcan icon on the left and a briefcase icon on the right
    <i class="icon ion-briefcase"></i>
  </a>
</div>

बटन या बटन के साथ एक सूची आइटम इस तरह बनाया जा सकता है:

<div class="list">
  <div class="item item-button-right">
    Item with a button on the right that has a clock icon in it
    <button class="button button-positive">
      <i class="icon ion-clock"></i>
    </button>
  </div>
</div>

अवतार, थंबनेल और इनसेट के साथ सूची आइटम बनाना भी संभव है जो सूची आइटम के चारों ओर पैडिंग बनाएगा। Ionic भी सूची आइटम के अनुसार पैडिंग सेट करके सूची आइटम में आइकन आदि की स्थापना को संभालता है।

Ionic के पास चेकबॉक्स, रेडियो बटन आदि के लिए स्वयं के निर्देश भी हैं। यहां Ionic के साथ चेकबॉक्स सूची का एक उदाहरण दिया गया है।

<ion-list>
  <ion-checkbox ng-model="choice1">Choice 1</ion-checkbox>
  <ion-checkbox ng-model="choice2">Choice 2</ion-checkbox>
</ion-list>

उपयोगिता रंगों का मूल उपयोग

प्रीसेट आयोनिक सीएसएस में इसके लिए एक थीम और पूर्व-निर्धारित रंग होंगे। आप ionic.css या अपने कस्टम CSS फ़ाइल में मूल मानों को संशोधित या ओवरराइड कर सकते हैं। आप इन्हें SASS के साथ भी परिभाषित कर सकते हैं और IASS में SASS का उपयोग करने के लिए आपको बस अपने टर्मिनल में ionic setup sass कमांड को चलाने की आवश्यकता है।

एक बटन में रंगों का मूल उपयोग। button-<phrase> वर्ग बटन पृष्ठभूमि बना देगा और सेट थीम का रंग बदल देगा।

<button class="button button-positive">
  button-positive
</button>

<button class="button button-calm">
  button-calm
</button>

<button class="button button-balanced">
  button-balanced
</button>

आपके सीएसएस उपसर्ग विकल्प निम्नलिखित हैं:

• <element>-light

• <element>-stable

• <element>-positive

• <element>-calm

• <element>-balanced

• <element>-energized

• <element>-assertive

• <element>-royal

• <element>-dark

इन वर्गों को बैज आदि में भी उदाहरण के लिए जोड़ा जा सकता है। यहाँ एक बैज का उदाहरण दिया गया है:

<span class="badge badge-positive">Positive badge</span>