@ chakra-ui/ 排队
一组布局原始的,使其超易管理页面和 组件.
安装
yarn add @chakra-ui/layout
# or
npm i @chakra-ui/layout
导入组件
import { Box, Flex, Stack, Grid, Wrap, AspectRatio } from "@chakra-ui/layout"
使用量
盒子只是一个 div 关于类固醇。 它能让你通过风格道具
<Box color="tomato" _hover={{ bg: "red.500", color: "white" }}>
Welcome to Box
</Box>
Flex只是一个 Box 与 display: flex
<Flex>
<Box flex="1">Box 1</Box>
<Box>Box 2</Box>
</Flex>
堆栈用于组合元素并应用它们之间的间隔. 它叠起它的 儿童纵横默认.
<Stack spacing="20px">
<Box>Box 1</Box>
<Box>Box 2</Box>
</Stack>
AspectRatio被用来限制其孩子与特定方面的比例. 没错 大多用于嵌入视频,图像和地图.
<AspectRatio ratio={16 / 9}>
<img src="./some-ig-story" alt="Instagram story" />
</AspectRatio>
环绕用于管理可能遭受以下风险的儿童元素的分布: 包装。 它主要用于按钮组,标记组,徽章组,和芯片.
<Wrap spacing={3}>
<Box>Box 1</Box>
<Box>Box 2</Box>
</Wrap>
徽章用来制作徽章. 可以用不同的变体和颜色
《公约》所界定的计划 theme.components.Badge
<Badge variant="solid" colorScheme="green">
Verified <FaCheck />
</Badge>
中心用于纵向和横向中心
<Center bg="blue.500" borderRadius="4px" boxSize="40px">
<FaPhoneIcon />
</Center>
集装箱用于管理网站或博客的内容区域。 它的中心
本身使用 margin-left: auto 财务报告和审定财务报表 margin-right: auto。它也适用
默认最大宽度 60ch (60个字符)
<Container>
<BlogContent />
</Container>
Spacer是一个在弹性容器中占据剩余空间的组件. 这个 用于管理空间和用弹性容器包裹
<Flex>
<Box boxSize="40px" />
<Spacer />
<Box boxSize="40px" />
</Flex>