CSS: avatar

.instui-avatar · stable — 用戶頭像，顯示姓名首字母或圖片，預設為圓形。

預設情況下，調色盤顏色會為透明背景上的縮寫上色；-has-inverse-color 會以該顏色填滿背景，並將縮寫置於同色上。-color-ai 變體則恆定以紫色→海色漸層填滿。若要顯示完整名稱，請將其放在內容中（以保留於無障礙樹中），並為緊湊視覺加上 data-initials="XX" —— 真正會被螢幕閱讀器朗讀的是完整文字。若沒有 data-initials，溢出的內容會直接硬性裁切（不會顯示省略號）；如需精確以單一首字母裁切，將其包在 .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>、bare/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`	藍色調色盤顏色。
`.-color-green`	綠色調色盤顏色。
`.-color-grey`	灰色調色盤的顏色。
`.-color-orange`	橙色調色盤顏色。
`.-color-red`	調色盤中的紅色。
`.-has-inverse-color`	使用反色（適用於深色背景）的文字顏色。
`.-shape-rectangle`	方形（矩形）而非圓形。
`.-show-border`	Alias — maps to `.-show-border-always`.
`.-show-border-always`	強制顯示外圈邊框，即使覆蓋在圖片上或反向填色上也會顯示。
`.-show-border-never`	強制關閉邊框環。
`.-size-2xl`	大兩號。
`.-size-2xs`	小兩號。
`.-size-large`	大型。`-size-lg` 的長形式別名。
`.-size-lg`	大。
`.-size-md`	中等（預設）。
`.-size-medium`	中等（預設）。`-size-md` 的長形式別名。
`.-size-sm`	小。
`.-size-small`	小。`-size-sm` 的長形式別名。
`.-size-x-large`	超大。`-size-xl` 的長形式別名。
`.-size-x-small`	超小。`-size-xs` 的長形式別名。
`.-size-xl`	超大。
`.-size-xs`	超小。
`.-size-xx-large`	大兩個尺寸。`-size-2xl` 的長形式別名。
`.-size-xx-small`	比原來小兩個尺寸。為 `-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

無障礙

使用方法

範例

結構

修飾器

部件

偽元素

已使用的代幣

相關