ZBox

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

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.

Properties

Name	Type	Default	Description
borderWidth	string	var(--border-thin)	The width of the (solid) border. If empty or 0, the transparent outline is instated for high contrast mode.
children	React.ReactNode		ReactNode
invert	boolean	false	Whether to apply an inverted theme. Only recommended for greyscale designs.
padding	string	var(--s1)	The amount by with the Box is padded on all sides

Example

Open Sandbox

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

export default function HomePage() {
  return (
    <Page className='section-container'>
      <Stack className='section-container' space='2rem'>
        <ZBox>
          <ZBox padding='1rem' borderWidth='1px'>
            <Text>Header</Text>
          </ZBox>
          <ZBox borderWidth='1px'>
            <Text>Body</Text>
          </ZBox>
        </ZBox>
        <ZBox>
          <ZBox padding='2rem' borderWidth='1px'>
            <Text>Header</Text>
          </ZBox>
          <ZBox borderWidth='1px'>
            <Text>Body</Text>
          </ZBox>
        </ZBox>
      </Stack>
    </Page>
  );
}