Latest web development tutorials

daftar ionik

Daftar adalah elemen antarmuka banyak digunakan, hampir selalu untuk digunakan dalam semua aplikasi mobile.

Daftar dapat menjadi teks dasar, tombol, switch, dan ikon thumbnail lainnya.

item daftar dapat berupa elemen HTML. elemen kontainer diperlukan daftar kelas, masing-masing item daftar diperlukan kategori barang.

ionList ionItem dan dengan mudah dapat mendukung berbagai cara interaktif, seperti mengedit slide, tarik semacam itu, dan menghapus item.

penggunaan dasar:

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

Coba »

pemisah daftar

Kita dapat menggunakan kelas item-pembagi untuk membuat daftar pemisah, secara default, daftar item dalam warna latar belakang yang berbeda dan huruf tebal untuk membedakan, tetapi Anda dapat dengan mudah menyesuaikan nya.

<div class="list">

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

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

  ...

</div>

Coba »


Dengan daftar ikon

Kita dapat menentukan ikon ke sisi kiri atau kanan dari daftar item.

Gunakan ikon item-icon-kiri di sebelah kiri, item-icon-benar ikon pengaturan di sisi kanan. Jika Anda membutuhkan kedua sisi ikon, dua kelas ditambahkan ke.

Contoh-contoh berikut, kami menggunakan label <a> dalam daftar item, sehingga masing-masing item daftar diklik.

item daftar ketika Anda menggunakan <a> atau <button> elemen, jika hak ikon tidak ditambahkan, maka akan secara otomatis ditambahkan ke panah.

Misalnya, item pertama hanya ikon di sebelah kiri, tentang ikon kedua memiliki, ada ikon ketiga di sebelah kanan (serta Catatan item-catatan), keempat memiliki lencana (mark) elemen.

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

Coba »


daftar tombol

Menggunakan item-tombol-kanan atau tombol barang tombol-kiri-dalam daftar kelas item.

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

Coba »


Dengan Avatar Daftar

Menggunakan item-avatar membuat avatar dengan daftar:

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

Coba »


Daftar thumbnail

Thumbnail item-thumbnail-kiri kelas untuk menambahkan, kelas item-thumbnail-kanan kiri-blok digunakan untuk menambah thumbnail pada keselarasan yang tepat.

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

Coba »


Tertanam daftar (list inset)

Kami dapat tertanam dalam wadah antara daftar, daftar tidak menampilkan lebar penuh.

daftar gaya inline adalah: Daftar daftar-inset, dengan daftar umum perbedaan adalah bahwa ia menetapkan margin (marign), mirip dengan tab.

daftar tertanam ada bayangan, efeknya akan lebih baik ketika bergulir.

<div class="list list-inset">

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

    ...

</div>

Coba »