ColorModeAvatar

AvatarGitLab
Um Avatar com uma origem diferente para os modos claro e escuro.

Uso

O componente ColorModeAvatar estende o componente Avatar, então você pode passar qualquer propriedade como size, icon, etc.

Use as props light e dark para definir a origem para os modos claro e escuro.

<template>
  <NColorModeAvatar light="https://github.com/vuejs.png" dark="https://github.com/nuxt.png" />
</template>
Alterne entre os modos claro e escuro para ver as diferentes imagens:

API

Props

Prop Default Type
as'span'any

The element or component this component should render as.

lightstring
darkstring
color'neutral' "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "error" | "neutral"
alt string
crossorigin "" | "anonymous" | "use-credentials"
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
iconany
text string
size'md' "md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl"
chipboolean | ChipProps
ui { root?: SlotClass; image?: SlotClass; fallback?: SlotClass; icon?: SlotClass; }
Este componente também suporta todos os atributos HTML nativos de <img>.

Changelog

No recent changes

ContentToc

Um sumário fixo com destaque automático do link de âncora ativo.

ColorModeButton

Um Button para alternar entre os modos claro e escuro.