แท็บอิออน (แท็บ)

แท็บอิออน (แท็บ) สอดคล้องปุ่มหรือการเชื่อมโยงเพื่อนำทางระหว่างหน้าสลับแนวนอน ซึ่งอาจมีการรวมกันของตัวอักษรและไอคอนบนอุปกรณ์มือถือเป็นวิธีที่นิยมใช้ในการเดินเรือ

ใช้ต่อไปนี้แท็บแท็บเรียนภาชนะแต่ละแท็บใช้คลาสแท็บรายการ โดยค่าเริ่มต้นแท็บเป็นตัวอักษรและไอคอน

ตัวอย่าง

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

ลอง»

โดยค่าเริ่มต้นสีแท็บเป็นค่าเริ่มต้นคุณสามารถตั้งค่ารูปแบบสีที่แตกต่างกันดังต่อไปนี้: แท็บเริ่มต้นแท็บแสงแท็บมั่นคงแท็บบวกแท็บสงบแท็บสมดุลแท็บลุ้นแท็บ-แน่วแน่แท็บ -royal แท็บมืด

เพื่อซ่อนแถบแท็บที่คุณสามารถใช้แท็บรายการซ่อนชั้น

แท็บไอคอน

เรียนหลังเลิกเรียนเพื่อเพิ่มแท็บแท็บไอคอนเท่านั้นที่สามารถตั้งค่าให้แสดงเฉพาะไอคอนแท็บ

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

ลอง»

ไอคอนด้านบนแท็บ + ข้อความ

หลังเลิกเรียนเพื่อเพิ่มแท็บแท็บไอคอนไอคอนบนชั้น + ข้อความที่สามารถตั้งค่าที่ด้านบนของแท็บ

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

ลอง»

ด้านซ้ายของไอคอน + แท็บข้อความ

ไอคอนหลังเลิกเรียนเพื่อเพิ่มแท็บแท็บไอคอนซ้ายที่ด้านซ้ายของชั้นเรียนสามารถกำหนดให้แท็บข้อความ +

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

ลอง»

แท็บสไตล์ลาย

คุณสามารถเพิ่มรูปแบบแท็บลายชื่อองค์ประกอบที่มีแท็บเพื่อให้บรรลุเป็น Android แท็บสไตล์ นอกจากนี้คุณยังสามารถเพิ่มแท็บด้านบนเพื่อให้บรรลุแท็บที่ด้านบนของหน้า

สีแท็บลายสามารถควบคุมได้โดยแท็บ-พื้นหลังสี {} และแท็บ-color- {สี}, {} สีคุ้มค่าสามารถ: ค่าเริ่มต้นแสงที่มีความเสถียรในเชิงบวกสงบสมดุลพลังงาน, การแสดงออกที่เหมาะสมรอยัลหรือ มืด

หมายเหตุ: หากหัวของชื่อบนแท็บอีกครั้งคุณจำเป็นต้องใช้ชั้นจะมีแท็บด้านบน

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

ลอง»

ผลการดำเนินงานมีดังนี้