Nuxt UI DropDownMenuItem avatar size
When replicating Nuxt UI dashboard, there is a teams ref
const teams = ref([{
label: 'Nuxt',
avatar: {
src: 'https://github.com/nuxt.png',
alt: 'Nuxt'
}
}, {
label: 'NuxtHub',
avatar: {
src: 'https://github.com/nuxt-hub.png',
alt: 'NuxtHub'
}
}, {
label: 'NuxtLabs',
avatar: {
src: 'https://github.com/nuxtlabs.png',
alt: 'NuxtLabs'
}
}])
computed like this:
const items = computed<DropdownMenuItem[][]>(() => {
return [teams.value.map(team => ({
...team,
onSelect() {
selectedTeam.value = team
}
})), [{
label: 'Create team',
icon: 'i-lucide-circle-plus'
}, {
label: 'Manage teams',
icon: 'i-lucide-cog'
}]]
})
If I want to make the avatar size bigger, I just add "size" property to the avatar object of team. It works, but I get a type error. What's the right solution for changing the size of DropdownMenuItem avatar?
const teams = ref([{
label: 'Nuxt',
avatar: {
src: 'https://github.com/nuxt.png',
alt: 'Nuxt'
}
}, {
label: 'NuxtHub',
avatar: {
src: 'https://github.com/nuxt-hub.png',
alt: 'NuxtHub'
}
}, {
label: 'NuxtLabs',
avatar: {
src: 'https://github.com/nuxtlabs.png',
alt: 'NuxtLabs'
}
}])
computed like this:
const items = computed<DropdownMenuItem[][]>(() => {
return [teams.value.map(team => ({
...team,
onSelect() {
selectedTeam.value = team
}
})), [{
label: 'Create team',
icon: 'i-lucide-circle-plus'
}, {
label: 'Manage teams',
icon: 'i-lucide-cog'
}]]
})
If I want to make the avatar size bigger, I just add "size" property to the avatar object of team. It works, but I get a type error. What's the right solution for changing the size of DropdownMenuItem avatar?
