111k
新建

Separator

PreviousNext

在视觉或语义上分隔内容。

Radix UIBase UI
Radix UI
shadcn/ui
The Foundation for your Design System
A set of beautifully designed components that you can customize, extend, and build on.
import { Separator } from "@/components/ui/separator"

export function SeparatorDemo() {

安装

pnpm dlx shadcn@latest add separator

用法

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

示例

垂直

使用 orientation="vertical" 创建垂直分隔线。

Blog
Docs
Source
import { Separator } from "@/components/ui/separator"

export function SeparatorVertical() {

菜单

在带描述的菜单项之间使用垂直分隔线。

SettingsManage preferences
AccountProfile & security
import { Separator } from "@/components/ui/separator"

export function SeparatorMenu() {

列表

在列表项之间使用水平分隔线。

Item 1
Value 1
Item 2
Value 2
Item 3
Value 3
import { Separator } from "@/components/ui/separator"

export function SeparatorList() {

RTL

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

shadcn/ui
الأساس لنظام التصميم الخاص بك
مجموعة من المكونات المصممة بشكل جميل يمكنك تخصيصها وتوسيعها والبناء عليها.
"use client"

import * as React from "react"

API 参考

更多信息请参见 Radix UI Separator 文档。