Nhảy tới nội dung
Phiên bản: 1.11.0

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:

stack_padding_issue

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.

stack_padding_issue

Properties

NameTypeDefaultDescription
childrenReact.ReactNode

ReactNode

recursivebooleanfalse

Whether the spaces apply recursively (i.e. regardless of nesting level)

spacestringvar(--s1)

A CSS margin value

splitAfternumbernull

The element after which to split the stack with an auto margin

Example

import React from "react";
import { Page, Stack, Button } from "zmp-ui";

export default function HomePage() {
  return (
    <Page className='section-container'>
      <Stack className='section-container' space='2rem' recursive>
        <div style={{ border: "solid 2px", height: "100px" }} />
        <div style={{ border: "solid 2px", height: "100px" }} />
        <div style={{ border: "solid 2px", height: "100px" }} />
        <div style={{ border: "solid 2px", height: "100px" }} />
      </Stack>
    </Page>
  );
}