Box
import { Box } from "zmp-ui";
Dùng để làm wrapper để bọc các element giúp thêm khoảng cách giữa các element một cách dễ dàng theo spacing system của Zalo Mini App, hoặc tạo nhanh flex layout.
Ví dụ
Bảng thuộc tính
| Property | Type | Required | Description |
|---|---|---|---|
| noSpace | boolean | No | Các element sẽ có `margin: 0` và `padding: 0` (default: false) |
| inline | boolean | No | Nhận giá trị `true` nếu muốn các element inline block (default: false) |
| m | number | No | Giá trị margin của box, nhận giá trị là level từ 0 đến 10, với giá trị margin tương ứng là level x 4px |
| p | number | No | Giá trị padding của box, nhận giá trị là level từ 0 đến 10, với giá trị padding tương ứng là level x 4px |
| mt | number | No | Giá trị margin top |
| ml | number | No | Giá trị margin left |
| mb | number | No | Giá trị margin bottom |
| mr | number | No | Giá trị margin right |
| pt | number | No | Giá trị padding top |
| pl | number | No | Giá trị padding left |
| pb | number | No | Giá trị padding bottom |
| pr | number | No | Giá trị padding right |
| mx | number | No | Giá trị margin left và margin right |
| my | number | No | Giá trị margin top và margin bottom |
| px | number | No | Giá trị padding left và padding right |
| py | number | No | Giá trị padding top và padding bottom |
| width | number | No | Chiều rộng của box |
| height | number | No | Chiều dài của box |
| verticalAlign | 'baseline' | 'sub' | 'super' | 'top' | 'text-top' | 'middle' | 'bottom' | 'text-bottom' | 'initial' | 'inherit' | No | Giá trị vertical-align |
| textAlign | 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit' | No | Giá trị text-align |
| flex | boolean | No | Chuyển box sang flex layout (default: false) |
| flexDirection | 'row' | 'row-reverse' | 'column' | 'column-reverse' | No | Giá trị flex-direction |
| flexWrap | boolean | No | Giá trị flex-wrap (default: false) |
| justifyContent | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'initial' | No | Giá trị justify-content |
| alignItems | 'flex-start' | 'flex-end' | 'stretch' | 'baseline' | 'center' | 'initial' | No | Giá trị align-items |
| alignContent | 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly' | 'initial' | No | Giá trị align-content |
| children | React.ReactNode | No | ReactNode |