KleurModeAvatar

AvatarGitHub
Een Avatar met een andere bron voor lichte en donkere modus.

Gebruik

De ColorModeAvatar-component breidt de Avatar -component uit, zodat u elke eigenschap zoals size, icon, enz. Kunt doorgeven.

Gebruik de light- en dark-rekwisieten om de bron voor de lichte en donkere modus te definiëren.

<template>
  <UColorModeAvatar light="https://github.com/vuejs.png" dark="https://github.com/nuxt.png" />
</template>
Schakel tussen de lichte en donkere modus om de verschillende afbeeldingen te zien::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; }
Dit onderdeel ondersteunt ook alle native <img> HTML-kenmerken.

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.