介绍
本文档主要用于描述 ShadcnMenu 组件的一些特性和用法。
用法
查看代码
vue
<template>
<ShadcnMenu>
<ShadcnMenuItem name="home">
<template #icon>
<ShadcnIcon icon="Home"/>
</template>
Home
</ShadcnMenuItem>
<ShadcnMenuSub name="profileSub">
<template #title>Profile</template>
<template #icon>
<ShadcnIcon icon="User"/>
</template>
<ShadcnMenuGroup name="settingGroup">
<template #title>Settings</template>
<ShadcnMenuItem name="username">Change Username</ShadcnMenuItem>
<ShadcnMenuItem name="password">Change Password</ShadcnMenuItem>
</ShadcnMenuGroup>
</ShadcnMenuSub>
<ShadcnMenuItem name="email">Change Email</ShadcnMenuItem>
<ShadcnMenuItem name="logout">
<template #icon>
<ShadcnIcon icon="LogOut"/>
</template>
Logout
</ShadcnMenuItem>
</ShadcnMenu>
</template>宽度 (width)
查看代码
vue
<template>
<ShadcnMenu width="300">
<ShadcnMenuItem name="home">
<template #icon>
<ShadcnIcon icon="Home"/>
</template>
Home
</ShadcnMenuItem>
<ShadcnMenuSub name="profileSub">
<template #title>Profile</template>
<template #icon>
<ShadcnIcon icon="User"/>
</template>
<ShadcnMenuGroup name="settingGroup">
<template #title>Settings</template>
<ShadcnMenuItem name="username">Change Username</ShadcnMenuItem>
<ShadcnMenuItem name="password">Change Password</ShadcnMenuItem>
</ShadcnMenuGroup>
</ShadcnMenuSub>
<ShadcnMenuItem name="email">Change Email</ShadcnMenuItem>
<ShadcnMenuItem name="logout">
<template #icon>
<ShadcnIcon icon="LogOut"/>
</template>
Logout
</ShadcnMenuItem>
</ShadcnMenu>
</template>方向 (direction)
查看代码
vue
<template>
<ShadcnMenu direction="horizontal">
<ShadcnMenuItem name="home">
<template #icon>
<ShadcnIcon icon="Home"/>
</template>
Home
</ShadcnMenuItem>
<ShadcnMenuSub name="profileSub">
<template #title>Profile</template>
<template #icon>
<ShadcnIcon icon="User"/>
</template>
<ShadcnMenuGroup name="settingGroup">
<template #title>Settings</template>
<ShadcnMenuItem name="username">Change Username</ShadcnMenuItem>
<ShadcnMenuItem name="password">Change Password</ShadcnMenuItem>
</ShadcnMenuGroup>
</ShadcnMenuSub>
<ShadcnMenuItem name="email">Change Email</ShadcnMenuItem>
<ShadcnMenuItem name="logout">
<template #icon>
<ShadcnIcon icon="LogOut"/>
</template>
Logout
</ShadcnMenuItem>
</ShadcnMenu>
</template>触发方式 (trigger)
支持点击和悬停两种触发方式。
查看代码
vue
<template>
<ShadcnMenu direction="horizontal" trigger="hover">
<ShadcnMenuItem name="home">
<template #icon>
<ShadcnIcon icon="Home"/>
</template>
Home
</ShadcnMenuItem>
<ShadcnMenuSub name="profileSub">
<template #title>Profile</template>
<template #icon>
<ShadcnIcon icon="User"/>
</template>
<ShadcnMenuGroup name="settingGroup">
<template #title>Settings</template>
<ShadcnMenuItem name="username">Change Username</ShadcnMenuItem>
<ShadcnMenuItem name="password">Change Password</ShadcnMenuItem>
</ShadcnMenuGroup>
</ShadcnMenuSub>
<ShadcnMenuItem name="email">Change Email</ShadcnMenuItem>
</ShadcnMenu>
</template>液态玻璃效果 (glass)
:::
查看代码
vue
<template>
<div class="p-6 rounded-lg bg-gradient-to-r from-blue-400 to-purple-400">
<div class="p-8 rounded-lg bg-white/50">
<ShadcnMenu glass>
<ShadcnMenuItem name="home">
<template #icon>
<ShadcnIcon icon="Home"/>
</template>
首页
</ShadcnMenuItem>
<ShadcnMenuSub name="products">
<template #title>产品</template>
<template #icon>
<ShadcnIcon icon="Package"/>
</template>
<ShadcnMenuItem name="product-1">产品 1</ShadcnMenuItem>
<ShadcnMenuItem name="product-2">产品 2</ShadcnMenuItem>
<ShadcnMenuItem name="product-3">产品 3</ShadcnMenuItem>
</ShadcnMenuSub>
<ShadcnMenuSub name="services">
<template #title>服务</template>
<template #icon>
<ShadcnIcon icon="Settings"/>
</template>
<ShadcnMenuItem name="service-1">服务 1</ShadcnMenuItem>
<ShadcnMenuItem name="service-2">服务 2</ShadcnMenuItem>
</ShadcnMenuSub>
<ShadcnMenuItem name="about">
<template #icon>
<ShadcnIcon icon="Info"/>
</template>
关于
</ShadcnMenuItem>
</ShadcnMenu>
</div>
</div>
</template>
<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'
const { isDark } = useData()
const darkMode = computed(() => isDark.value)
</script>自定义插槽
ShadcnMenuSub 支持 header 插槽，可以完全自定义子菜单的标题部分。
查看代码
vue
<template>
<ShadcnMenu direction="horizontal">
<ShadcnMenuItem name="home">
<template #icon>
<ShadcnIcon icon="Home"/>
</template>
Home
</ShadcnMenuItem>
<ShadcnMenuSub name="profileSub">
<template #header="{ expanded, hasActiveChild }">
<div class="flex items-center gap-2">
<ShadcnIcon icon="User"/>
<span :class="{ 'font-bold': hasActiveChild }">Custom Profile</span>
<span v-if="expanded" class="text-xs">▼</span>
</div>
</template>
<ShadcnMenuItem name="username">Change Username</ShadcnMenuItem>
<ShadcnMenuItem name="email">Change Email</ShadcnMenuItem>
</ShadcnMenuSub>
</ShadcnMenu>
</template>