Stack
import { Stack } from "zmp-ui";
Dùng để giúp cho việc sắp xếp các phần tử theo chiều dọc trên giao diện của ứng dụng được dễ dàng hơn.
- 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 |
|---|---|---|---|
| space | string | No | A CSS `margin` value (default: var(--s1)) |
| recursive | boolean | No | Whether the spaces apply recursively (i.e. regardless of nesting level) (default: false) |
| splitAfter | number | No | The element after which to _split_ the stack with an auto margin (default: null) |
| children | React.ReactNode | No | ReactNode |
Stack
Vấn đề
Trong thiết kế giao diện chúng ta thường cần phân tách các phần tử ra khỏi các phần tử khác theo một khoảng cách nhất định, và margin được sử dụng cho mục đích này. Tuy nhiên, việc thiết kế các phần tử độc lập, không xác định được xung quanh có nội dung gì và yêu cầu về khoảng cách sẽ phải thay đổi. Thường thì, chúng ta thiết kế trực tiếp cho các phần tử, nhưng margin là một thuộc tính của mối quan hệ giữa các phần tử gần nhau. Điều này có thể tạo ra những vấn đề như khoảng trống dư thừa trong trường hợp sau:
Giải pháp
Stack được tạo ra để giúp cho việc sắp xếp các phần tử theo chiều dọc trên giao diện của ứng dụng được dễ dàng hơn. Với Stack, bạn có thể linh hoạt chỉ định khoảng cách giữa các phần tử liên tiếp, chia stack thành nhiều phần nếu cần, và áp dụng các thuộc tính một cách đệ quy cho tất cả các phần tử lồng nhau.
