ColorModeAvatar의 지도

빛과 어둠 모드를 위한 다른 소스를 가진 아바타.

Usage

ColorModeAvatar 구성 요소는 Avatar 구성 요소를 확장하므로 size, icon 등과 같은 속성을 전달할 수 있습니다.

light 및 dark 소품을 사용하여 밝은 모드와 어두운 모드의 소스를 정의합니다.

light

dark

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

밝은 모드와 어두운 모드 사이를 전환하여 다른 이미지를 확인합니다.

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; }`

이 구성 요소는 모든 기본 <img> HTML 속성도 지원합니다.

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.