CSS: avatar

.instui-avatar · stable — Avatar úsáideora ag taispeáint tosaíochtaí nó íomhá, ciorclach de réir réamhshocraithe.

De ghnáth cuireann dath an phailéad scáth ar na tosaíochtaí ar dhromchla trédhearcach; líonann -has-inverse-color an dromchla leis an dath agus cuireann sé na tosaíochtaí ar-dath. Tá an éagsúlacht -color-ai i gcónaí lán-líonaithe leis an gcaidreamh violete→farraige. Chun ainm taispeána iomlán, cuir é sa chontúirteacht (ionas go fanfaidh sé i gcrann inacmhainneachta) agus cuir data-initials="XX" don amharc dlúth — is é an téacs fíor an rud a fhógraíonn léitheoir scáileáin. Gan data-initials, ghearrtar ábhar róshaothrach go géar (gan luachan); corraigh é i .name le haghaidh gearradh aonlitreach beacht ar an litir thosaigh, nó roinnt é i .first-name/.last-name le haghaidh beirt litreacha gearrtha (is féidir leath ar bith a chur as feidhm agus fanann an ceann eile lárnach).

Source: avatar.css

TIP

Feabhsú JS — Cuireann CSS an chomhpháirte seo léiriú agus oibríocht air dá chuid féin; comhcheangail é le @pantoken/interactions chun an iompar idirghníomhach a chur leis. Féach an tábla modhnóirí thíos.

Inrochtaineacht

Tabhair alt bríúil (ainm an duine) ar avatar íomhá, ní "avatar" ghinearálta; do avatars le tosaíochtaí amháin, is fearr ábhar ainm fíor (téacs lom, data-initials, .name, nó .first-name/.last-name) thar litreacha réamhbhríoma, ionas go bhfógraíonn teicneolaíocht chabhrach an ainm fíor.

Úsáid

css

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

Samplaí

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>

Struchtúr

Taispeánann an avatar ceann amháin de: <img>, téacs lom/data-initials, .name wrap, nó péire .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;

Modhnóirí

Modhnóir	Cur síos
`.-color-accent1`	As dáta — use `.-color-blue`.
`.-color-accent2`	As dáta — use `.-color-green`.
`.-color-accent3`	As dáta — use `.-color-red`.
`.-color-accent4`	As dáta — use `.-color-orange`.
`.-color-accent5`	As dáta — use `.-color-ash`.
`.-color-accent6`	As dáta — use `.-color-grey`.
`.-color-ai`	Dath phailéad béim AI.
`.-color-ash`	Dath phailéad liath-adharcach (ash).
`.-color-blue`	Dath phailéad gorm.
`.-color-green`	Dath phailéad glas.
`.-color-grey`	Dath phailéad liath.
`.-color-orange`	Dath phailéad oráiste.
`.-color-red`	Dath phailéad dearg.
`.-has-inverse-color`	Úsáid an dath téacs idirdhealaithigh (ar-dorcha).
`.-shape-rectangle`	Cruth cearnach (réitigh) in áit ciorclach.
`.-show-border`	Alias — maps to `.-show-border-always`.
`.-show-border-always`	Déan an fáinne teorann a neartú, fiú thar íomhá nó líonadh idirdhealaithigh.
`.-show-border-never`	Cas an fáinne teorann as.
`.-size-2xl`	Dhá mhéide níos mó.
`.-size-2xs`	Dhá mhéide níos lú.
`.-size-large`	Mór. Ainm fhadaaistear de `-size-lg`.
`.-size-lg`	Mór.
`.-size-md`	Meán (an réamhshocrú).
`.-size-medium`	Meán (an réamhshocrú). Ainm fhadaaistear de `-size-md`.
`.-size-sm`	Beag.
`.-size-small`	Beag. Ainm fhadaaistear de `-size-sm`.
`.-size-x-large`	Breise-mhór. Ainm fhadaaistear de `-size-xl`.
`.-size-x-small`	Breise-beag. Ainm fhadaaistear de `-size-xs`.
`.-size-xl`	Breise-mhór.
`.-size-xs`	Breise-beag.
`.-size-xx-large`	Dhá mhéide níos mó. Ainm fhadaaistear de `-size-2xl`.
`.-size-xx-small`	Dhá mhéide níos lú. Ainm fhadaaistear de `-size-2xs`.

Codanna

Cuid	Cur síos
`.first-name`	Roghnach (péire le .last-name): fill isteach an t-ainm tugtha, gearrtha go dtí a litir thosaigh.
`.last-name`	Roghnach (péire le .first-name): fill isteach an sloinne, gearrtha go dtí a litir thosaigh.
`.name`	Optional: wrap the full name to clip it to a single leading letter without data-initials or JS.

Fo-eilimintí

Fo-eilimint	Cur síos
`::before`	—

Tóicíní a úsáideadh

Token	Cineál	Luach
`--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`

Gaolmhar

byline — Is féidir a bheith mar óstach ar avatar mar a fhigiúr laoch tosaigh.

tools

ai

platforms

renderers

packages

formats

design

bundlers

plugins

pantoken

postcss

typedoc

vite

Comhpháirteanna

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

Uirlisí

Rialacha

Plugins

layout

CSS: avatar

Inrochtaineacht

Úsáid

Samplaí

Struchtúr

Modhnóirí

Codanna

Fo-eilimintí

Tóicíní a úsáideadh

Gaolmhar

pantoken

postcss

typedoc

vite

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

CSS: avatar ​

Inrochtaineacht ​

Úsáid ​

Samplaí ​

Struchtúr ​

Modhnóirí ​

Codanna ​

Fo-eilimintí ​

Tóicíní a úsáideadh ​

Gaolmhar ​

CSS: avatar

Inrochtaineacht

Úsáid

Samplaí

Struchtúr

Modhnóirí

Codanna

Fo-eilimintí

Tóicíní a úsáideadh

Gaolmhar