Skip to content

Commit

Permalink
feat(menu): icon support function components with items and update de…
Browse files Browse the repository at this point in the history 
…mo (#6457)

* fix(menu): icon do not show problem

* fix(menu): icon do not show problem

* feat(menu): update demo

* test(menu): update demo snap

* chore(Menu): update docs

* test(Menu): update demo

* Update MenuItem.tsx

* Update SubMenu.tsx

---------

Co-authored-by: tangjinzhou <415800467@qq.com>
  • Loading branch information
@CCherry07 @tangjinzhou
CCherry07 and tangjinzhou authored Apr 23, 2023
1 parent b0990b7 commit 8ab50b1
Show file tree
Hide file tree
Showing 17 changed files with 821 additions and 678 deletions.
1 change: 1 addition & 0 deletions components/components.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ export type {
MenuItemProps,
MenuMode,
MenuDividerProps,
ItemType,
} from './menu';
export { default as Menu, MenuDivider, MenuItem, MenuItemGroup, SubMenu } from './menu';

Expand Down
191 changes: 101 additions & 90 deletions components/menu/__tests__/__snapshots__/demo.test.js.snap
View file

Large diffs are not rendered by default.

103 changes: 57 additions & 46 deletions components/menu/demo/horizontal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,54 +17,65 @@ Horizontal top navigation menu.
</docs>

<template>
<a-menu v-model:selectedKeys="current" mode="horizontal">
<a-menu-item key="mail">
<template #icon>
<mail-outlined />
</template>
Navigation One
</a-menu-item>
<a-menu-item key="app" disabled>
<template #icon>
<appstore-outlined />
</template>
Navigation Two
</a-menu-item>
<a-sub-menu key="sub1">
<template #icon>
<setting-outlined />
</template>
<template #title>Navigation Three - Submenu</template>
<a-menu-item-group title="Item 1">
<a-menu-item key="setting:1">Option 1</a-menu-item>
<a-menu-item key="setting:2">Option 2</a-menu-item>
</a-menu-item-group>
<a-menu-item-group title="Item 2">
<a-menu-item key="setting:3">Option 3</a-menu-item>
<a-menu-item key="setting:4">Option 4</a-menu-item>
</a-menu-item-group>
</a-sub-menu>
<a-menu-item key="alipay">
<a href="https://antdv.com" target="_blank" rel="noopener noreferrer">
Navigation Four - Link
</a>
</a-menu-item>
</a-menu>
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { h, ref } from 'vue';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
export default defineComponent({
components: {
MailOutlined,
AppstoreOutlined,
SettingOutlined,
const current = ref<string[]>(['mail']);
const items = ref([
{
key: 'mail',
icon: () => h(MailOutlined),
label: 'Navigation One',
title: 'Navigation One',
},
setup() {
const current = ref<string[]>(['mail']);
return {
current,
};
{
key: 'app',
icon: () => h(AppstoreOutlined),
label: 'Navigation Two',
title: 'Navigation Two',
},
});
{
key: 'sub1',
icon: () => h(SettingOutlined),
label: 'Navigation Three - Submenu',
title: 'Navigation Three - Submenu',
children: [
{
type: 'group',
label: 'Item 1',
children: [
{
label: 'Option 1',
key: 'setting:1',
},
{
label: 'Option 2',
key: 'setting:2',
},
],
},
{
type: 'group',
label: 'Item 2',
children: [
{
label: 'Option 3',
key: 'setting:3',
},
{
label: 'Option 4',
key: 'setting:4',
},
],
},
],
},
{
key: 'alipay',
label: h('a', { href: 'https://antdv.com', target: '_blank' }, 'Navigation Four - Link'),
title: 'Navigation Four - Link',
},
]);
</script>
10 changes: 5 additions & 5 deletions components/menu/demo/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
<inline />
<inline-collapsed />
<sider-current />
<switch-mode />
<theme />
<vertical />
<TemplateSingleFile />
<theme />
<submenu-theme />
<switch-mode />
</demo-sort>
</template>

Expand All @@ -22,7 +22,7 @@ import SiderCurrent from './sider-current.vue';
import SwitchMode from './switch-mode.vue';
import Theme from './theme.vue';
import Vertical from './vertical.vue';
import TemplateSingleFile from './template.vue';
import SubmenuTheme from './submenu-theme.vue';
export default defineComponent({
CN,
Expand All @@ -35,7 +35,7 @@ export default defineComponent({
SwitchMode,
Theme,
Vertical,
TemplateSingleFile,
SubmenuTheme,
},
});
</script>
184 changes: 104 additions & 80 deletions components/menu/demo/inline-collapsed.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,62 +23,22 @@ Here is [a complete demo](/components/layout/#components-layout-demo-side) with
<template>
<div style="width: 256px">
<a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
<MenuUnfoldOutlined v-if="collapsed" />
<MenuUnfoldOutlined v-if="state.collapsed" />
<MenuFoldOutlined v-else />
</a-button>
<a-menu
v-model:openKeys="openKeys"
v-model:selectedKeys="selectedKeys"
v-model:openKeys="state.openKeys"
v-model:selectedKeys="state.selectedKeys"
mode="inline"
theme="dark"
:inline-collapsed="collapsed"
>
<a-menu-item key="1">
<template #icon>
<PieChartOutlined />
</template>
<span>Option 1</span>
</a-menu-item>
<a-menu-item key="2">
<template #icon>
<DesktopOutlined />
</template>
<span>Option 2</span>
</a-menu-item>
<a-menu-item key="3">
<template #icon>
<InboxOutlined />
</template>
<span>Option 3</span>
</a-menu-item>
<a-sub-menu key="sub1">
<template #icon>
<MailOutlined />
</template>
<template #title>Navigation One</template>
<a-menu-item key="5">Option 5</a-menu-item>
<a-menu-item key="6">Option 6</a-menu-item>
<a-menu-item key="7">Option 7</a-menu-item>
<a-menu-item key="8">Option 8</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<template #icon>
<AppstoreOutlined />
</template>
<template #title>Navigation Two</template>
<a-menu-item key="9">Option 9</a-menu-item>
<a-menu-item key="10">Option 10</a-menu-item>
<a-sub-menu key="sub3" title="Submenu">
<a-menu-item key="11">Option 11</a-menu-item>
<a-menu-item key="12">Option 12</a-menu-item>
</a-sub-menu>
</a-sub-menu>
</a-menu>
:inline-collapsed="state.collapsed"
:items="items"
></a-menu>
</div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from 'vue';
<script lang="ts" setup>
import { reactive, watch, h } from 'vue';
import {
MenuFoldOutlined,
MenuUnfoldOutlined,
Expand All @@ -88,39 +48,103 @@ import {
InboxOutlined,
AppstoreOutlined,
} from '@ant-design/icons-vue';
export default defineComponent({
components: {
MenuFoldOutlined,
MenuUnfoldOutlined,
PieChartOutlined,
MailOutlined,
DesktopOutlined,
InboxOutlined,
AppstoreOutlined,
const state = reactive({
collapsed: false,
selectedKeys: ['1'],
openKeys: ['sub1'],
preOpenKeys: ['sub1'],
});
const items = reactive([
{
key: '1',
icon: () => h(PieChartOutlined),
label: 'Option 1',
title: 'Option 1',
},
setup() {
const state = reactive({
collapsed: false,
selectedKeys: ['1'],
openKeys: ['sub1'],
preOpenKeys: ['sub1'],
});
watch(
() => state.openKeys,
(_val, oldVal) => {
state.preOpenKeys = oldVal;
{
key: '2',
icon: () => h(DesktopOutlined),
label: 'Option 2',
title: 'Option 2',
},
{
key: '3',
icon: () => h(InboxOutlined),
label: 'Option 3',
title: 'Option 3',
},
{
key: 'sub1',
icon: () => h(MailOutlined),
label: 'Navigation One',
title: 'Navigation One',
children: [
{
key: '5',
label: 'Option 5',
title: 'Option 5',
},
);
const toggleCollapsed = () => {
state.collapsed = !state.collapsed;
state.openKeys = state.collapsed ? [] : state.preOpenKeys;
};
return {
...toRefs(state),
toggleCollapsed,
};
{
key: '6',
label: 'Option 6',
title: 'Option 6',
},
{
key: '7',
label: 'Option 7',
title: 'Option 7',
},
{
key: '8',
label: 'Option 8',
title: 'Option 8',
},
],
},
});
{
key: 'sub2',
icon: () => h(AppstoreOutlined),
label: 'Navigation Two',
title: 'Navigation Two',
children: [
{
key: '9',
label: 'Option 9',
title: 'Option 9',
},
{
key: '10',
label: 'Option 10',
title: 'Option 10',
},
{
key: 'sub3',
label: 'Submenu',
title: 'Submenu',
children: [
{
key: '11',
label: 'Option 11',
title: 'Option 11',
},
{
key: '12',
label: 'Option 12',
title: 'Option 12',
},
],
},
],
},
]);
watch(
() => state.openKeys,
(_val, oldVal) => {
state.preOpenKeys = oldVal;
},
);
const toggleCollapsed = () => {
state.collapsed = !state.collapsed;
state.openKeys = state.collapsed ? [] : state.preOpenKeys;
};
</script>
Loading

0 comments on commit 8ab50b1

Please sign in to comment.