BottomNavigation

Cập nhật lần cuối: 23/6/2025

import { BottomNavigation } from "zmp-ui";

Dùng để hiển thị thanh điều hướng cố định ở phía dưới màn hình. Giúp người dùng dễ dàng điều hướng sang các trang khác.

Hướng dẫn sử dụng

Ví dụ

Bảng thuộc tính

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ị.
children	ReactNode
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.

Tiêu chuẩn thiết kế

BottomNavigation

Bottom Navigation giúp di chuyển giữa các primary content trong một ứng dụng

---

Usage

Giúp điều hướng đến các primary content của ứng dụng

• Sẽ sở hữu từ 4-6 mục
• Icon và label trên mỗi mục thể hiện primary content

---

Behavior

• Luôn mở mục đầu tiên khi ứng dụng bắt đầu hoạt động Mỗi lần sẽ chỉ mở 1 mục
• Bottom Navigation hoạt động giống nhau trên cả Android và iOS, thay vì sử dụng behavior mặc định của nền tảng. Khi chuyển đến một primary content thì sẽ hướng đến vị trí mà trước đó đã được tương tác bởi user. Nếu user trước đó đã tương tác hoặc đi đến một trang chi tiết như scroll, mở bottom sheet, mở page, lựa chọn tab, v.v... thì sẽ giữ nguyên khi user trở lại. (Trong một số trường hợp tương tác sẽ được đặt lại, user sẽ hướng đến vị trí đầu tiên của primary content)
• Điều hướng có thể được thay đổi khi cần cải thiện trải nghiệm của user. Có thể đưa user trở lại vị trí đầu tiên (hoặc đặt lại vị trí scroll, hay đặt lại tab đầu tiên) nếu nó phù hợp hơn cho việc trải nghiệm. Khi di chuyển bên trong một primary content, từ vị trí đầu tiên đến các trang chi tiết hơn, bottom navigation có thể được giữ lại để giúp điều hướng tốt hơn
• Vị trí đầu tiên: Screen hiển thị ban đầu. Trạng thái khi chưa từng có một tương tác nào được thực hiện (ví dụ như scroll, mở bottom sheet, mở page chi tiết, chuyển tab, v.v...)

---

Anatomy

Bottom Navigation có bao gồm Badge ở góc trên bên phải của icon

• 1
  Container
• Required
• 2
  Icon
• Required
• 3
  Label
• Required
• Text
• 4
  Badge
• Optional
• 5
  Divider
• Required

Specs

Padding and spacing

• Padding left, right = 4px
• Padding top = 4px
• Padding bottom = 2px
• Spacing = 2px
• Badge sẽ luôn nằm ở góc trên bên phải của Icon và tạo ra phần giao nhau
  • Phần giao nhau có w = 6px, h = 16px
  • Badge neo ở góc trên bên trái của phần giao nhau