Spinner

進み具合の分からない読み込み表示です。

Loading…

インポート

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

例

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

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

export default function SpinnerDemo() {
  return (
    <Stack direction="row" gap="sizeXLarge" align="center" wrap>
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" label="Loading…" labelPosition="right" />
    </Stack>
  );
}

MDX で使う

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

---
title: Example
---

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

<Spinner size="lg" label="Loading…" labelPosition="right" />

Markdoc で使う

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

{% spinner size="lg" label="Loading…" labelPosition="right" /%}

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

バリアント

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

Prop	値
`size`	`xs` `sm` `md` `lg` `xl` `xxl`

構造

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

パーツ	ロール
`root`	spinner

参考

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