Latest web development tutorials

tab ionik (tab)

ionik tab (Tab) yang horizontal sejajar tombol atau link untuk menavigasi antara halaman beralih. Hal ini dapat berisi kombinasi teks dan ikon pada perangkat mobile adalah metode populer navigasi.

Gunakan tab tab kelas kontainer berikut, masing-masing tab menggunakan kelas tab-item. Secara default, tab adalah teks dan tidak ada ikon.

contoh

<div class="tabs">
  <a class="tab-item">
    主页
  </a>
  <a class="tab-item">
    收藏
  </a>
  <a class="tab-item">
    设置
  </a>
</div>

Secara default, warna tab adalah default, Anda dapat mengatur berikut gaya yang berbeda warna: tab-default, tab-light, tab-stabil, tab-positif, tab-tenang, tab-seimbang, tab-energi, tab-tegas, tab -Royal, tab-gelap.

Untuk menyembunyikan tab bar, Anda dapat menggunakan kelas tab-item-hide.

tab icon

Setelah kelas untuk menambahkan tab tab-icon-satunya kelas dapat diatur untuk hanya menampilkan ikon tab.

<div class="tabs tabs-icon-only">
  <a class="tab-item">
    <i class="icon ion-home"></i>
  </a>
  <a class="tab-item">
    <i class="icon ion-star"></i>
  </a>
  <a class="tab-item">
    <i class="icon ion-gear-a"></i>
  </a>
</div>

Top icon + tab teks

Setelah kelas untuk menambahkan tab kelas tab-icon-icon top + teks dapat diatur di bagian atas tab.

<div class="tabs tabs-icon-top">
  <a class="tab-item" href="#">
    <i class="icon ion-home"></i>
    主页
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-star"></i>
    收藏
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-gear-a"></i>
    设置
  </a>
</div>

Kiri ikon + tab teks

icon setelah kelas untuk menambahkan tab tab-icon-kiri di sisi kiri kelas dapat diatur untuk tab text +.

<div class="tabs tabs-icon-left">
  <a class="tab-item">
    <i class="icon ion-home"></i>
    主页
  </a>
  <a class="tab-item">
    <i class="icon ion-star"></i>
    收藏
  </a>
  <a class="tab-item">
    <i class="icon ion-gear-a"></i>
    设置
  </a>
</div>

tab Style bergaris

Anda dapat menambahkan pola tab-bergaris pada nama elemen dengan tab untuk mencapai tab gaya seperti Android. Anda juga dapat menambahkan tab-top untuk mencapai tab di bagian atas halaman.

Stripes tab warna dapat dikendalikan oleh tab-Latar {color} dan tab-warna-{color}, {color} nilai dapat: default, cahaya, stabil, positif, tenang, seimbang, energi, tegas, royal, atau gelap.

Catatan: Jika kepala judul pada tab lagi, Anda perlu menggunakan kelas memiliki-tab-top.

<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
    <div class="tabs">
      <a class="tab-item active" href="#">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>
  <div class="tabs-striped tabs-color-assertive">
    <div class="tabs">
      <a class="tab-item active" href="#">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>

hasil operasi adalah sebagai berikut: