Avatar Group

重ねたり並べたりしたアバターの集まりです。あふれた数を表示します。

インポート

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

例

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

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

const team = [
  { alt: "Jihoon Ahn" },
  { alt: "Mina Park" },
  { alt: "Leo Kim" },
  { alt: "Sora Lee" },
  { alt: "Ren Ito" },
];

export default function AvatarsDemo() {
  return (
    <Stack gap="sizeLarge">
      <Avatars avatars={team} max={3} />
      <Avatars avatars={team} size="lg" layout="spread" max={4} />
    </Stack>
  );
}

MDX で使う

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

---
title: Example
---

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

<Avatars avatars={[{ alt: "Jihoon Ahn" }, { alt: "Mina Park" }, { alt: "Leo Kim" }]} max={2} />

Markdoc で使う

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

{% avatars avatars=[{alt: "Jihoon Ahn"}, {alt: "Mina Park"}, {alt: "Leo Kim"}] max=2 /%}

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

バリアント

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

Prop	値
`size`	`xs` `sm` `md` `lg` `xl`
`layout`	`stack` `spread`

構造

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

パーツ	ロール
`root`	avatars

参考

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