Stack

Cập nhật lần cuối: 27/05/2022

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.

Properties

Name	Type	Default	Description
children	React.ReactNode		ReactNode
recursive	boolean	false	Whether the spaces apply recursively (i.e. regardless of nesting level)
space	string	var(--s1)	A CSS margin value
splitAfter	number	null	The element after which to split the stack with an auto margin

Example

Open Sandbox

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>
  );
}