First
Second
Third
import { Separator, Stack, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack>
<Text>First</Text>
<Separator />
<Text>Second</Text>
<Separator />
<Text>Third</Text>
</Stack>
)
}
用法
¥Usage
import { Separator } from "@chakra-ui/react"<Separator />示例
¥Examples
变量
¥Variants
使用 variant 属性更改分隔符的外观。
¥Use the variant prop to change the appearance of the separator.
import { Separator, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack>
<Separator variant="solid" />
<Separator variant="dashed" />
<Separator variant="dotted" />
</Stack>
)
}
尺寸
¥Sizes
使用 size 属性更改分隔符的大小。
¥Use the size prop to change the size of the separator.
import { Separator, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack gap="4">
<Separator size="xs" />
<Separator size="sm" />
<Separator size="md" />
<Separator size="lg" />
</Stack>
)
}
标签
¥Label
使用 label 属性为分隔符添加标签。
¥Use the label prop to add a label to the separator.
Label (start)
Label (end)
Label (center)
import { HStack, Separator, Stack, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack>
<HStack>
<Text flexShrink="0">Label (start)</Text>
<Separator flex="1" />
</HStack>
<HStack>
<Separator flex="1" />
<Text flexShrink="0">Label (end)</Text>
</HStack>
<HStack>
<Separator flex="1" />
<Text flexShrink="0">Label (center)</Text>
<Separator flex="1" />
</HStack>
</Stack>
)
}
垂直
¥Vertical
使用 orientation 属性更改分隔符的方向。
¥Use the orientation prop to change the orientation of the separator.
First
Second
import { HStack, Separator, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap="4">
<Text>First</Text>
<Separator orientation="vertical" height="4" />
<Text>Second</Text>
</HStack>
)
}
响应式方向
¥Responsive Orientation
以下是如何根据屏幕尺寸更改 orientation 属性的示例。
¥Here's an example of how to change the orientation property based on the
screen size.
import { Separator, Stack } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
const Demo = () => {
return (
<Stack direction={{ base: "row", md: "column" }} align="stretch">
<DecorativeBox>First</DecorativeBox>
<Separator orientation={{ base: "vertical", sm: "horizontal" }} />
<DecorativeBox>Second</DecorativeBox>
</Stack>
)
}
当 orientation 属性为响应式值时，分隔符将不带 aria-orientation 进行渲染，角色设置为 presentation。
¥When the orientation prop is a responsive value, the separator will be
rendered without aria-orientation and the role is set to presentation.
属性
¥Props
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'The color palette of the component |
variant | 'solid' | 'solid' | 'dashed' | 'dotted'The variant of the component |
orientation | 'horizontal' | 'vertical' | 'horizontal'The orientation of the component |
size | 'sm' | 'xs' | 'sm' | 'md' | 'lg'The size of the component |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |