125k

Separator

PreviousNext

コンテンツを視覚的または意味的に分離します。

BaseRadixReact Aria
shadcn/ui
デザインシステムの基盤
カスタマイズ、拡張、構築に使える美しく設計されたコンポーネント集です。
import { Separator } from "@/components/ui/aria/separator"

export function SeparatorDemo() {

インストール

pnpm dlx shadcn@latest add separator

使い方

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

垂直

垂直方向の区切り線には orientation="vertical" を使用します。

ブログ
ドキュメント
ソース
import { Separator } from "@/components/ui/aria/separator"

export function SeparatorVertical() {

メニュー

説明付きのメニュー項目間の垂直の区切り線。

設定環境設定を管理
アカウントプロフィールとセキュリティ
import { Separator } from "@/components/ui/aria/separator"

export function SeparatorMenu() {

リスト

リスト項目間の水平の区切り線。

項目 1
値 1
項目 2
値 2
項目 3
値 3
import { Separator } from "@/components/ui/aria/separator"

export function SeparatorList() {

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイドを参照してください。

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

import * as React from "react"

API リファレンス

詳細については、React Aria Separator のドキュメントを参照してください。