分隔符 Separator

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

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

HelpSupport & docs

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

export function SeparatorMenu() {

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

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

export function SeparatorList() {

要在 shadcn/ui 中启用从右向左支持，请参阅从右向左配置指南。

shadcn/ui

الأساس لنظام التصميم الخاص بك

مجموعة من المكونات المصممة بشكل جميل يمكنك تخصيصها وتوسيعها والبناء عليها.

"use client"

import * as React from "react"

请参阅 Radix UI 分隔符文档。