Couleur Avatar

avatarGitHub à
Un avatar avec une source différente pour le mode lumineux et sombre.

Utilisation

Le composant ColorModeAvatar étend le composant Avatar, de sorte que vous pouvez passer n'importe quelle propriété telle que size, icon, etc.

Utilisez les accessoires light et dark pour définir la source des modes clair et sombre.

<template>
  <UColorModeAvatar light="https://github.com/vuejs.png" dark="https://github.com/nuxt.png" />
</template>
Basculer entre le mode clair et sombre pour voir les différentes images: : u-color-mode-select{size="sm"}

api

Props

Prop Default Type
as
'span'
any

The element or component this component should render as.

light
string
dark
string
color
'neutral'
"primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"
alt
string
decoding
"async" | "auto" | "sync"
height
string | number
loading
"lazy" | "eager"
referrerpolicy
"" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"
sizes
string
srcset
string
usemap
string
width
string | number
crossorigin
"anonymous" | "use-credentials"
icon
any
text
string
size
'md'
"md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl"
chip
boolean | ChipProps
ui
{ root?: SlotClass; image?: SlotClass; fallback?: SlotClass; icon?: SlotClass; }
Ce composant prend également en charge tous les attributs HTML natifs <img>.

Changelog

No recent changes

ContentToc

A sticky Table of Contents with automatic active anchor link highlighting.

ColorModeButton

A Button to switch between light and dark mode.