Tabs

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

Bạn đang xem tài liệu zmp-ui v1.9.0. Bản mới nhất là v1.11.0. Xem bản mới nhất →

Guidelines

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

• 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

Implementation

Component giúp tổ chức và cho phép điều hướng giữa các nhóm nội dung có liên quan và ở cùng cấp độ.

Properties

Tabs

Tabs.Tab

Example

import React from "react";
import { Page, Tabs, List, Icon, Avatar } from "zmp-ui";

const alphabet = "abcdefghijklmnopqrstuvwxyz";
const users = Array.from(Array(10).keys()).map((i) => ({
  name: `Người dùng ${i}`,
  avatar: alphabet[Math.floor(Math.random() * alphabet.length)].toUpperCase(),
  online: Math.floor(Math.random() * 10) % 2 === 0,
  key: i,
}));

export default function HomePage(props) {
  return (
    
      <Tabs id="contact-list">
        <Tabs.Tab key="tab1" label="Tab 1">
          <List>
            {users.map((user) => (
              <List.Item
                key={user.key}
                prefix={<Avatar online={user.online}>{user.avatar}</Avatar>}
                title={user.name}
                subTitle="subtitle"
                suffix={}
              />
            ))}
          </List>
        </Tabs.Tab>
        <Tabs.Tab key="tab2" label="Tab 2">
          Tab 2 content
        </Tabs.Tab>
        <Tabs.Tab key="tab3" label="Tab 3">
          Tab 3 content
        </Tabs.Tab>
      </Tabs>
    
  );
}