Tabs

Cập nhật lần cuối: 27/05/2022

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

Name	Type	Default	Description
activeKey	string		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
bottomBar	boolean	false	Hiển thị thanh điều khiển tab ở phía dưới, thay vì ở trên đầu như mặc định
defaultActiveKey	string		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
destroyInactiveTabPane	boolean	false	Tự động dọn dẹp các tab không được chọn
items	Tab[]		Mảng thiết lập các tab cần được hiển thị. Sử dụng thay cho children.
renderTabBar	(props: RenderTabBarProps) => React.ReactElement		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.
scrollable	boolean	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
onChange	(activeKey: string) => void		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
onTabClick	(activeKey: string, e: React.KeyboardEvent | React.MouseEvent) => void		Callback được gọi khi nhãn của tab được click

Tabs.Tab

Name	Type	Default	Description
active	boolean	false	Trạng thái được chọn của tab
destroyInactiveTabPane	boolean	false	Tự động dọn dẹp các tab không được chọn
disabled	boolean	false	Trạng thái vô hiệu hóa của tab, người dùng sẽ không thể chuyển đổi sang tab này
label	React.ReactNode		Nhãn của tab, dùng để chuyển đổi giữa các tab
tabKey	string		Key định danh của tab

Example

Open Sandbox

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 (
    <Page className="section-container">
      <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={<Icon icon="zi-call" />}
              />
            ))}
          </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>
    </Page>
  );
}