Divider

Above the line

Or continue with

Below the line

インポート

import { Divider } from "@pelagornis/page/components";

例

上のプレビューはこのファイルを描画したものです。src/components/ にコピーして使い始めてください。

src/components/DividerExample.tsx

import { Divider, Stack, Text } from "@pelagornis/page/components";

export default function DividerDemo() {
  return (
    <Stack gap="sizeLarge" className="w-full">
      <Text variant="bodyMd">Above the line</Text>
      <Divider />
      <Divider layout="content" align="center">
        Or continue with
      </Divider>
      <Text variant="bodyMd">Below the line</Text>
    </Stack>
  );
}

MDX で使う

Divider は .mdx ページにそのまま書けます。frontmatter の下でインポートしてください。サーバーで描画されるので、client ディレクティブは要りません。

src/content/docs/example.mdx

---
title: Example
---

import { Divider } from "@pelagornis/page/components";

<Divider />

<Divider layout="content" align="center">Or continue with</Divider>

Markdoc で使う

pageMarkdoc() がこのコンポーネントの divider タグを登録します。markdoc.config.mjs にプリセットを一度追加すれば（Markdoc で使うを参照）、どの .mdoc ページでもタグを書けます。

src/content/docs/example.mdoc

{% divider /%}

{% divider layout="content" align="center" %}Or continue with{% /divider %}

属性の名前と値は React の props と同じです。

バリアント

各 variant prop が受け付ける値です。

Prop	値
layout	default content icon

構造

コンポーネントを構成するパーツと、それぞれが描画する data-refineui のロールです。

パーツ	ロール
root	divider

参考

• デザインのガイドとトークンの詳細は RefineUI · Divider を参照してください。
• 共通のルールは MDX で使う と Markdoc で使う を参照してください。