kartu ionik

Dalam beberapa tahun terakhir, kartu (card) menjadi lebih populer, kartu menyediakan alat untuk lebih mengatur informasi yang disajikan.

Berdasarkan ukuran ukuran layar untuk kartu aplikasi terminal mobile adaptif.

Kami bisa sangat fleksibel kartu tampilan control, efek bahkan animasi.

kartu umum di atas halaman, tentu saja, dapat mencapai sekitar beralih fungsi.

<div class="card">
  <div class="item item-text-wrap">
    基本卡片，包含了文本信息。
  </div>
</div>

Coba »

Kartu (card) gaya default dengan box-shadow (bayangan), untuk alasan kinerja, dan elemen lain yang serupa seperti daftar daftar-inset dan tanpa bayangan.

Jika Anda memiliki banyak kartu, setiap kartu memiliki banyak sub-elemen, kami sarankan menggunakan daftar tertanam (daftar inset).

Kepala dan bagian bawah kartu

Kita dapat menambahkan item-pembagi menambahkan kelas ke kepala dan kartu bawah:

<div class="card">
  <div class="item item-divider">
    卡片头部！
  </div>
  <div class="item item-text-wrap">
    基本卡片，包含了文本信息。
  </div>
  <div class="item item-divider">
    卡片底部！
  </div>
</div>

Coba »

Daftar kartu

Menggunakan kelas daftar kartu untuk mengatur daftar kartu:

<div class="list card">

  <a href="#" class="item item-icon-left">
    <i class="icon ion-home"></i>
    Enter home address
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-ios-telephone"></i>
    Enter phone number
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-wifi"></i>
    Enter wireless password
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-card"></i>
    Enter card information
  </a>

</div>

Coba »

Kartu dengan gambar

Penggunaan gambar kartu, efeknya akan lebih baik, contoh adalah sebagai berikut:

<div class="list card">

  <div class="item item-avatar">
    <img src="avatar.jpg">
    <h2>Pretty Hate Machine</h2>
    <p>Nine Inch Nails</p>
  </div>

  <div class="item item-image">
    <img src="cover.jpg">
  </div>

  <a class="item item-icon-left assertive" href="#">
    <i class="icon ion-music-note"></i>
    Start listening
  </a>

</div>

Coba »

hasil operasi adalah sebagai berikut:

kartu acara

Contoh berikut menggunakan beberapa pilihan yang berbeda mode tampilan kartu. Ini dimulai dengan elemen daftar kartu, dan penggunaan item-avatar, elemen item-tubuh digunakan untuk menampilkan gambar dan teks, menggunakan item-divider di bagian bawah kelas.

<div class="list card">

  <div class="item item-avatar">
    <img src="mcfly.jpg">
    <h2>Marty McFly</h2>
    <p>November 05, 1955</p>
  </div>

  <div class="item item-body">
    <img class="full-image" src="delorean.jpg">
    <p>
      本教程 -- 学的不仅是技术，更是梦想！<br>
      本教程 -- 学的不仅是技术，更是梦想！<br>
      本教程 -- 学的不仅是技术，更是梦想！<br>
      本教程 -- 学的不仅是技术，更是梦想！
    </p>
    <p>
      <a href="#" class="subdued">1 喜欢</a>
      <a href="#" class="subdued">5 评论</a>
    </p>
  </div>

  <div class="item tabs tabs-secondary tabs-icon-left">
    <a class="tab-item" href="#">
      <i class="icon ion-thumbsup"></i>
      喜欢
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-chatbox"></i>
      Comment
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-share"></i>
      分享
    </a>
  </div>

</div>

Coba »

hasil operasi adalah sebagai berikut: