介绍
本文档主要用于描述 ShadcnAvatar 组件的一些特性和用法。
用法
查看代码
vue
<template>
<ShadcnAvatar src="https://cdn.north.devlive.org/devlive.org/2024-04-17/2F28BD8A-5AB4-46BA-B614-287A0020FAE7.png"/>
</template>
<script setup lang="ts">
</script>替换文本 (alt)
查看代码
vue
<template>
<ShadcnAvatar src="" alt="UI" />
</template>
<script setup lang="ts">
</script>尺寸 (size)
查看代码
vue
<template>
<ShadcnAvatar src="https://cdn.north.devlive.org/devlive.org/2024-04-17/2F28BD8A-5AB4-46BA-B614-287A0020FAE7.png" size="large" />
<ShadcnAvatar src="https://cdn.north.devlive.org/devlive.org/2024-04-17/2F28BD8A-5AB4-46BA-B614-287A0020FAE7.png" size="default" />
<ShadcnAvatar src="https://cdn.north.devlive.org/devlive.org/2024-04-17/2F28BD8A-5AB4-46BA-B614-287A0020FAE7.png" size="small" />
</template>
<script setup lang="ts">
</script>方形 (square)
查看代码
vue
<template>
<ShadcnAvatar src="" square />
</template>
<script setup lang="ts">
</script>组 (group)
查看代码
vue
<template>
<ShadcnAvatarGroup :items="items" />
<ShadcnAvatarGroup :items="items" size="small"/>
<ShadcnAvatarGroup :items="items" size="large"/>
<ShadcnAvatarGroup :items="items" square/>
<ShadcnAvatarGroup :items="items" max="2"/>
</template>
<script setup lang="ts">
const items = [
{ src: 'https://cdn.north.devlive.org/devlive.org/2024-04-17/2F28BD8A-5AB4-46BA-B614-287A0020FAE7.png', name: 'User 1' },
{ src: 'https://cdn.north.devlive.org/devlive.org/2024-04-17/2F28BD8A-5AB4-46BA-B614-287A0020FAE7.png', name: 'User 2' },
{ src: 'https://cdn.north.devlive.org/devlive.org/2024-04-17/2F28BD8A-5AB4-46BA-B614-287A0020FAE7.png', name: 'User 3' },
{ src: 'https://cdn.north.devlive.org/devlive.org/2024-04-17/2F28BD8A-5AB4-46BA-B614-287A0020FAE7.png', name: 'User 4' },
{ src: 'https://cdn.north.devlive.org/devlive.org/2024-04-17/2F28BD8A-5AB4-46BA-B614-287A0020FAE7.png', name: 'User 5' }
]
</script>