区切り線

密なアプリケーションインターフェイスを整理するためのコンポスブルな水平セパレータ。単一のヘアライン、フレーム付きダブルライン、またはソフト充填ストリップを使用して、テキスト、ボタン、またはそれに沿ってどこでもコンパクトなコントロールを配置します。

通知

今日

最新アクティビティ

インストール

CLI または手動でディバイダーコンポーネントを追加できます。

ダークモード対応：このコンポーネントはBoardUIのセマンティックトークンに合わせて自動で切り替わります。テーマスイッチの設定.

CLI

手動

CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。

npx boardui@latest add divider

共有UIパッケージや独自のインポートエイリアスを使う場合は、インストールパスの設定をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。

バリエーション

詳しくはこちら single, double, または fill. すべての処置はBoardUIの皮脂のボーダーおよび表面トークンを使用します、従ってそれは活動的な主題を自動的に続きます。

シングルライン

ダブルライン

背景の記入

<Divider>Single line</Divider><Divider variant="double">Double line</Divider><Divider variant="fill">Background fill</Divider>

アライメント

ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ align prop は開始、中心、または終わりの内容を置きます。単一ラインのディバイダーは開いた側面のヘアラインを保ちます。

スタート

中央

終了まで

<Divider align="start">Start</Divider><Divider align="center">Center</Divider><Divider align="end">End</Divider>

アイコン、チップ、ボタン、アバター

子供はテキストに制限されていません。アイコン、チップ、ボタン、ボタングループ、またはアバターのスタックは、同じスロットに座っています。ラインは、彼らが取る任意の幅の周りに閉じます。追加の支柱はありません。コンテンツは子供として構成されているので、コンパクトはここに所属しています。

新着

import { RiAddLine, RiArrowDownLine, RiArrowUpLine } from "@remixicon/react";import { Avatar } from "@/components/base/avatar/avatar";import { Chip } from "@/components/base/badges/chip";import { Button } from "@/components/base/buttons/button";import { ButtonGroup, ButtonGroupItem } from "@/components/base/buttons/button-group";
{/* Icon */}<Divider>  <RiAddLine className="size-5 text-foreground-icon-secondary" aria-hidden /></Divider>
{/* Chip */}<Divider>  <Chip color="neutral">NEW</Chip></Divider>
{/* Button */}<Divider>  <Button variant="secondary" size="small">Button</Button></Divider>
{/* Button group */}<Divider>  <ButtonGroup size="small" aria-label="Move item">    <ButtonGroupItem size="small" aria-label="Move down">      <RiArrowDownLine className="size-5" aria-hidden />    </ButtonGroupItem>    <ButtonGroupItem size="small" aria-label="Add between">      <RiAddLine className="size-5" aria-hidden />    </ButtonGroupItem>    <ButtonGroupItem size="small" aria-label="Move up">      <RiArrowUpLine className="size-5" aria-hidden />    </ButtonGroupItem>  </ButtonGroup></Divider>
{/* Avatar group */}<Divider>  <div className="flex items-center">    <Avatar size="md" src="/avatars/aspen-lubin.webp" alt="Aspen Lubin"      className="ring-2 ring-background-primary-default" />    <Avatar size="md" src="/avatars/john-clarkson.webp" alt="John Clarkson"      className="-ml-2 ring-2 ring-background-primary-default" />    <span className="-ml-2 inline-flex size-8 items-center justify-center rounded-full bg-neutral-900 text-caption-1-semibold text-white ring-2 ring-background-primary-default dark:bg-neutral-700">      +7    </span>  </div></Divider>
{/* Any of the above also works on the filled surface */}<Divider variant="fill">  <ButtonGroup size="small" aria-label="Activity filter">    <ButtonGroupItem size="small" selected>All</ButtonGroupItem>    <ButtonGroupItem size="small">Unread</ButtonGroupItem>    <ButtonGroupItem size="small">Archived</ButtonGroupItem>  </ButtonGroup></Divider>

コンテンツなし

純粋に構造的な分離器のための子供を省略して下さい。この形態では、コンポーネントは補助的な技術にネイティブの分離器の役割そして横のオリエンテーションをexposesします。

<Divider aria-label="Section break" /><Divider variant="double" aria-label="Section break" /><Divider variant="fill" aria-label="Section break" />