รายการไอออนิก

รายการเป็นองค์ประกอบอินเตอร์เฟซที่ใช้กันอย่างแพร่หลายเกือบตลอดเวลาที่จะใช้ในการตรวจสอบโทรศัพท์มือถือทั้งหมด

รายการอาจจะเป็นข้อความ, ปุ่มสวิทช์และไอคอนรูปขนาดย่อพื้นฐานอื่น ๆ

รายการสามารถใด ๆ องค์ประกอบ HTML องค์ประกอบที่จำเป็นคอนเทนเนอร์รายการระดับรายการแต่ละรายการจะต้องหมวดรายการ

ionList ionItem ได้อย่างง่ายดายและสามารถรองรับความหลากหลายของวิธีการโต้ตอบเช่นการแก้ไขสไลด์ลากเรียงลำดับและลบรายการ

การใช้งานพื้นฐาน:

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

ลอง»

คั่นรายการ

เราสามารถใช้ระดับรายการ divider เพื่อสร้างรายการคั่นโดยค่าเริ่มต้นรายการในสีพื้นหลังที่แตกต่างกันและอักษรตัวหนาที่จะแยกแยะ แต่คุณสามารถปรับแต่งของเขา

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

ลอง»

ที่มีรายชื่อ Avatar

ใช้รายการ Avatar สร้างสัญลักษณ์กับรายการ:

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

ลอง»