ZBox
import { ZBox } from "zmp-ui";
Dùng để quản lý các layout mà có thể được coi là cố định cho từng phần tử. Các kiểu mà không được quy định, kế thừa, hoặc suy ra từ các layout tổng hợp cho một phần tử cụ thể.
- Hướng dẫn sử dụng
- Tiêu chuẩn thiết kế
Ví dụ
Bảng thuộc tính
| Property | Type | Required | Description |
|---|---|---|---|
| padding | string | No | The amount by with the Box is padded on all sides (default: var(--s1)) |
| borderWidth | string | No | The width of the (solid) border. If empty or 0, the transparent outline is instated for high contrast mode. (default: var(--border-thin)) |
| invert | boolean | No | Whether to apply an inverted theme. Only recommended for greyscale designs. (default: false) |
| children | React.ReactNode | No | ReactNode |
ZBox
Chúng ta nên coi tất cả các phần tử hiển thị đều là một box. Tất cả các layout được cung cấp bởi ZaUI đều có nhiệm vụ sắp xếp các box lại với nhau để tạo thành một giao diện ứng dụng hoàn chỉnh. Ví dụ: Stack chỉ đơn giản là thêm khoảng cách theo chiều dọc giữa các box. Stack chỉ nên có nhiệm vụ thêm margin dọc, nếu nó làm chức năng khác thì sẽ gây ra lỗi không cần thiết cho các layout còn lại.
ZBox trong hệ thống layout ZaUI có vai trò quản lý các kiểu mà có thể được coi là cố định cho từng phần tử. Các kiểu mà không được quy định, kế thừa, hoặc suy ra từ các layout tổng hợp cho một phần tử cụ thể.
ZBox cung cấp các thuộc tính:
padding
Padding sẽ thêm khoảng cách đều nhau ở các cạnh của ZBox, bởi vì nếu chỉ thêm ở một hoặc một số cạnh thì không phải là 1 box nữa. Thông thường, nếu cần thêm khoảng cách giữa các phần tử, thì nên dùng margin. Margin sẽ mở rộng ra ngoài đường viền của phần tử.
borderWidth
Giống với padding, border cũng nên được thêm vào tất cả các cạnh của box. Nếu trong một số trường hợp cần dùng border để phân tách các phần tử riêng biệt thì nên được áp dụng theo ngữ cảnh, thông qua phần tử cha, giống như margin trong Stack. Nếu không những đường viền sẽ tiếp xúc với nhau và tăng lên gấp đôi.
