Chuyển tới nội dung chính
ZZalo Platforms

Stack

Cập nhật lần cuối:

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​

Example​

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

export default function HomePage() {
  return (
    
      <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>
    
  );
}