---
sourceType: official-guide
sourceTypeMatchedRule: fallback
slug: MA/zaui/layout/Tabs
title: Tabs
---
```ts
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

## Ví dụ



## Bảng thuộc tính


| Tên | Type | Required | Default | Mô tả |
| --- | --- | --- | --- | --- |
| 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 | false | 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 |
| 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 | false | Hiển thị thanh điều khiển tab ở phía dưới, thay vì ở trên đầu như mặc định |
| destroyInactiveTabPane | boolean | No | false | Tự động dọn dẹp các tab không được chọn |

### Tiêu chuẩn thiết kế

{/* inline-mdx: ../specs/Tabs.mdx (from .sources/zmp-docs/zaui-react_versioned_docs/version-1.11.0/layout/Tabs.mdx) */}

#### Tabs

Tab giúp 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ủ đề.

##### Anatomy


![Anatomy](/assets/MA/img/zaui/tabs/anatomy.png)

1. Container
   - Required
2. Active Tab Item
   - Required
3. Inactive Tab Item
   - Required
4. Divider
   - Required


---

##### Usage

- Sử dụng khi:
- Số lượng tab item từ 2 trở lên
- Số lượng tab item cố định tại thời điểm user sử dụng feature, không bị ảnh hưởng bởi bất kì input nào của user
- Lượng content của từng tab item ngắn gọn


![Usage](/assets/MA/img/zaui/tabs/usage.png)


{/* inline-mdx: end ../specs/Tabs.mdx */}