kad ionik

Dalam beberapa tahun kebelakangan ini, penggunaan kad telah menjadi semakin popular Kad menyediakan alat untuk paparan maklumat yang lebih baik.

Untuk aplikasi mudah alih, kad akan disesuaikan dengan saiz skrin.

Kami boleh mengawal kesan paparan kad secara fleksibel dan juga mencapai kesan animasi.

Kad biasanya diletakkan di bahagian atas halaman Sudah tentu, ia juga boleh ditukar ke kiri dan ke kanan.

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

Gaya lalai kad mempunyai bayang-bayang di atas sebab prestasi, elemen serupa seperti senarai-masukkan tidak mempunyai bayang-bayang.

Jika anda mempunyai banyak kad, dan setiap kad mempunyai banyak sub-elemen, adalah disyorkan untuk menggunakan senarai inset.

Kepala dan bawah kad

Kita boleh menambah kepala dan bawah pada kad dengan menambah kelas pembahagi item:

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

Senarai kad

Gunakan kelas kad senarai untuk menetapkan senarai kad:

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

Kad dengan gambar

Gunakan gambar dalam kad, kesannya akan lebih baik, contohnya seperti berikut:

<div class="list card">

  <div class="item item-avatar">
    <img src="../style/images/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>

Kesan berjalan adalah seperti berikut:

Paparan Kad

Contoh berikut menggunakan beberapa pilihan berbeza untuk paparan kad. Mula menggunakan elemen kad senarai dan menggunakan avatar item, elemen badan item untuk memaparkan imej dan maklumat teks dan kelas pembahagi item di bahagian bawah.

<div class="list card">

  <div class="item item-avatar">
    <img src="../style/images/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>
      php中文网 -- 学的不仅是技术，更新梦想！<br>
      php中文网 -- 学的不仅是技术，更新梦想！<br>
      php中文网 -- 学的不仅是技术，更新梦想！<br>
      php中文网 -- 学的不仅是技术，更新梦想！
    </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>

Kesan operasi adalah seperti berikut: