110k
New

分隔线

PreviousNext

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

Radix UIBase 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 参考

请参阅 Base UI Separator 文档。