implementation

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

BottomNavigation tạo giao diện nằm phía dưới giao diện ứng dụng, giúp dễ dàng điều hướng sang các trang khác

Properties

BottomNavigation

Name	Type	Default	Description
activeKey	string		Được sử dụng để chỉ định tab nào đang được chọn để hiển thị nội dung tương ứng (active tab). Cần được sử dụng cùng với onChange để cập nhật lại giá trị.
defaultActiveKey	string		Được sử dụng để chỉ định tab nào sẽ được chọn mặc định khi component được hiển thị. Lưu ý: Thay đổi defaultActiveKey khi component đã được render sẽ không có tác dụng.
fixed	boolean	false	Giữ BottomNavigation cố định ở phía dưới của ứng dụng và không scroll theo nội dung.
zIndex	number		Được sử dụng để xác định thứ tự hiển thị (z-index) của component BottomNavigation so với các thành phần khác có thể overlay trên ứng dụng.
onChange	(activeKey: string) => void		Được sử dụng để xử lý sự kiện khi tab được chọn thay đổi. Cần phải cập nhật lại giá trị của activeKey nếu được truyền vào.

BottomNavigation.Item

Name	Type	Default	Description
activeIcon	ReactNode		Icon được hiển thị khi tab item được active. Thuộc tính này sẽ ghi đè thuộc tính icon, hoặc nếu không được truyền thì icon sẽ được sử dụng.
icon	ReactNode		Icon được hiển thị phía trên label.
itemKey	string		Key định danh của tab item, mỗi tab trong cùng một BottomNavigation phải có một key khác nhau.
label	ReactNode		Nội dung chữ của tab item.
linkTo	string		Đường dẫn đến trang được kích hoạt khi tab item được click. Chỉ sử dụng khi sử dụng với ZMPRouter và AnimationRoutes.
onClick	(e: React.MouseEvent | React.KeyboardEvent) => void		Callback được gọi khi tab item được click / press.

Example

Open Sandbox

import React, { useState } from "react";
import { BottomNavigation, Icon, Page } from "zmp-ui";

const BottomNavigationPage = (props) => {
  const [activeTab, setActiveTab] = useState("chat");
  const { title } = props;
  return (
    <Page className="page">
      <BottomNavigation
        fixed
        activeKey={activeTab}
        onChange={(key) => setActiveTab(key)}
      >
        <BottomNavigation.Item
          key="chat"
          label="Tin Nhắn"
          icon={<Icon icon="zi-chat" />}
          activeIcon={<Icon icon="zi-chat-solid" />}
        />
        <BottomNavigation.Item
          label="Danh bạ"
          key="contact"
          icon={<Icon icon="zi-call" />}
          activeIcon={<Icon icon="zi-call-solid" />}
        />
        <BottomNavigation.Item
          label="Khám phá"
          key="discovery"
          icon={<Icon icon="zi-more-grid" />}
          activeIcon={<Icon icon="zi-more-grid-solid" />}
        />
        <BottomNavigation.Item
          key="timeline"
          label="Nhật ký"
          icon={<Icon icon="zi-clock-1" />}
          activeIcon={<Icon icon="zi-clock-1-solid" />}
        />
        <BottomNavigation.Item
          key="me"
          label="Cá nhân"
          icon={<Icon icon="zi-user" />}
          activeIcon={<Icon icon="zi-user-solid" />}
        />
      </BottomNavigation>
    </Page>
  );
};

export default BottomNavigationPage;