アバター

ユーザーを表すためのフォールバック付きの画像要素です。

/* code example omitted */

import React from 'react';
import * as Avatar from '@radix-ui/react-avatar';
import './styles.css';

const AvatarDemo = () => (
  <div style={{ display: 'flex', gap: 20 }}>
    <Avatar.Root className="AvatarRoot">
      <Avatar.Image
        className="AvatarImage"
        src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
        alt="Colm Tuite"
      />
      <Avatar.Fallback className="AvatarFallback" delayMs={600}>
        CT
      </Avatar.Fallback>
    </Avatar.Root>
    <Avatar.Root className="AvatarRoot">
      <Avatar.Image
        className="AvatarImage"
        src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
        alt="Pedro Duarte"
      />
      <Avatar.Fallback className="AvatarFallback" delayMs={600}>
        JD
      </Avatar.Fallback>
    </Avatar.Root>
    <Avatar.Root className="AvatarRoot">
      <Avatar.Fallback className="AvatarFallback">PD</Avatar.Fallback>
    </Avatar.Root>
  </div>
);

export default AvatarDemo;

機能

画像がレンダリングされるタイミングを自動および手動で制御します。

フォールバック部分は任意の子要素を受け入れます。

コンテンツのフラッシュを防ぐために、オプションでフォールバックレンダリングを遅延させます。

インストール

コマンドラインからコンポーネントをインストールします。

npm install @radix-ui/react-avatar

構造

すべてのパーツをインポートして組み立てます。

import * as Avatar from '@radix-ui/react-avatar';

export default () => (
  <Avatar.Root>
    <Avatar.Image />
    <Avatar.Fallback />
  </Avatar.Root>
);

API リファレンス

ルート

アバターのすべてのパーツが含まれています。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	`false`

画像

レンダリングする画像。デフォルトでは、ロードされた場合にのみレンダリングされます。より詳細な制御が必要な場合は、onLoadingStatusChange ハンドラーを使用できます。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	`false`
`onLoadingStatusChange`	`関数`	デフォルト値なし

画像がロードされていないときにレンダリングされる要素。これは、ロード中、またはエラーが発生した場合を意味します。ロード中にフラッシュが発生した場合は、delayMs プロパティを提供してレンダリングを遅延させることで、接続速度が遅いユーザーに対してのみレンダリングされるようにすることができます。より詳細な制御を行うには、Avatar.Image で onLoadingStatusChange ハンドラーを使用します。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	`false`
`delayMs`	`数値`	デフォルト値なし

例

アバターとツールチップを組み合わせて、追加情報を表示できます。

import * as Avatar from '@radix-ui/react-avatar';
import * as Tooltip from '@radix-ui/react-tooltip';

export default () => (
  <Tooltip.Root>
    <Tooltip.Trigger>
      <Avatar.Root>…</Avatar.Root>
    </Tooltip.Trigger>

    <Tooltip.Content side="top">
      Tooltip content
      <Tooltip.Arrow />
    </Tooltip.Content>
  </Tooltip.Root>
);

前へアスペクト比

次へチェックボックス

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