Separator
Separator is a component that represents a division between elements.
Import
import { Separator } from "@yamada-ui/react"
Usage
Editable example
<Flex direction="column" gap="md"> <For each={["solid", "dashed", "dotted"]}> {(variant, index) => <Separator key={index} variant={variant} />} </For> </Flex>
Draw a vertical dividing line
Editable example
<Flex h="sm" gap="md"> <For each={["solid", "dashed", "dotted"]}> {(variant, index) => ( <Separator key={index} orientation="vertical" variant={variant} /> )} </For> </Flex>
When making the dividing line vertical, you need to set the height to the parent element or Separator.
Edit this page on GitHub