分隔符

import { Separator } from "@/components/ui/separator"

export function SeparatorDemo() {

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add separator
Copy

用法

🌐 Usage

Copyimport { Separator } from "@/components/ui/separator"

Copy<Separator />

示例

🌐 Examples

垂直

🌐 Vertical

使用 orientation="vertical" 作为垂直分隔符。

🌐 Use orientation="vertical" for a vertical separator.

import { Separator } from "@/components/ui/separator"

export function SeparatorVertical() {

菜单

🌐 Menu

带有描述的菜单项之间的垂直分隔符。

🌐 Vertical separators between menu items with descriptions.

import { Separator } from "@/components/ui/separator"

export function SeparatorMenu() {

列表

🌐 List

列表项之间的水平分隔符。

🌐 Horizontal separators between list items.

import { Separator } from "@/components/ui/separator"

export function SeparatorList() {

从右到左

🌐 RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

API参考

🌐 API Reference

请参阅 Radix UI Separator 文档。

🌐 See the Radix UI Separator documentation.