Components
Top-Navigation
Dựng từ contract Top-Navigation/Sub/Medium, gồm 12 variant, properties Size × Type × Inverse.
Thanh điều hướng trên cùng của màn hình con. Thanh mở đầu bằng nút back và có tối đa hai nút icon ở mép phải. Thanh không vẽ status bar, vì hệ điều hành tự vẽ phần đó.
Chiều cao thanh không đặt cứng mà bằng cỡ nút icon cộng padding. Khi Button/Size trong Figma đổi, chiều cao đổi theo.
- Color scheme
- Brand
- Density
- Radius
- Emphasis
- Type scale
API
Props
| Property | Values | Default | Description |
|---|---|---|---|
size | small · medium | medium | |
type | Inline · Two-Line | Inline | |
inverse | boolean | false | Dùng khi nav nằm trên nền tối hoặc ảnh: bỏ nền, đảo màu nội dung |
title | text | Heading |
Section 01
Default
Section 02
Two-Line
Section 03
No-Text
Section 04
Sizes
Size
small
medium
Figma tách hai cỡ thành hai component set riêng. Trong code, hai cỡ gộp thành một prop, và token nào giống nhau giữa hai cỡ chỉ sinh một rule CSS.
Section 05
Types
Type
Inline
Two-Line
Section 06
Inverse
Inverse = Yes
Inverse chỉ đổi màu, không đổi cỡ chữ hay chiều cao. Ở trạng thái này nav không có nền, nên màn hình phải tự vẽ nền.