Tabs

Cú pháp

<zmp-tabs> <zmp-tab>

Properties

Tabs

Prop	Type	Description
animated	boolean	Bật animated tabs
swipeable	boolean	Bật swipeable tabs
swiper-params	object	Object với các Swiper parameters (Áp dụng khi bật swipeable )

Tab

Prop	Type	Description
tab-active	boolean	Xác định tab hiện tại đang kich hoạt

Events

Tab

Event	Description
@tab:show	Event sẽ được triggered khi trạng thái của tab trở thành visible/active
@tab:hide	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 Methods

Có thể điều khiển tabs bằng cách sử dụng các methods trên zmp instance :

import { zmp } from 'zmp-vue';

zmp.tab.show(tabEl, animate);
// Hoặc
zmp.tab.show(tabEl, tabLinkEl, animate)

Trong đó:

• 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

Trả về object với newTabEl và oldTabEl

Ví dụ

Static Tabs

Code demo fallback when rendering server side!

Self controlled tabs

Code demo fallback when rendering server side!