قائمة الأيونية

القائمة هي عناصر واجهة المستخدم على نطاق واسع، ودائما تقريبا لاستخدامها في جميع تطبيقات الجوال.

قائمة يمكن أن يكون النص الأساسي، الأزرار والمفاتيح وغيرها من الرموز المصغرة.

يمكن أن يكون عنصر القائمة أي عنصر HTML. عناصر الحاويات اللازمة لائحة الدرجة، مطلوب كل عنصر بالقائمة فئة البند.

ionList ionItem ويمكن بسهولة دعم مجموعة متنوعة من الطرق التفاعلية، مثل تحرير الشرائح، سحب هذا النوع، وحذف البنود.

استخدام الأساسية:

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

محاولة »

فاصل القائمة

يمكننا استخدام الطبقة بند مقسم إلى خلق فاصل القائمة، افتراضيا، قائمة من العناصر في لون الخلفية مختلفة والخط الغامق للتمييز، ولكن يمكنك تخصيص له بسهولة.

<div class="list">

  <div class="item item-divider">
    Candy Bars
  </div>

  <a class="item" href="#">
    Butterfinger
  </a>

  ...

</div>

محاولة »

مع قائمة الرموز

يمكننا تحديد رمز إلى الجانب الأيسر أو الأيمن من عناصر القائمة.

استخدام رمز بند رمز اليسار في اليسار والبند رمز يمين رمز الإعدادات على الجانب الأيمن. إذا كنت بحاجة إلى جانبي رمز، تضاف فئتين على ل.

الأمثلة التالية، استخدمنا التسمية <A> في هذا البند قائمة، بحيث يكون لكل عنصر القائمة قابلة للنقر.

قائمة البند عند استخدام <A> أو <زر> العنصر، إذا لم يتم إضافة يمين الرمز، فإنه سيتم تلقائيا إضافة إلى أسهم.

سبيل المثال، فإن البند الأول الرموز فقط على اليسار، حول الرمز الثاني له، هناك رمز الثالث على اليمين (وكذلك ملاحظات بند المذكرة)، والرابع له شارة (علامة) عناصر.

<div class="list">

  <a class="item item-icon-left" href="#">
    <i class="icon ion-email"></i>
    Check mail
  </a>

  <a class="item item-icon-left item-icon-right" href="#">
    <i class="icon ion-chatbubble-working"></i>
    Call Ma
    <i class="icon ion-ios-telephone-outline"></i>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-mic-a"></i>
    Record album
    <span class="item-note">
      Grammy
    </span>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-person-stalker"></i>
    Friends
    <span class="badge badge-assertive">0</span>
  </a>

</div>

محاولة »

قائمة أزرار

استخدام البند على زر يمين أو زر البند على زر يسار على عناصر القائمة الدرجة.

<div class="list">

  <div class="item item-button-right">
    Call Ma
    <button class="button button-positive">
      <i class="icon ion-ios-telephone"></i>
    </button>
  </div>

  ...

</div>

محاولة »

مع قائمة الصور الرمزية

استخدام بند الآلهة خلق الآلهة مع القائمة:

<div class="list">

    <a class="item item-avatar" href="#">
      <img src="venkman.jpg">
      <h2>Venkman</h2>
      <p>Back off, man. I'm a scientist.</p>
    </a>

    ...

</div>

محاولة »

قائمة المصغرة

المصغرة بند المصغرات اليسرى فئة لإضافة واستخدام، والطبقة بند المصغرات اليمين باتجاه اليسار لإضافة صورة مصغرة على محاذاة اليمين.

<div class="list">

    <a class="item item-thumbnail-left" href="#">
      <img src="cover.jpg">
      <h2>Pretty Hate Machine</h2>
      <p>Nine Inch Nails</p>
    </a>

    ...

</div>

محاولة »

قائمة جزءا لا يتجزأ من (قائمة أقحم)

نحن يمكن أن تكون جزءا لا يتجزأ في حاوية ضمن القائمة، قائمة لا يعرض العرض الكامل.

مضمنة قائمة الأنماط:-أقحم القائمة، مع قائمة عامة من الفرق هو أنه يحدد الهامش (marign)، على غرار علامة التبويب.

قوائم جزءا لا يتجزأ من لم الظلال، وسوف يكون التأثير أفضل عند التمرير.

<div class="list list-inset">

    <div class="item">
      Raiders of the Lost Ark
    </div>

    ...

</div>

محاولة »