徽章 1徽章 2徽章 3
import { Badge, Wrap } from "@chakra-ui/react"
export const WrapBasic = () => (
<Wrap>
<Badge>Badge 1</Badge>
<Badge>Badge 2</Badge>
<Badge>Badge 3</Badge>
</Wrap>
)
用法
默认情况下，Wrap 会对其子元素应用 display: flex、flex-wrap: wrap 和 gap: 8px 样式。
import { Wrap, WrapItem } from "@chakra-ui/react"<Wrap>
<div />
<div />
</Wrap>示例
间距
通过传递 gap 属性，可以在每个子元素之间应用一致的间距，即使它们自动换行。
import { Wrap } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
export const WrapWithGap = () => (
<Wrap gap="5">
{Array.from({ length: 10 }).map((_, index) => (
<DecorativeBox key={index} h="12" w="12" />
))}
</Wrap>
)
对齐方式
通过传递 align 属性，可以改变子元素沿交叉轴的对齐方式。
盒子1
盒子2
盒子3
盒子4
盒子5
import { Center, Wrap, WrapItem } from "@chakra-ui/react"
export const WrapWithAlign = () => (
<Wrap gap="30px" align="center">
{Array.from({ length: 5 }).map((_, index) => (
<WrapItem key={index}>
<Center w="180px" h="80px" bg="red.muted">
Box {index + 1}
</Center>
</WrapItem>
))}
</Wrap>
)
对齐方式
通过传递 justify 属性，可以改变子元素沿主轴的对齐方式。
盒子1
盒子2
盒子3
盒子4
盒子5
import { Center, Wrap, WrapItem } from "@chakra-ui/react"
export const WrapWithJustify = () => (
<Wrap gap="30px" justify="center">
{Array.from({ length: 5 }).map((_, index) => (
<WrapItem key={index}>
<Center w="180px" h="80px" bg="red.muted">
Box {index + 1}
</Center>
</WrapItem>
))}
</Wrap>
)
行间距和列间距
通过传递 rowGap 和 columnGap 属性，可以对行和列之间应用一致的间距。
import { Wrap } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
export const WrapWithRowColumnGap = () => (
<Wrap rowGap={["0px", "24px"]} columnGap={["4px", "12px"]}>
{Array.from({ length: 10 }).map((_, index) => (
<DecorativeBox key={index} w="12" h="12" />
))}
</Wrap>
)
响应式
为 gap、rowGap 和 columnGap 属性使用响应式值，以便在每个子元素之间应用响应式间距。
import { Wrap } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
export const WrapResponsive = () => (
<Wrap gap={["12px", "24px"]} justify={["center", "flex-start"]}>
<DecorativeBox h="12" w="12" />
<DecorativeBox h="12" w="12" />
<DecorativeBox h="12" w="12" />
<DecorativeBox h="12" w="12" />
<DecorativeBox h="12" w="12" />
<DecorativeBox h="12" w="12" />
<DecorativeBox h="12" w="12" />
<DecorativeBox h="12" w="12" />
<DecorativeBox h="12" w="12" />
<DecorativeBox h="12" w="12" />
<DecorativeBox h="12" w="12" />
</Wrap>
)