รูปแบบและกล่องใส่ไอออนิก

รายการระดับนี้ยังสามารถใช้องค์ประกอบการป้อนข้อมูล รายการป้อนข้อมูลและหมวดรายการระบุกล่องข้อความและฉลาก

คุณสมบัติกล่องใส่: ตัวยึด

ตัวอย่างต่อไปนี้เริ่มต้นคือ 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>

ลอง»

แท็บซ้อนกัน

Stacking กล่องใส่ฉลากมักจะอยู่บนหัว ตัวเลือกแต่ละคนจะใช้การกำหนดระดับรายการซ้อนป้าย กล่องใส่แต่ละเพื่อระบุการป้อนข้อมูลฉลาก ตัวอย่างต่อไปนี้ยังใช้ในการตั้งค่าตัวยึดพรอมต์การป้อนข้อมูลแอตทริบิวต์

<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>

ลอง»

ลอยฉลาก

ป้ายลอยคล้ายกัน stack ฉลาก แต่ฉลากมีผลต่อการเคลื่อนไหวลอยสำหรับตัวเลือกที่คุณจำเป็นต้องระบุหมวดรายการลอยป้ายป้อนฉลากคุณจะต้องระบุการป้อนข้อมูลฉลากแต่ละ

<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% แต่เราสามารถใช้บัตรรายการระดับรายการสิ่งที่ใส่เข้าไปหรือตั้ง padding ฟอร์ม (ขยาย) ประเภทบัตรกับเงา

<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>

ลอง»

มีไอคอนกล่องใส่

กล่องใส่รายการป้อนข้อมูลได้ง่ายมากที่จะเพิ่มไอคอน ไอคอนใน <input> ก่อนที่จะเพิ่ม

<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>

ลอง»