CSS: avatar

.instui-avatar · stable — Ảnh đại diện người dùng hiển thị chữ viết tắt hoặc hình ảnh, dạng tròn theo mặc định.

Theo mặc định, bảng màu tô chữ viết tắt trên bề mặt trong suốt; -has-inverse-color sẽ điền nền bằng màu và đặt chữ viết tắt cùng màu. Biến thể -color-ai luôn điền bằng gradient tím→xanh biển. Để hiển thị tên đầy đủ, đặt nó trong nội dung (để còn nằm trong cây hỗ trợ truy cập) và thêm data-initials="XX" cho bản hiển thị gọn — văn bản thực là thứ trình đọc màn hình đọc lên. Nếu không có data-initials, nội dung tràn sẽ bị cắt thẳng (không xuống dấu ba chấm); dùng .name để cắt chính xác chỉ giữ chữ cái đầu, hoặc tách thành .first-name/.last-name cho hai chữ cái bị cắt (bất kỳ nửa nào có thể bỏ và nửa kia vẫn giữ căn giữa).

Source: avatar.css

TIP

Nâng cao JS — CSS của component này tự render và hoạt động độc lập; ghép với @pantoken/interactions để thêm hành vi tương tác. Xem bảng modifier phía dưới.

Khả năng truy cập

Cho ảnh đại diện một alt có ý nghĩa (tên người), không dùng "avatar" chung chung; với avatar chỉ chữ viết tắt, ưu tiên nội dung tên thực (văn bản thuần, data-initials, .name, hoặc .first-name/.last-name) hơn là chữ đã viết tắt sẵn, để công nghệ hỗ trợ đọc đúng tên thực.

Sử dụng

css

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

Các ví dụ

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>

Cấu trúc

Avatar hiển thị một trong: <img>, văn bản thuần/data-initials, một wrapper .name, hoặc cặp .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;

Bộ sửa

Bộ sửa	Mô tả
`.-color-accent1`	Không khuyến nghị — use `.-color-blue`.
`.-color-accent2`	Không khuyến nghị — use `.-color-green`.
`.-color-accent3`	Không khuyến nghị — use `.-color-red`.
`.-color-accent4`	Không khuyến nghị — use `.-color-orange`.
`.-color-accent5`	Không khuyến nghị — use `.-color-ash`.
`.-color-accent6`	Không khuyến nghị — use `.-color-grey`.
`.-color-ai`	Màu bảng nhấn AI.
`.-color-ash`	Màu bảng Ash.
`.-color-blue`	Màu bảng Blue.
`.-color-green`	Màu bảng Green.
`.-color-grey`	Màu bảng Grey.
`.-color-orange`	Màu bảng Orange.
`.-color-red`	Màu bảng Red.
`.-has-inverse-color`	Sử dụng màu văn bản đảo ngược (trên nền tối).
`.-shape-rectangle`	Hình vuông (hình chữ nhật) thay vì hình tròn.
`.-show-border`	Alias — maps to `.-show-border-always`.
`.-show-border-always`	Bắt buộc bật vòng viền, ngay cả khi trên ảnh hoặc nền đảo.
`.-show-border-never`	Bắt buộc tắt vòng viền.
`.-size-2xl`	Lớn hơn hai kích thước.
`.-size-2xs`	Nhỏ hơn hai kích thước.
`.-size-large`	Lớn. Bút danh dài của `-size-lg`.
`.-size-lg`	Lớn.
`.-size-md`	Trung bình (mặc định).
`.-size-medium`	Trung bình (mặc định). Bút danh dài của `-size-md`.
`.-size-sm`	Nhỏ.
`.-size-small`	Nhỏ. Bút danh dài của `-size-sm`.
`.-size-x-large`	Cực lớn. Bút danh dài của `-size-xl`.
`.-size-x-small`	Cực nhỏ. Bút danh dài của `-size-xs`.
`.-size-xl`	Cực lớn.
`.-size-xs`	Cực nhỏ.
`.-size-xx-large`	Lớn hơn hai kích thước. Bút danh dài của `-size-2xl`.
`.-size-xx-small`	Nhỏ hơn hai kích thước. Bút danh dài của `-size-2xs`.

Phần

Phần	Mô tả
`.first-name`	Tùy chọn (ghép với .last-name): bao quanh tên đã cho, cắt chỉ giữ chữ cái đầu.
`.last-name`	Tùy chọn (ghép với .first-name): bao quanh họ, cắt chỉ giữ chữ cái đầu.
`.name`	Optional: wrap the full name to clip it to a single leading letter without data-initials or JS.

Phần tử giả

Phần tử giả	Mô tả
`::before`	—

Token tiêu thụ

Token	Kiểu	Giá trị
`--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`

Liên quan

byline — Có thể chứa avatar như hình nhân vật dẫn đầu.

tools

ai

platforms

renderers

packages

formats

design

bundlers

plugins

pantoken

postcss

typedoc

vite

Các thành phần

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

Tiện ích

Quy tắc

Plugins

layout

CSS: avatar

Khả năng truy cập

Sử dụng

Các ví dụ

Cấu trúc

Bộ sửa

Phần

Phần tử giả

Token tiêu thụ

Liên quan

pantoken

postcss

typedoc

vite

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

CSS: avatar ​

Khả năng truy cập ​

Sử dụng ​

Các ví dụ ​

Cấu trúc ​

Bộ sửa ​

Phần ​

Phần tử giả ​

Token tiêu thụ ​

Liên quan ​

CSS: avatar

Khả năng truy cập

Sử dụng

Các ví dụ

Cấu trúc

Bộ sửa

Phần

Phần tử giả

Token tiêu thụ

Liên quan