CSS: avatar

.instui-avatar · stable — Ένα avatar χρήστη που δείχνει αρχικά ή εικόνα, κυκλικό από προεπιλογή.

Εξ ορισμού, το χρώμα της παλέτας βαφτίζει τα αρχικά πάνω σε διαφανή επιφάνεια· το -has-inverse-color γεμίζει την επιφάνεια με το χρώμα και τοποθετεί τα αρχικά με το ίδιο χρώμα. Η παραλλαγή -color-ai πάντα γεμίζει με το βαθμιαίο χρώμα από βιολετί σε θάλασσα. Για πλήρες εμφανιζόμενο όνομα, τοποθετήστε το στο περιεχόμενο (έτσι παραμένει στο δέντρο προσβασιμότητας) και προσθέστε data-initials="XX" για την συμπαγή εμφάνιση — το πραγματικό κείμενο είναι αυτό που ανακοινώνει ο αναγνώστης οθόνης. Χωρίς data-initials, το υπερρευστό περιεχόμενο απλώς κόβεται σκληρά (χωρίς αποσιωπητικά); τυλίξτε το σε .name για ακριβές κλάσμα ενός μόνο γράμματος στην αρχή, ή διαχωρίστε το σε .first-name/.last-name για δύο κλιπαρισμένα γράμματα (μπορεί να παραληφθεί οποιοδήποτε από τα δύο και το άλλο παραμένει κεντραρισμένο).

Source: avatar.css

TIP

Ενίσχυση JS — Το CSS αυτού του στοιχείου αποδίδει και λειτουργεί από μόνο του· συνδυάστε το με @pantoken/interactions για να προσθέσετε τη διαδραστική συμπεριφορά. Δείτε τον πίνακα τροποποιητών παρακάτω.

Προσβασιμότητα

Δώστε σε ένα avatar εικόνας ένα περιγραφικό alt (το όνομα του ατόμου), όχι ένα γενικό «avatar»· για avatars μόνο με αρχικά, προτιμήστε το πραγματικό όνομα ως περιεχόμενο (γυμνό κείμενο, data-initials, .name, ή .first-name/.last-name) αντί για προ-συντομευμένα γράμματα, ώστε οι βοηθητικές τεχνολογίες να ανακοινώνουν το πραγματικό όνομα.

Χρήση

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

Παραδείγματα

<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>

Δομή

Το avatar εμφανίζει ένα από: ένα <img>, γυμνό/ data-initials κείμενο, ένα wrapper .name, ή ένα ζεύγος .first-name/.last-name.

.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	Δύο μεγέθη μεγαλύτερο.
.-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	—

Καταναλωμένα tokens

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>	LightDarklight-dark(#273540, #1C222B)
--instui-component-avatar-ash-text-color	<color>	LightDarklight-dark(#273540, #C7CACD)
--instui-component-avatar-background-color	<color>	LightDarklight-dark(#ffffff, #10141A)
--instui-component-avatar-blue-background-color	<color>	#2B7ABC
--instui-component-avatar-blue-text-color	<color>	LightDarklight-dark(#2871AF, #7FB4F1)
--instui-component-avatar-border-color	<color>	LightDarklight-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>	LightDarklight-dark(#037D37, #61C378)
--instui-component-avatar-grey-background-color	<color>	LightDarklight-dark(#4A5B68, #576773)
--instui-component-avatar-grey-text-color	<color>	LightDarklight-dark(#4A5B68, #F2F4F5)
--instui-component-avatar-orange-background-color	<color>	#CF4A00
--instui-component-avatar-orange-text-color	<color>	LightDarklight-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>	LightDarklight-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

Σχετιζόμενα

• byline — Μπορεί να φιλοξενήσει ένα avatar ως την ηγετική φιγούρα του.