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		unique key của tab item đang active (controlled)
defaultActiveKey	string		unique key của tab item active mặc định (uncontrolled)
fixed	boolean		Vị trí fixed phía dưới mini app
onChange	function		(activeKey: string) => void Gọi khi thay đổi tab item active thay đổi

BottomNavigation.Item

Name	Type	Default	Description	Minimum version
label	ReactNode		Label hiển thị.
icon	ReactNode		Icon phía trên label.
activeIcon	ReactNode		Thêm icon thay thế Icon mặc định (prop Icon) khi active
itemKey	string		Unique key cho từng tab item
onClick	function		Gọi khi click/press vào tab item
linkTo	string		Dùng khi sử dụng ZMPRouter và AnimationRoutes, chuyển đến trang cụ thể với hiệu ứng chuyển trang như một tab layout	1.5.1

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;