Framework7 - Tab

Sự miêu tả

Tab là tập hợp các nội dung được nhóm hợp lý cho phép chúng ta nhanh chóng lật giữa chúng và tiết kiệm không gian như đàn accordion.

Bố cục tab

Đoạn mã sau xác định bố cục cho các 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>

Ở đâu -

<div class = "tabs">- Nó là một trình bao bọc bắt buộc cho tất cả các tab. Nếu chúng ta bỏ lỡ điều này, các tab sẽ không hoạt động.
<div class = "tab"> - Đây là một tab duy nhất, nên có unique id thuộc tính.
<div class = "tab active">- Đây là một tab hoạt động duy nhất, sử dụng lớp hoạt động bổ sung để làm cho tab hiển thị (hoạt động).

Chuyển đổi giữa các tab

Bạn có thể sử dụng một số bộ điều khiển trong bố cục tab để người dùng có thể chuyển đổi giữa chúng.

Đối với điều này, bạn cần tạo liên kết (thẻ <a>) với lớp liên kết tab và thuộc tính href bằng thuộc tính id của tab mục tiêu -

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

Chuyển đổi nhiều tab

Nếu bạn đang sử dụng liên kết tab đơn để chuyển đổi giữa nhiều tab, thì bạn có thể sử dụng các lớp thay vì sử dụng thuộc tính tab và dữ liệu của ID .

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

Các dữ liệu tab thuộc tính của tab-link chứa CSS selector của mục tiêu tab / tab.

Chúng ta có thể sử dụng các cách khác nhau của các tab, chúng được chỉ định trong bảng sau:

S.Không	Loại & Mô tả tab
1	Tab nội tuyến Tab nội tuyến là tập hợp các tab nội tuyến được nhóm lại cho phép bạn lật nhanh giữa chúng.
2	Chuyển tab từ thanh điều hướng Chúng tôi có thể đặt các tab trong thanh điều hướng cho phép bạn lật giữa chúng.
3	Chuyển chế độ xem từ thanh tab Tab đơn có thể được sử dụng để chuyển đổi giữa các chế độ xem với điều hướng và bố cục riêng.
4	Tab hoạt hình Bạn có thể sử dụng chuyển tiếp đơn giản (hoạt ảnh) để chuyển đổi các tab.
5	Các tab có thể vuốt Bạn có thể tạo các tab có thể vuốt bằng cách chuyển đổi đơn giản bằng cách sử dụng lớp bọc có thể vuốt cho các tab.
6	Sự kiện JavaScript tab Các sự kiện JavaScript có thể được sử dụng khi bạn đang làm việc với mã JavaScript cho các tab.
7	Hiển thị tab bằng JavaScript Bạn có thể chuyển đổi hoặc hiển thị tab bằng các phương pháp JavaScript.