颜色模式头像

AvatarGitHub
一个在浅色和深色模式下具有不同来源的头像。

用法

ColorModeAvatar 组件扩展了 Avatar 组件,因此您可以传递任何属性,例如 sizeicon 等。

使用 lightdark 属性来定义浅色和深色模式的来源。

<template>
  <UColorModeAvatar light="https://github.com/vuejs.png" dark="https://github.com/nuxt.png" />
</template>
在浅色和深色模式之间切换以查看不同的图像

API

属性

属性默认值类型
as

'span'

any

此组件应渲染为的元素或组件。

light

string

dark

string

alt

string

图标

字符串 | 对象

文本

string

尺寸

'md'

"md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl"

chip

boolean | ChipProps

ui

{ root?: ClassNameValue; image?: ClassNameValue; fallback?: ClassNameValue; icon?: ClassNameValue; }

更新日志

5cb65— 特性:导入 @nuxt/ui-pro 组件