Tabs

Cập nhật lần cuối:15/6/2026

import { Tabs } from "zmp-ui";

Dùng để tổ chức, phân loại và điều hướng giữa các nhóm nội dung đồng cấp và cùng liên quan đến một chủ đề.

Hướng dẫn sử dụng
Tiêu chuẩn thiết kế

Ví dụ

Bảng thuộc tính

Property	Type	Required	Description
children	React.ReactNode	No	Các phần tử bên trong `Tabs`, khuyến khích sử dụng các `Tab` component
items	Tab[]	No	Mảng thiết lập các tab cần được hiển thị. Sử dụng thay cho `children`.
activeKey	string	No	Key của tab đang được chọn. Cần được sử dụng kết hợp với `onChange` để cập nhật lại giá trị này khi người dùng yêu cầu chuyển đổi tab
defaultActiveKey	string	No	Key của tab mặc định được chọn khi các tab được khởi tạo. Thay đổi giá trị này sau khi đã render sẽ không có tác dụng
onChange	(activeKey: string) => void	No	Callback được gọi khi người dùng yêu cầu chuyển đổi tab. Cần cập nhật lại giá trị của `activeKey` để thay đổi tab đang được chọn nếu được truyền vào
scrollable	boolean	No	Cho phép cuộn ngang khi số lượng tab quá nhiều và không hiển thị hết trên một dòng (default: `false`)
onTabClick	(activeKey: string, e: React.KeyboardEvent \| React.MouseEvent) => void	No	Callback được gọi khi nhãn của tab được click
renderTabBar	(props: RenderTabBarProps) => React.ReactElement	No	Sử dụng để custom lại giao diện của thanh điều khiển tab, thay vì sử dụng component `TabBar` mặc định. Hàm nhận vào các thiết lập cần thiết để render thanh điều khiển tab cũng như event handler để xử lý khi người dùng yêu cầu chuyển đổi tab, và trả về một ReactElement để hiển thị đến người dùng.
bottomBar	boolean	No	Hiển thị thanh điều khiển tab ở phía dưới, thay vì ở trên đầu như mặc định (default: `false`)
destroyInactiveTabPane	boolean	No	Tự động dọn dẹp các tab không được chọn (default: `false`)

Tabs

Ví dụ

Bảng thuộc tính

Tabs

Anatomy

Usage

Ví dụ​

Bảng thuộc tính​

Tabs​

Anatomy​

Usage​

Ví dụ

Bảng thuộc tính

Tabs

Anatomy

Usage