概要

はじめに

スタイリング

レイアウト

リリース

テーマ

...(以下同様に変更)... 概要、カラー、ダークモード、タイポグラフィ、スペーシング、ブレークポイント、半径、シャドウ、カーソル

レイアウト

... (以下同様に変更) ... ボックス、フレックス、グリッド、コンテナ、セクション

タイポグラフィ

... (以下同様に変更) ... テキスト、見出し、ブロッククオート、コード、強調、キーボード入力、リンク、引用、強調

コンポーネント

... (以下同様に変更) ... アラートダイアログ、アスペクト比、アバター、バッジ、ボタン、コールアウト、カード、チェックボックス、チェックボックスグループ、チェックボックスカード、コンテキストメニュー、データリスト、ダイアログ、ドロップダウンメニュー、ホバーカード、アイコンボタン、インセット、ポップオーバー、進捗、ラジオボタン、ラジオボタングループ、ラジオボタンカード、スクロールエリア、セグメントコントロール、セレクトボックス、セパレーター、スケルトン、スライダー、スピナー、スイッチ、テーブル、タブ、タブナビゲーション、テキストエリア、テキストフィールド、ツールチップ

ユーティリティ

セパレーター

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

ソースコードを表示問題を報告プレイグラウンドで表示

高品質でアクセシブルなUIを構築するためのツール。

テーマプリミティブアイコン色

<Text size="2">
  Tools for building high-quality, accessible UI.
  <Separator my="3" size="4" />
  <Flex gap="3" align="center">
    Themes
    <Separator orientation="vertical" />
    Primitives
    <Separator orientation="vertical" />
    Icons
    <Separator orientation="vertical" />
    Colors
  </Flex>
</Text>

APIリファレンス

このコンポーネントはセパレータープリミティブからプロパティを継承し、共通マージンプロパティをサポートしています。

プロパティ	型	デフォルト
`orientation（方向）`	`Responsive<"horizontal" \| "vertical">`	`"horizontal"（水平）`
`size（サイズ）`	`Responsive<"1" \| "2" \| "3" \| "4">`	`"1"`
`color（色）`	`enum（列挙型）`	`"gray"（灰色）`
`decorative（装飾）`	`boolean（真偽値）`	`true（真）`

例

サイズ

sizeプロパティを使用して、セパレーターのサイズを制御します。最大のステップは、コンテナの幅または高さ全体を占めます。

<Flex direction="column" gap="4">
  <Separator orientation="horizontal" size="1" />
  <Separator orientation="horizontal" size="2" />
  <Separator orientation="horizontal" size="3" />
  <Separator orientation="horizontal" size="4" />
</Flex>

<Flex align="center" gap="4" height="96px">
  <Separator orientation="vertical" size="1" />
  <Separator orientation="vertical" size="2" />
  <Separator orientation="vertical" size="3" />
  <Separator orientation="vertical" size="4" />
</Flex>

色

colorプロパティを使用して、特定の色を割り当てます。

<Flex direction="column" gap="3">
  <Separator color="indigo" size="4" />
  <Separator color="cyan" size="4" />
  <Separator color="orange" size="4" />
  <Separator color="crimson" size="4" />
</Flex>

方向

orientationプロパティを使用して、セパレーターが水平方向か垂直方向かを制御します。

<Flex align="center" gap="4">
  <Separator orientation="horizontal" />
  <Separator orientation="vertical" />
</Flex>

前へ選択

次へスケルトン

GitHubでこのページを編集する