Separator
水平セクションと垂直コントロールグループのための意味のある区切りです。
主なプロパティ
TRSeparator は意味のある境界を role="separator" で示します。orientation は horizontal または vertical を受け取り、既定値は horizontal です。線がコンテンツを区切らず、純粋に視覚的な場合にのみ role="presentation" を使用してください。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/separator.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRSeparator } from '@tinyrack/ui/components/separator';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
意味のある区切りと装飾的な区切り パーマリンク
コンテンツの境界には既定のロールを保ちます。視覚的な目的だけの線からは区切りのセマンティクスを取り除きます。
API
向き、セマンティクス、合成
| プロパティ | 型 | 既定値 | 説明 |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | 視覚的な方向と区切りの aria-orientation を設定します。 |
role | React.AriaRole | 'separator' | 純粋に装飾的な線には presentation を使用します。この場合、区切り専用の方向 ARIA は省略されます。 |
render | ReactElement | <div /> | 区切りの動作とクラスを維持したまま、レンダリング要素を置き換えます。 |
サポートされるすべてのネイティブ <div> props、className、style、ref が転送されます。--tr-separator-color、--tr-separator-thickness、--tr-separator-min-length で外観をカスタマイズできます。