颜色模式头像

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

用法

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

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

亮色

暗色

<template>
  <UColorModeAvatar light="https://github.com/vuejs.png" dark="https://github.com/nuxt.png" />
</template>

在亮色和暗色模式之间切换以查看不同的图片

属性	默认值	类型
`as`	`'span'`	`any` 此组件应渲染为的元素或组件。
`亮色`		`string`
`暗色`		`string`
`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`
`图标`		`any`
`文本`		`string`
`尺寸`	`'md'`	`"md" \| "3xs" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl"`
`chip`		`boolean \| ChipProps`
`ui`		`{ root?: ClassNameValue; image?: ClassNameValue; fallback?: ClassNameValue; icon?: ClassNameValue; }`

此组件还支持所有原生 <img> HTML 属性。

5b177— feat: 扩展原生 HTML 属性 (#5348)

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

ContentToc

一个带有自动活动锚点链接高亮显示的粘性目录。

ColorModeButton

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