أشكال وصندوق الإدخال الأيونية

ويمكن أيضا لائحة الدرجة أن تستخدم عناصر الإدخال. يحدد البند المدخلات وفئة البند مربع النص والتسمية لها.

خصائص مربع الإدخال: نائب

في المثال التالي، الافتراضي هو 100٪ من العرض (اليسار واليمين دون حدود)، وباستخدام رسالة مدخلات مجموعة السمة نائب الحقل القيمة المتوقعة.

<div class="list">
  <label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input">
    <textarea placeholder="Comments"></textarea>
  </label>
</div>

محاولة »

خصائص مربع الإدخال: التسمية

استخدام المدخلات التسمية التسمية وضعها على يسار المدخل مربع الإدخال.

<div class="list">
  <label class="item item-input">
    <span class="input-label">用户名：</span>
    <input type="text">
  </label>
  <label class="item item-input">
    <span class="input-label">密码：</span>
    <input type="password">
  </label>
</div>

محاولة »

علامات التبويب مكدسة

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

<div class="list">
  <label class="item item-input item-stacked-label">
    <span class="input-label">First Name</span>
    <input type="text" placeholder="John">
  </label>
  <label class="item item-input item-stacked-label">
    <span class="input-label">Last Name</span>
    <input type="text" placeholder="Suhr">
  </label>
  <label class="item item-input item-stacked-label">
    <span class="input-label">Email</span>
    <input type="text" placeholder="[email protected]">
  </label>
</div>

محاولة »

تسمية عائمة

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

<div class="list">
  <label class="item item-input item-floating-label">
    <span class="input-label">First Name</span>
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input item-floating-label">
    <span class="input-label">Last Name</span>
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input item-floating-label">
    <span class="input-label">Email</span>
    <input type="text" placeholder="Email">
  </label>
</div>

محاولة »

نموذج جزءا لا يتجزأ من

افتراضيا، كل عرض حقل إدخال 100٪، ولكن يمكننا استخدام قائمة قائمة أقحم بطاقة فئة أو مجموعة الحشو النموذج (الحشو)، نوع البطاقة مع الظلال.

<div class="list list-inset">
  <label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
</div>

محاولة »

حقل إدخال مضمنة

استخدام قائمة أقحم مجموعة مضمنة قائمة الكيان. استخدام-أقحم مدخلات البند أساليب يمكن تضمين زر.

<div class="list">

  <div class="item item-input-inset">
    <label class="item-input-wrapper">
      <input type="text" placeholder="Email">
    </label>
    <button class="button button-small">
      Submit
    </button>
  </div>

</div>

محاولة »

مع رمز مربع الإدخال

مربع إدخال عنصر المدخلات يمكن أن تكون بسيطة جدا لإضافة الرموز. الرمز في <إدخال> قبل أن يضيف.

<div class="list list-inset">
  <label class="item item-input">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="text" placeholder="Search">
  </label>
</div>

محاولة »

رئيس مربع الإدخال

مربع الإدخال يمكن وضعها في الرأس، ويمكن إضافة أو إلغاء زر الإرسال.

<div class="bar bar-header item-input-inset">
  <label class="item-input-wrapper">
    <i class="icon ion-ios-search placeholder-icon"></i>
    <input type="search" placeholder="搜索">
  </label>
  <button class="button button-clear">
    取消
  </button>
</div>

محاولة »