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

Box

Name	Type	Default	Description
noSpace	boolean		Các element sẽ có margin: 0 và padding: 0
inline	boolean	false	Nhận giá trị true nếu muốn các element inline block
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
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
mt	number		Giá trị margin top
ml	number		Giá trị margin left
mb	number		Giá trị margin bottom
mr	number		Giá trị margin right
pt	number		Giá trị padding top
pl	number		Giá trị padding left
pb	number		Giá trị padding bottom
pr	number		Giá trị padding right
mx	number		Giá trị margin left và margin right
my	number		Giá trị margin top và margin bottom
px	number		Giá trị padding left và padding right
py	number		Giá trị padding top và padding bottom
width	number		Chiều rộng của box
height	number		Chiều dài của box
verticalAlign	VerticalAlignEnum		Giá trị vertical-align
textAlign	string		Giá trị text-align
flex	boolean		Chuyển box sang flex layout
flexDirection	string		Giá trị flex-direction
flexWrap	string		Giá trị flex-wrap
justifyContent	string		Giá trị justify-content
alignItems	string		Giá trị align-items
alignContent	string		Giá trị align-content
children	React.ReactNode		ReactNode

Type

VerticalAlignEnum

Name	Description
"baseline"	The element is aligned with the baseline of the parent. This is default
"sub"	The element is aligned with the subscript baseline of the parent
"super"	The element is aligned with the superscript baseline of the parent
"top"	The element is aligned with the top of the tallest element on the line
"text-top"	The element is aligned with the top of the parent element's font
"middle"	The element is placed in the middle of the parent element
"bottom"	The element is aligned with the lowest element on the line
"text-bottom"	The element is aligned with the bottom of the parent element's font
"initial"	Sets this property to its default value
"inherit"	Inherits this property from its parent element

TextAlignEnum

Name	Description
"left"	text align left
"right"	text align right
"center"	text align center
"justify"	justify
"initial"	initital
"inherit"	inherit

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