CSS: avatar

.instui-avatar · stable — イニシャルまたは画像を表示するユーザーアバター。デフォルトは円形です。

デフォルトでは、パレットの色が透過面上のイニシャルに色を付けます。-has-inverse-color は面をその色で塗り、イニシャルを同系色上に置きます。-color-ai バリアントは常にバイオレット→シーのグラデーションで塗りつぶします。フル表示名はコンテンツ内に入れて（アクセシビリティツリーに残るように）視覚的にコンパクトにするには data-initials="XX" を追加してください — 実際のテキストがスクリーンリーダーに読み上げられます。data-initials がない場合、あふれたコンテンツは単にハードクリップされます（省略記号は付きません）。先頭1文字だけ厳密に切るには .name でラップするか、二文字に切るには .first-name/.last-name に分けてください（どちらか一方を省略しても残りは中央寄せのままです）。

Source: avatar.css

TIP

JS 拡張 — このコンポーネントの CSS は単独でレンダリングおよび動作します。対話的な振る舞いを追加するには @pantoken/interactions と組み合わせてください。詳細は下の修飾子表を参照してください。

アクセシビリティ

画像アバターには意味のある alt（その人の名前）を付与してください。単に「avatar」とするのは避けます。イニシャルのみのアバターでは、省略された文字より実際の名前コンテンツ（生のテキスト、data-initials、.name、または .first-name/.last-name）を優先して、支援技術が実際の名前を読み上げるようにしてください。

使用法

css

@import "@pantoken/components/components.css";
@import "@pantoken/components/avatar.css";

例

html

<span class="instui-avatar --me-sm">LH</span>
<span class="instui-avatar -color-ai --me-sm">AI</span>
<span class="instui-avatar --me-sm" data-initials="NV">Dr. Nguyen Van Thoc</span>
<span class="instui-avatar"><span class="name">Miguel Sanchez</span></span>
<span class="instui-avatar"><span class="first-name">Miguel</span> <span class="last-name">Sanchez</span></span>

構造

アバターは次のいずれかを表示します: <img>、生テキスト／data-initials、.name ラップ、または .first-name/.last-name のペア。

text

.instui-avatar
  img (0..1)
  .name (0..1)
  .first-name (0..1)
  .last-name (0..1)

flowchart TD n0[".instui-avatar"]:::cssdoc-root n1("img"):::cssdoc-part n2(".name"):::cssdoc-part n3(".first-name"):::cssdoc-part n4(".last-name"):::cssdoc-part n0 -.->|0..1| n1 n0 -.->|0..1| n2 n0 -.->|0..1| n3 n0 -.->|0..1| n4 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

修飾子

修飾子	説明
`.-color-accent1`	非推奨 — use `.-color-blue`.
`.-color-accent2`	非推奨 — use `.-color-green`.
`.-color-accent3`	非推奨 — use `.-color-red`.
`.-color-accent4`	非推奨 — use `.-color-orange`.
`.-color-accent5`	非推奨 — use `.-color-ash`.
`.-color-accent6`	非推奨 — use `.-color-grey`.
`.-color-ai`	AI アクセント用のパレット色。
`.-color-ash`	Ash パレット色。
`.-color-blue`	Blue パレット色。
`.-color-green`	Green パレット色。
`.-color-grey`	Grey パレット色。
`.-color-orange`	Orange パレット色。
`.-color-red`	Red パレット色。
`.-has-inverse-color`	反転（ダーク上）テキスト色を使用します。
`.-shape-rectangle`	円形ではなく正方形（長方形）形状にします。
`.-show-border`	Alias — maps to `.-show-border-always`.
`.-show-border-always`	画像や反転塗りの上でも強制的にボーダーリングを表示します。
`.-show-border-never`	ボーダーリングを強制的にオフにします。
`.-size-2xl`	2サイズ大きい。
`.-size-2xs`	2サイズ小さい。
`.-size-large`	Large。`-size-lg` の長い別名。
`.-size-lg`	Large。
`.-size-md`	Medium（デフォルト）。
`.-size-medium`	Medium（デフォルト）。`-size-md` の長い別名。
`.-size-sm`	Small。
`.-size-small`	Small。`-size-sm` の長い別名。
`.-size-x-large`	Extra large。`-size-xl` の長い別名。
`.-size-x-small`	Extra small。`-size-xs` の長い別名。
`.-size-xl`	Extra large。
`.-size-xs`	Extra small。
`.-size-xx-large`	2サイズ大きい。`-size-2xl` の長い別名。
`.-size-xx-small`	2サイズ小さい。`-size-2xs` の長い別名。

