ColorModeAvatarPRO

AvatarGitHub
一个在亮色和暗色模式下显示不同源的头像组件。

用法

ColorModeAvatar 组件扩展了 Avatar 组件，因此你可以传递任意属性，例如 size、icon 等。

使用 light 和 dark 属性来定义亮色和暗色模式下的源。

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

API

属性

属性默认值类型
as

'span'

any

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

亮色模式

string

暗色模式

string

icon

string

size

'md'

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

alt

string

text

string

ui

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

Collapsible

一个可折叠元素，用于切换其内容的可见性。

ColorModeButton

一个用于在亮色和暗色模式之间切换的按钮。