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
items	Array		Mảng các tab cần hiển thị
activeKey	string		Chỉ định tab ở trạng thái active
defaultActiveKey	string		Chỉ định tab ở trạng thái active khi component được khởi tạo
scrollable	boolean		Chế độ scroll của tab
onChange	function		Thêm event handler khi tab thay đôi
onTabClick	function		Thêm event handler khi tab được click
renderTabBar	RenderTabBar		Custom tab bar
bottomBar	boolean		Hiển thị bottom bar
destroyInactiveTabPane	boolean		Destroy các tab có trạng thái inactive

Tabs.Tab

Name	Type	Default	Description
label	ReactNode		Label hiển thị của tab.
destroyInactiveTabPane	boolean		Destroy khi tab có trạng thái inactive
tabKey	string		Key của tab
active	boolean		Trạng thái active 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>
  );
}