Framework7 - Tab

Deskripsi

Tab adalah sekumpulan konten yang dikelompokkan secara logis yang memungkinkan kita beralih dengan cepat di antara tab dan menghemat ruang seperti akordeon.

Tata Letak Tab

Kode berikut mendefinisikan tata letak untuk tab -

<!-- Tabs wrapper, shoud have "tabs" class.It is a required element -->
<div class = "tabs">
   <!-- The tab, should have "tab" class and unique id attribute -->
   
   <!-- The tab is active by default - "active" class -->
   <div class = "tab active" id = "tab1">
      ...  The content for Tab 1 goes here ...
   </div>
   
   <!-- The second tab, should have "tab" class and unique id attribute -->
   <div class = "tab" id = "tab2">
      ... The content for Tab 2 goes here ...
   </div>
</div>

Dimana -

<div class = "tabs">- Ini adalah pembungkus wajib untuk semua tab. Jika kami melewatkan ini, tab tidak akan berfungsi sama sekali.
<div class = "tab"> - Ini adalah satu tab, yang seharusnya unique id atribut.
<div class = "tab active">- Ini adalah satu tab aktif, yang menggunakan kelas aktif tambahan untuk membuat tab terlihat (aktif).

Beralih Antar Tab

Anda dapat menggunakan beberapa pengontrol dalam tata letak tab, sehingga pengguna dapat beralih di antaranya.

Untuk ini, Anda perlu membuat tautan (tag <a>) dengan kelas tab-link dan atribut href sama dengan atribut id dari tab target -

<!-- Here the link is used to activates 1st tab, has the same href attribute (#tab1) as the id attribute of 1st tab (tab1)  -->
<a href = "#tab1" class = "tab-link active">Tab 1</a>

<!-- Here the link is used to activates 2st tab, has the same href attribute (#tab2) as the id attribute of 2st tab (tab2)  -->
<a href = "#tab2" class = "tab-link">Tab 2</a>

<a href = "#tab3" class = "tab-link">Tab 3</a>

Beralih Beberapa Tab

Jika Anda menggunakan tautan tab tunggal untuk beralih di antara banyak tab, Anda dapat menggunakan kelas daripada menggunakan atribut ID dan tab data .

<!-- For Top Tabs  -->
<div class = "tabs tabs-top">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Bottom Tabs -->
<div class = "tabs tabs-bottom">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Tabs links -->
<div class = "tab-links">
   <!-- Links are switch top and bottom tabs to .tab1 -->
   <a href = "#" class = "tab-link" data-tab = ".tab1">Tab 1</a>
   <!-- Links are switch top and bottom tabs to .tab2 -->
   <a href = "#" class = "tab-link" data-tab = ".tab2">Tab 2</a>
   <!-- Links are switch top and bottom tabs to .tab3 -->
   <a href = "#" class = "tab-link" data-tab = ".tab3">Tab 3</a>
</div>

The Data-tab atribut tab-link berisi CSS pemilih dari tab Target / tab.

Kita dapat menggunakan berbagai cara tab, ini ditentukan dalam tabel berikut -

S.No	Jenis & Deskripsi Tab
1	Tab Sebaris Tab sebaris adalah kumpulan yang dikelompokkan sejajar yang memungkinkan Anda beralih di antara tab tersebut dengan cepat.
2	Beralih Tab Dari Navbar Kami dapat menempatkan tab di bilah navigasi yang memungkinkan Anda beralih di antara mereka.
3	Beralih Tampilan Dari Tab Bar Tab tunggal dapat digunakan untuk beralih di antara tampilan dengan navigasi dan tata letaknya sendiri.
4	Tab Animasi Anda dapat menggunakan transisi sederhana (animasi) untuk berpindah tab.
5	Tab yang Dapat Digesek Anda dapat membuat tab yang dapat digeser dengan transisi sederhana menggunakan kelas tab-swipeable-wrap untuk tab tersebut.
6	Tab Acara JavaScript Peristiwa JavaScript dapat digunakan saat Anda bekerja dengan kode JavaScript untuk tab.
7	Tampilkan Tab Menggunakan JavaScript Anda dapat beralih atau menampilkan tab menggunakan metode JavaScript.