Tabs
Bao gồm các components:
- Tabs
- Tab
Tabs Properties
<Tabs/> properties
| Prop | Type | Description |
|---|---|---|
| animated | boolean | Bật animated tabs |
| swipeable | boolean | Bật swipeable tabs |
| swiperParams | object | Object với các Swiper parameters (Áp dụng khi bật swipeable ) |
<Tab/> properties
| Prop | Type | Description |
|---|---|---|
| tabActive | boolean | Xác định tab hiện tại đang kich hoạt |
| id | string | Tab ID |
Tabs Methods
| <Tab/> methods |
| ---------------- | -------- |
| .show(animate) | Hiện tab |
Tab Events
| Event | Prop | Description |
|---|---|---|
| tabShow | onTabShow | Event sẽ được triggered khi trạng thái của tab trở thành visible/active |
| tabHide | onTabHide | Event sẽ được triggered khi trạng thái của tab trở thành invisible/inactive |
Chuyển đổi Tabs
Có thể huyên điều khiển tabs bằng các cách:
- Bằng cách click lê Button hoặc Link chỉ định ID của tab bằng cách sử dụng tabLink prop
- Sử dụng các Tabs API
Tabs App Methods
Có thể điều khiển tabs bằng cách sử dụng các app methods:
import { zmp } from 'zmp-framework/react';
zmp.tab.show(tabEl, animate)
-
tabEl - HTMLElement hoặc string (CSS Selector) của tab cần hiện. (Bắt buộc)
-
animate - boolean - Xác định tab xuất hiện với animation hay không (trường hợp bật animated hoặc swipeable). Không bắt buộc
-
Method trả về object với newTabEl và oldTabEl zmp.tab.show(tabEl, tabLinkEl, animate)
-
tabEl - HTMLElement hoặc string (CSS Selector) của tab cần hiện. (Bắt buộc)
-
tabLinkEl - HTMLElement hoặc string (CSS Selector) của Tab link/button sẽ chuyển trạng thái thành activated đi với tab này.
-
animate - boolean - Xác định tab xuất hiện với animation hay không (trường hợp bật animated hoặc swipeable). Không bắt buộc
-
Method trả về object với newTabEl và oldTabEl Routable Tabs