senarai ionik
Senarai ialah elemen antara muka yang digunakan secara meluas yang digunakan dalam hampir semua apl mudah alih.
Senarai boleh berupa teks asas, butang, suis, ikon dan lakaran kecil, dsb.
Item senarai boleh menjadi sebarang elemen HTML. Elemen bekas memerlukan kelas senarai, dan setiap item senarai memerlukan kelas item.
ionList dan ionItem boleh menyokong pelbagai kaedah interaksi dengan mudah, seperti pengeditan gelongsor, pengisihan seret dan pemadaman item.
Penggunaan asas:
<ul class="list"> <li class="item"> ... </li> </ul>
Pemisah senarai
Kita boleh menggunakan kelas pembahagi item untuk mencipta pemisah bagi senarai, dengan lalai Di bawah, item senarai dibezakan oleh warna latar belakang yang berbeza dan keberanian fon, tetapi anda juga boleh menyesuaikannya dengan mudah.
<div class="list"> <div class="item item-divider"> Candy Bars </div> <a class="item" href="#"> Butterfinger </a> ... </div>
Senarai dengan ikon
Kami boleh menentukan ikon di sebelah kiri atau kanan item senarai.
Gunakan item-icon-left untuk menetapkan ikon ke kiri dan item-icon-kanan untuk menetapkan ikon ke kanan. Jika anda memerlukan ikon pada kedua-dua belah pihak, cuma tambahkan kedua-dua kelas.
Dalam contoh berikut, kami menggunakan teg <a> dalam item senarai untuk menjadikan setiap item senarai boleh diklik.
Apabila item senarai menggunakan elemen <a> atau <butang>, jika tiada ikon ditambahkan di sebelah kanan, anak panah ke atas akan ditambahkan secara automatik.
Dalam contoh, item pertama hanya mempunyai ikon di sebelah kiri, item kedua mempunyai ikon di kedua-dua belah, item ketiga mempunyai ikon di sebelah kanan (dan item-note), dan item keempat mempunyai elemen lencana.
<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>
Senarai Butang
Gunakan kelas butang-butang-kanan atau item-butang-kiri untuk meletakkan butang dalam item senarai.
<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>
Senarai dengan avatar
Gunakan item-avatar untuk membuat senarai dengan avatar:
<div class="list"> <a class="item item-avatar" href="#"> <img src="../style/images/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="../style/images/cover.jpg"> <h2>Pretty Hate Machine</h2> <p>Nine Inch Nails</p> </a> ... </div>
Senarai masukan (senarai masukan)
Kami boleh membenamkan senarai dalam bekas, dan senarai itu tidak akan memaparkan lebar penuh.
Gaya senarai sebaris ialah: senarai masukan senarai Perbezaan daripada senarai biasa ialah ia menetapkan margin (marign), serupa dengan tab. Senarai sebaris tidak mempunyai kesan bayangan dan kesannya akan menjadi lebih baik apabila menatal.
<div class="list list-inset"> <div class="item"> Raiders of the Lost Ark </div> ... </div>