パーツ

パート	説明
`.first-name`	オプション（.last-name と組み合わせて使用）: 与えられた名前をラップし、先頭の一文字に切り詰めます。
`.last-name`	オプション（.first-name と組み合わせて使用）: 姓をラップし、先頭の一文字に切り詰めます。
`.name`	Optional: wrap the full name to clip it to a single leading letter without data-initials or JS.

疑似要素

疑似要素	説明
`::before`	—

使用トークン

Token	型	値
`--instui-component-avatar-ai-bottom-gradient-color`	`<color>`	`#00828E`
`--instui-component-avatar-ai-top-gradient-color`	`<color>`	`#9E58BD`
`--instui-component-avatar-ash-background-color`	`<color>`	LightDark`light-dark(#273540, #1C222B)`
`--instui-component-avatar-ash-text-color`	`<color>`	LightDark`light-dark(#273540, #C7CACD)`
`--instui-component-avatar-background-color`	`<color>`	LightDark`light-dark(#ffffff, #10141A)`
`--instui-component-avatar-blue-background-color`	`<color>`	`#2B7ABC`
`--instui-component-avatar-blue-text-color`	`<color>`	LightDark`light-dark(#2871AF, #7FB4F1)`
`--instui-component-avatar-border-color`	`<color>`	LightDark`light-dark(#8D959F, #6A7883)`
`--instui-component-avatar-border-width-md`	`<length>`	`0.125rem`
`--instui-component-avatar-border-width-sm`	`<length>`	`0.0625rem`
`--instui-component-avatar-font-family`	`[ <font-family-name> \| <generic-font-family> ]#`	`Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif`
`--instui-component-avatar-font-size-lg`	`<length>`	`1.25rem`
`--instui-component-avatar-font-size-md`	`<length>`	`1rem`
`--instui-component-avatar-font-size-sm`	`<length>`	`0.875rem`
`--instui-component-avatar-font-size-xl`	`<length>`	`1.75rem`
`--instui-component-avatar-font-size-xs`	`<length>`	`0.75rem`
`--instui-component-avatar-font-size2xl`	`<length>`	`2.5rem`
`--instui-component-avatar-font-size2xs`	`<length>`	`0.75rem`
`--instui-component-avatar-font-weight`	`<integer>`	`600`
`--instui-component-avatar-green-background-color`	`<color>`	`#03893D`
`--instui-component-avatar-green-text-color`	`<color>`	LightDark`light-dark(#037D37, #61C378)`
`--instui-component-avatar-grey-background-color`	`<color>`	LightDark`light-dark(#4A5B68, #576773)`
`--instui-component-avatar-grey-text-color`	`<color>`	LightDark`light-dark(#4A5B68, #F2F4F5)`
`--instui-component-avatar-orange-background-color`	`<color>`	`#CF4A00`
`--instui-component-avatar-orange-text-color`	`<color>`	LightDark`light-dark(#BB4200, #FF905A)`
`--instui-component-avatar-rectangle-radius`	`<length>`	`0.25rem`
`--instui-component-avatar-red-background-color`	`<color>`	`#E62429`
`--instui-component-avatar-red-text-color`	`<color>`	LightDark`light-dark(#CF1F24, #FA917F)`
`--instui-component-avatar-size-lg`	`<length>`	`3.5rem`
`--instui-component-avatar-size-md`	`<length>`	`3rem`
`--instui-component-avatar-size-sm`	`<length>`	`2.5rem`
`--instui-component-avatar-size-xl`	`<length>`	`4rem`
`--instui-component-avatar-size-xs`	`<length>`	`2rem`
`--instui-component-avatar-size2xl`	`<length>`	`5rem`
`--instui-component-avatar-size2xs`	`<length>`	`1.5rem`
`--instui-component-avatar-text-on-color`	`<color>`	`#ffffff`

tools

ai

platforms

renderers

packages

formats

design

bundlers

plugins

pantoken

postcss

typedoc

vite

コンポーネント

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

ユーティリティ

ルール

Plugins

layout

CSS: avatar

アクセシビリティ

使用法

例

構造

修飾子

パーツ

疑似要素

使用トークン

関連項目

pantoken

postcss

typedoc

vite

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

CSS: avatar ​

アクセシビリティ ​

使用法 ​

例 ​

構造 ​

修飾子 ​

パーツ ​

疑似要素 ​

使用トークン ​

関連項目 ​

CSS: avatar

アクセシビリティ

使用法

例

構造

修飾子

パーツ

疑似要素

使用トークン

関連項目