Box

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

Box là component giúp bao bọc các element giúp thêm khoảng cách giữa các element một cách dễ dàng theo spacing system của Zalo Mini App.

Ngoài ra box còn hỗ trợ tạo nhanh Flex Layout.

Properties

Name	Type	Default	Description
alignContent	'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly' | 'initial'		Giá trị align-content
alignItems	'flex-start' | 'flex-end' | 'stretch' | 'baseline' | 'center' | 'initial'		Giá trị align-items
children	React.ReactNode		ReactNode
flex	boolean	false	Chuyển box sang flex layout
flexDirection	'row' | 'row-reverse' | 'column' | 'column-reverse'		Giá trị flex-direction
flexWrap	boolean	false	Giá trị flex-wrap
height	number		Chiều dài của box
inline	boolean	false	Nhận giá trị true nếu muốn các element inline block
justifyContent	'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'initial'		Giá trị justify-content
m	number		Giá trị margin của box, nhận giá trị là level từ 0 đến 10, với giá trị margin tương ứng là level x 4px
mb	number		Giá trị margin bottom
ml	number		Giá trị margin left
mr	number		Giá trị margin right
mt	number		Giá trị margin top
mx	number		Giá trị margin left và margin right
my	number		Giá trị margin top và margin bottom
noSpace	boolean	false	Các element sẽ có margin: 0 và padding: 0
p	number		Giá trị padding của box, nhận giá trị là level từ 0 đến 10, với giá trị padding tương ứng là level x 4px
pb	number		Giá trị padding bottom
pl	number		Giá trị padding left
pr	number		Giá trị padding right
pt	number		Giá trị padding top
px	number		Giá trị padding left và padding right
py	number		Giá trị padding top và padding bottom
textAlign	'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit'		Giá trị text-align
verticalAlign	'baseline' | 'sub' | 'super' | 'top' | 'text-top' | 'middle' | 'bottom' | 'text-bottom' | 'initial' | 'inherit'		Giá trị vertical-align
width	number		Chiều rộng của box

Example

Open Sandbox

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

export default function HomePage() {
  return (
    <Page className="section-container">
      <Box mt={1}>
        <Button size="large">Button</Button>
      </Box>
      <Box mt={10}>
        <Button size="large">Button</Button>
      </Box>
    </Page>
  );
}