Files
ui/docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue
2023-07-30 16:12:41 +02:00

26 lines
601 B
Vue

<script setup>
const links = [{
avatar: {
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
},
label: 'Benjamin Canac'
}, {
label: 'KeJun'
}]
const { ui } = useAppConfig()
</script>
<template>
<UVerticalNavigation :links="links">
<template #avatar="{ link }">
<UAvatar
v-if="link.avatar"
v-bind="{ size: ui.verticalNavigation.avatar.size, ...link.avatar }"
:class="[ui.verticalNavigation.avatar.base]"
/>
<UIcon v-else name="i-heroicons-user-circle-20-solid" class="text-lg" />
</template>
</UVerticalNavigation>
</template>