Avatar

Une personne ou une chose, en disque. Une photo quand il y en a une, une icône ou les initiales sinon, sur une couleur dérivée du nom pour que la même personne garde la même partout.

Utilisation

vue

<script setup lang="ts">
import { VAvatar } from 'vectis-ui'
</script>

<template>
  <VAvatar name="Ada Lovelace" />
</template>

Exemples

Avec une photo

src affiche une photo. name fournit son texte alternatif et les initiales affichées quand le fichier ne peut pas être chargé.

vue

<script setup lang="ts">
import { VAvatar } from 'vectis-ui'

// NASA portrait of astronaut Anna Fisher, 1978. Public domain.
import portrait from '~/assets/img/anna-fisher.jpg'
</script>

<template>
  <VAvatar :src="portrait" name="Anna Fisher" size="lg" />
</template>

Avec une icône

icon affiche une icône à la place des initiales. alt nomme l'avatar quand aucun name n'est donné.

vue

<script setup lang="ts">
import { VAvatar } from 'vectis-ui'
import { code, notifications, table_chart as tableChart } from 'vectis-ui/icons'
</script>

<template>
  <VAvatar :icon="code" alt="Build bot" />
  <VAvatar :icon="notifications" alt="System alerts" />
  <VAvatar :icon="tableChart" alt="Nightly report" />
</template>

Initiales et couleur automatique

Sans photo ni icône, le disque affiche les initiales de name sur une couleur dérivée de celui-ci.

vue

<script setup lang="ts">
import { VAvatar } from 'vectis-ui'
</script>

<template>
  <VAvatar name="Ada Lovelace" />
  <VAvatar name="Grace Hopper" />
  <VAvatar name="Alan Turing" />
</template>

Tailles

size définit le diamètre : 24, 32, 40, 48 ou 56 pixels. Le contenu suit.

vue

<script setup lang="ts">
import { VAvatar } from 'vectis-ui'
</script>

<template>
  <VAvatar name="Ada Lovelace" size="xs" />
  <VAvatar name="Ada Lovelace" size="sm" />
  <VAvatar name="Ada Lovelace" size="md" />
  <VAvatar name="Ada Lovelace" size="lg" />
  <VAvatar name="Ada Lovelace" size="xl" />
</template>

Compact

compact réduit le diamètre de 4px.

vue

<script setup lang="ts">
import { VAvatar } from 'vectis-ui'
</script>

<template>
  <VAvatar name="Ada Lovelace" size="sm" />
  <VAvatar name="Ada Lovelace" size="sm" compact />
  <VAvatar name="Ada Lovelace" size="md" />
  <VAvatar name="Ada Lovelace" size="md" compact />
  <VAvatar name="Ada Lovelace" size="lg" />
  <VAvatar name="Ada Lovelace" size="lg" compact />
</template>

Couleur personnalisée

color remplace la couleur dérivée du nom. L'hexadécimal, un nom de couleur CSS et oklch() sont acceptés.

vue

<script setup lang="ts">
import { VAvatar } from 'vectis-ui'
</script>

<template>
  <VAvatar name="Vectis UI" color="#6d28d9" />
  <VAvatar name="Atlas" color="teal" />
  <VAvatar name="Meridian" color="oklch(0.55 0.18 25)" />
</template>

Boutons et liens

clickable rend un <button> et href un <a>, l'adresse l'emportant quand les deux sont donnés. disabled rend l'avatar inerte.

vue

Profile opened 0 times

<script setup lang="ts">
import { ref } from 'vue'
import { VAvatar, VTypography } from 'vectis-ui'

const opened = ref(0)
</script>

<template>
  <VAvatar name="Ada Lovelace" clickable @click="opened += 1" />
  <VAvatar name="Grace Hopper" href="#usage" />
  <VAvatar name="Alan Turing" href="#usage" disabled />
  <VTypography variant="body-sm" tone="muted">Profile opened {{ opened }} times</VTypography>
</template>

Une VTooltip a besoin d'un déclencheur focalisable : rendez l'avatar clickable ou lien, puis liez les triggerProps de l'infobulle dessus.

vue

<script setup lang="ts">
import { VAvatar, VTooltip } from 'vectis-ui'
</script>

<template>
  <VTooltip text="Ada Lovelace, on call until Friday">
    <template #default="{ triggerProps }">
      <VAvatar name="Ada Lovelace" clickable v-bind="triggerProps" />
    </template>
  </VTooltip>
</template>

API

Props

Prop	Type	Défaut
`src`	`string`	aucune
La photo à afficher. Elle est préférée à tout le reste, et une image qui échoue à se charger passe la main à l'icône ou aux initiales plutôt que de laisser un trou.
`icon`	`IconSource`	aucune
L'icône à afficher quand il n'y a pas de photo. Elle passe avant les initiales : un avatar à qui on donne une icône et un nom montre l'icône.
`name`	`string`	aucune
Le nom complet. Il fait trois choses à la fois : il nomme l'avatar pour les technologies d'assistance, ses initiales sont ce qui s'affiche sans photo ni icône, et il est la graine dont la couleur automatique est dérivée.
`alt`	`string`	aucune
Le nom accessible, quand il ne doit pas être simplement le nom : un avatar représentant une équipe plutôt qu'une personne, par exemple. Il l'emporte sur `name`, et votre propre `aria-label` l'emporte sur lui. Sur une photo, c'est le texte `alt` de l'image.
`color`	`string`	aucune
Une couleur à vous, en hexadécimal, en nom CSS ou en `oklch()`. Elle remplace la teinte autrement dérivée de `name`, et le texte posé dessus est toujours blanc : une couleur claire reste donc à votre charge.
`size`	`AvatarSize'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
Le diamètre du disque, tiré de l'échelle de tailles partagée par tous les contrôles. Omise dans un VAvatarGroup, elle prend celle du groupe ; seul, l'avatar est en `md`.
`compact`	`boolean`	`false`
Retire 4px au diamètre, comme sur tous les autres contrôles. Contrairement à la taille, elle se cumule : dans un VAvatarGroup compact, l'avatar est compact quoi que dise cette prop.
`href`	`string`	aucune
Transforme l'avatar en `<a>` pointant vers cette adresse. Un lien désactivé devient inerte : l'adresse est retirée, si bien qu'il ne peut être ni focalisé ni suivi.
`clickable`	`boolean`	`false`
Transforme l'avatar en `<button>`. Cette prop est ignorée dès que `href` en fait un lien.
`disabled`	`boolean`	`false`
Rend un avatar interactif inutilisable : il cesse de répondre, quitte l'ordre de tabulation et se grise. Elle ne dit rien sur un avatar simple, qui n'a jamais été interactif.

Slots

Slot	Type
`default`	`{}`
Du contenu qui remplace les initiales.

Types

Les types que les tables ci-dessus nomment, écrits comme la librairie les déclare. Ceux qui portent export s'importent depuis vectis-ui pour typer votre propre code ; les autres décrivent la forme de ce qu'un slot fournit.

export interface BuiltinIcon {
  name: string
  paths: readonly [string] | readonly [string, string]
}

export type IconRender =
  | { path: string; viewBox?: string }
  | { component: Component; props?: Record<string, unknown> }
  | { src: string }
  | { text: string; class?: string }
  | { class: string }

export type IconSource = string | BuiltinIcon | IconRender

Variables CSS

Token	Valeur
`--vectis-control-size-avatar-ring`	`2px`