github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(menu): icon support function components with items and update demo (#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>
pull/6514/head
Cherry7 2023-04-23 14:23:15 +08:00 committed by GitHub
parent b0990b7323
commit 8ab50b1757
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 823 additions and 680 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/components.ts
View File

@ -116,6 +116,7 @@ export type {
MenuItemProps, MenuItemProps,
MenuMode, MenuMode,
MenuDividerProps, MenuDividerProps,
ItemType,
} from './menu'; } from './menu';
export { default as Menu, MenuDivider, MenuItem, MenuItemGroup, SubMenu } from './menu'; export { default as Menu, MenuDivider, MenuItem, MenuItemGroup, SubMenu } from './menu';

191
components/menu/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,19 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/menu/demo/horizontal.vue correctly 1`] = ` exports[`renders ./components/menu/demo/horizontal.vue correctly 1`] = `
<ul class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-light" role="menu" data-menu-list="true"> <ul class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-light css-dev-only-do-not-override-1tii49m" role="menu" data-menu-list="true">
<!----> <!---->
<li class="ant-menu-overflow-item ant-menu-item ant-menu-item-selected" style="opacity: 1; order: 0;" role="menuitem" tabindex="-1" data-menu-id="mail" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content"> Navigation One </span></li> <li class="ant-menu-overflow-item ant-menu-item ant-menu-item-selected" style="opacity: 1; order: 0;" role="menuitem" tabindex="-1" data-menu-id="mail" aria-disabled="false" title="Navigation One"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content">Navigation One</span></li>
<!----> <!---->
<li class="ant-menu-overflow-item ant-menu-item ant-menu-item-disabled" style="opacity: 1; order: 1;" role="menuitem" data-menu-id="app" aria-disabled="true"><span role="img" aria-label="appstore" class="anticon anticon-appstore ant-menu-item-icon"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span class="ant-menu-title-content"> Navigation Two </span></li> <li class="ant-menu-overflow-item ant-menu-item" style="opacity: 1; order: 1;" role="menuitem" tabindex="-1" data-menu-id="app" aria-disabled="false" title="Navigation Two"><span role="img" aria-label="appstore" class="anticon anticon-appstore ant-menu-item-icon"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span class="ant-menu-title-content">Navigation Two</span></li>
<li class="ant-menu-overflow-item ant-menu-submenu ant-menu-submenu-horizontal" style="opacity: 1; order: 2;" role="none" data-submenu-id="sub1"> <li class="ant-menu-overflow-item ant-menu-submenu ant-menu-submenu-horizontal" style="opacity: 1; order: 2;" role="none" data-submenu-id="sub1">
<!----> <!---->
<div class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_1_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="setting" class="anticon anticon-setting ant-menu-item-icon"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span class="ant-menu-title-content">Navigation Three - Submenu</span><i class="ant-menu-submenu-arrow"></i></div> <div class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_1_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="setting" class="anticon anticon-setting ant-menu-item-icon"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span class="ant-menu-title-content">Navigation Three - Submenu</span><i class="ant-menu-submenu-arrow"></i></div>
<!----> <!---->
</li> </li>
<!----> <!---->
<li class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child" style="opacity: 1; order: 3;" role="menuitem" tabindex="-1" data-menu-id="alipay" aria-disabled="false"> <li class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child" style="opacity: 1; order: 3;" role="menuitem" tabindex="-1" data-menu-id="alipay" aria-disabled="false" title="Navigation Four - Link">
<!----><span class="ant-menu-title-content"><a href="https://antdv.com" target="_blank" rel="noopener noreferrer"> Navigation Four - Link </a></span> <!----><span class="ant-menu-title-content"><a href="https://antdv.com" target="_blank">Navigation Four - Link</a></span>
</li> </li>
<li class="ant-menu-overflow-item ant-menu-overflow-item ant-menu-overflow-item-rest ant-menu-submenu ant-menu-submenu-horizontal" style="opacity: 0; height: 0px; overflow-y: hidden; order: 9007199254740991; pointer-events: none; position: absolute;" aria-hidden="true" role="none" data-submenu-id="$$__vc-menu-more__key"> <li class="ant-menu-overflow-item ant-menu-overflow-item ant-menu-overflow-item-rest ant-menu-submenu ant-menu-submenu-horizontal" style="opacity: 0; height: 0px; overflow-y: hidden; order: 9007199254740991; pointer-events: none; position: absolute;" aria-hidden="true" role="none" data-submenu-id="$$__vc-menu-more__key">
<!----> <!---->
@ -28,13 +28,13 @@ exports[`renders ./components/menu/demo/horizontal.vue correctly 1`] = `
`; `;
exports[`renders ./components/menu/demo/inline.vue correctly 1`] = ` exports[`renders ./components/menu/demo/inline.vue correctly 1`] = `
<ul id="dddddd" class="ant-menu ant-menu-root ant-menu-inline ant-menu-light" style="width: 256px;" role="menu" data-menu-list="true"> <ul id="dddddd" class="ant-menu ant-menu-root ant-menu-inline ant-menu-light css-dev-only-do-not-override-1tii49m" style="width: 256px;" role="menu" data-menu-list="true">
<li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="none" data-submenu-id="sub1"> <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="none" data-submenu-id="sub1">
<!----> <!---->
<div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="true" aria-haspopup="true" aria-controls="sub_menu_9_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content">Navigation One</span><i class="ant-menu-submenu-arrow"></i></div> <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="true" aria-haspopup="true" aria-controls="sub_menu_9_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content">Navigation One</span><i class="ant-menu-submenu-arrow"></i></div>
<ul id="sub_menu_9_$$_sub1-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true"> <ul id="sub_menu_9_$$_sub1-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true">
<li class="ant-menu-item-group"> <li class="ant-menu-item-group">
<div class="ant-menu-item-group-title">Item 1</div> <div title="Item 1" class="ant-menu-item-group-title">Item 1</div>
<ul class="ant-menu-item-group-list"> <ul class="ant-menu-item-group-list">
<!----> <!---->
<li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="1" aria-disabled="false"> <li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="1" aria-disabled="false">
@ -89,6 +89,7 @@ exports[`renders ./components/menu/demo/inline.vue correctly 1`] = `
</li> </li>
</ul> </ul>
</li> </li>
<li class="ant-menu-item-divider"></li>
<li class="ant-menu-submenu ant-menu-submenu-inline" role="none" data-submenu-id="sub4"> <li class="ant-menu-submenu ant-menu-submenu-inline" role="none" data-submenu-id="sub4">
<!----> <!---->
<div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub4" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_12_$$_sub4-popup" aria-disabled="false"><span role="img" aria-label="setting" class="anticon anticon-setting ant-menu-item-icon"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span class="ant-menu-title-content">Navigation Three</span><i class="ant-menu-submenu-arrow"></i></div> <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub4" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_12_$$_sub4-popup" aria-disabled="false"><span role="img" aria-label="setting" class="anticon anticon-setting ant-menu-item-icon"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span class="ant-menu-title-content">Navigation Three</span><i class="ant-menu-submenu-arrow"></i></div>
@ -111,6 +112,19 @@ exports[`renders ./components/menu/demo/inline.vue correctly 1`] = `
</li> </li>
</ul> </ul>
</li> </li>
<li class="ant-menu-item-group">
<div title="Group" class="ant-menu-item-group-title">Group</div>
<ul class="ant-menu-item-group-list">
<!---->
<li class="ant-menu-item ant-menu-item-only-child" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="13" aria-disabled="false">
<!----><span class="ant-menu-title-content">Option 13</span>
</li>
<!---->
<li class="ant-menu-item ant-menu-item-only-child" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="14" aria-disabled="false">
<!----><span class="ant-menu-title-content">Option 14</span>
</li>
</ul>
</li>
<!----> <!---->
<!----> <!---->
<!--teleport start--> <!--teleport start-->
@ -119,34 +133,34 @@ exports[`renders ./components/menu/demo/inline.vue correctly 1`] = `
`; `;
exports[`renders ./components/menu/demo/inline-collapsed.vue correctly 1`] = ` exports[`renders ./components/menu/demo/inline-collapsed.vue correctly 1`] = `
<div style="width: 256px;"><button style="margin-bottom: 16px;" class="ant-btn ant-btn-primary" type="button"> <div style="width: 256px;"><button style="margin-bottom: 16px;" class="css-dev-only-do-not-override-1tii49m ant-btn ant-btn-primary" type="button">
<!----><span role="img" aria-label="menu-fold" class="anticon anticon-menu-fold"><svg focusable="false" class="" data-icon="menu-fold" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z"></path></svg></span> <!----><span role="img" aria-label="menu-fold" class="anticon anticon-menu-fold"><svg focusable="false" class="" data-icon="menu-fold" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z"></path></svg></span>
</button> </button>
<ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark" role="menu" data-menu-list="true"> <ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark css-dev-only-do-not-override-1tii49m" role="menu" data-menu-list="true">
<!----> <!---->
<li class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="1" aria-disabled="false"><span role="img" aria-label="pie-chart" class="anticon anticon-pie-chart ant-menu-item-icon"><svg focusable="false" class="" data-icon="pie-chart" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"></path></svg></span><span class="ant-menu-title-content"><span>Option 1</span></span></li> <li class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="1" aria-disabled="false" title="Option 1"><span role="img" aria-label="pie-chart" class="anticon anticon-pie-chart ant-menu-item-icon"><svg focusable="false" class="" data-icon="pie-chart" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"></path></svg></span><span class="ant-menu-title-content">Option 1</span></li>
<!----> <!---->
<li class="ant-menu-item" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="2" aria-disabled="false"><span role="img" aria-label="desktop" class="anticon anticon-desktop ant-menu-item-icon"><svg focusable="false" class="" data-icon="desktop" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32zm-40 488H136V212h752v416z"></path></svg></span><span class="ant-menu-title-content"><span>Option 2</span></span></li> <li class="ant-menu-item" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="2" aria-disabled="false" title="Option 2"><span role="img" aria-label="desktop" class="anticon anticon-desktop ant-menu-item-icon"><svg focusable="false" class="" data-icon="desktop" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32zm-40 488H136V212h752v416z"></path></svg></span><span class="ant-menu-title-content">Option 2</span></li>
<!----> <!---->
<li class="ant-menu-item" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="3" aria-disabled="false"><span role="img" aria-label="inbox" class="anticon anticon-inbox ant-menu-item-icon"><svg focusable="false" class="" data-icon="inbox" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"></path></svg></span><span class="ant-menu-title-content"><span>Option 3</span></span></li> <li class="ant-menu-item" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="3" aria-disabled="false" title="Option 3"><span role="img" aria-label="inbox" class="anticon anticon-inbox ant-menu-item-icon"><svg focusable="false" class="" data-icon="inbox" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"></path></svg></span><span class="ant-menu-title-content">Option 3</span></li>
<li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="none" data-submenu-id="sub1"> <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="none" data-submenu-id="sub1">
<!----> <!---->
<div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="true" aria-haspopup="true" aria-controls="sub_menu_3_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content">Navigation One</span><i class="ant-menu-submenu-arrow"></i></div> <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="true" aria-haspopup="true" aria-controls="sub_menu_3_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content">Navigation One</span><i class="ant-menu-submenu-arrow"></i></div>
<ul id="sub_menu_3_$$_sub1-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true"> <ul id="sub_menu_3_$$_sub1-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true">
<!----> <!---->
<li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="5" aria-disabled="false"> <li title="Option 5" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="5" aria-disabled="false">
<!----><span class="ant-menu-title-content">Option 5</span> <!----><span class="ant-menu-title-content">Option 5</span>
</li> </li>
<!----> <!---->
<li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="6" aria-disabled="false"> <li title="Option 6" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="6" aria-disabled="false">
<!----><span class="ant-menu-title-content">Option 6</span> <!----><span class="ant-menu-title-content">Option 6</span>
</li> </li>
<!----> <!---->
<li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="7" aria-disabled="false"> <li title="Option 7" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="7" aria-disabled="false">
<!----><span class="ant-menu-title-content">Option 7</span> <!----><span class="ant-menu-title-content">Option 7</span>
</li> </li>
<!----> <!---->
<li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="8" aria-disabled="false"> <li title="Option 8" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="8" aria-disabled="false">
<!----><span class="ant-menu-title-content">Option 8</span> <!----><span class="ant-menu-title-content">Option 8</span>
</li> </li>
</ul> </ul>
@ -156,11 +170,11 @@ exports[`renders ./components/menu/demo/inline-collapsed.vue correctly 1`] = `
<div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_4_$$_sub2-popup" aria-disabled="false"><span role="img" aria-label="appstore" class="anticon anticon-appstore ant-menu-item-icon"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span class="ant-menu-title-content">Navigation Two</span><i class="ant-menu-submenu-arrow"></i></div> <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_4_$$_sub2-popup" aria-disabled="false"><span role="img" aria-label="appstore" class="anticon anticon-appstore ant-menu-item-icon"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span class="ant-menu-title-content">Navigation Two</span><i class="ant-menu-submenu-arrow"></i></div>
<ul id="sub_menu_4_$$_sub2-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true" style="display: none;"> <ul id="sub_menu_4_$$_sub2-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true" style="display: none;">
<!----> <!---->
<li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="9" aria-disabled="false"> <li title="Option 9" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="9" aria-disabled="false">
<!----><span class="ant-menu-title-content">Option 9</span> <!----><span class="ant-menu-title-content">Option 9</span>
</li> </li>
<!----> <!---->
<li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="10" aria-disabled="false"> <li title="Option 10" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="10" aria-disabled="false">
<!----><span class="ant-menu-title-content">Option 10</span> <!----><span class="ant-menu-title-content">Option 10</span>
</li> </li>
<li role="none" class="ant-menu-submenu ant-menu-submenu-inline" data-submenu-id="sub3"> <li role="none" class="ant-menu-submenu ant-menu-submenu-inline" data-submenu-id="sub3">
@ -168,11 +182,11 @@ exports[`renders ./components/menu/demo/inline-collapsed.vue correctly 1`] = `
<div style="padding-left: 48px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub3" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_5_$$_sub3-popup" aria-disabled="false"><span class="ant-menu-title-content">Submenu</span><i class="ant-menu-submenu-arrow"></i></div> <div style="padding-left: 48px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub3" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_5_$$_sub3-popup" aria-disabled="false"><span class="ant-menu-title-content">Submenu</span><i class="ant-menu-submenu-arrow"></i></div>
<ul id="sub_menu_5_$$_sub3-popup" class="ant-menu ant-menu-sub ant-menu-inline" data-menu-list="true" style="display: none;"> <ul id="sub_menu_5_$$_sub3-popup" class="ant-menu ant-menu-sub ant-menu-inline" data-menu-list="true" style="display: none;">
<!----> <!---->
<li style="padding-left: 72px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="11" aria-disabled="false"> <li title="Option 11" style="padding-left: 72px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="11" aria-disabled="false">
<!----><span class="ant-menu-title-content">Option 11</span> <!----><span class="ant-menu-title-content">Option 11</span>
</li> </li>
<!----> <!---->
<li style="padding-left: 72px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="12" aria-disabled="false"> <li title="Option 12" style="padding-left: 72px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="12" aria-disabled="false">
<!----><span class="ant-menu-title-content">Option 12</span> <!----><span class="ant-menu-title-content">Option 12</span>
</li> </li>
</ul> </ul>
@ -189,7 +203,7 @@ exports[`renders ./components/menu/demo/inline-collapsed.vue correctly 1`] = `
exports[`renders ./components/menu/demo/sider-current.vue correctly 1`] = ` exports[`renders ./components/menu/demo/sider-current.vue correctly 1`] = `
<div> <div>
<ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-light" style="width: 256px;" role="menu" data-menu-list="true"> <ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-light css-dev-only-do-not-override-1tii49m" style="width: 256px;" role="menu" data-menu-list="true">
<li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="none" data-submenu-id="sub1"> <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="none" data-submenu-id="sub1">
<!----> <!---->
<div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="true" aria-haspopup="true" aria-controls="sub_menu_17_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content">Navigation One</span><i class="ant-menu-submenu-arrow"></i></div> <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="true" aria-haspopup="true" aria-controls="sub_menu_17_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content">Navigation One</span><i class="ant-menu-submenu-arrow"></i></div>
@ -214,9 +228,7 @@ exports[`renders ./components/menu/demo/sider-current.vue correctly 1`] = `
</li> </li>
<li class="ant-menu-submenu ant-menu-submenu-inline" role="none" data-submenu-id="sub2"> <li class="ant-menu-submenu ant-menu-submenu-inline" role="none" data-submenu-id="sub2">
<!----> <!---->
<div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_18_$$_sub2-popup" aria-disabled="false"> <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_18_$$_sub2-popup" aria-disabled="false"><span role="img" aria-label="appstore" class="anticon anticon-appstore ant-menu-item-icon"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span class="ant-menu-title-content">Navigation Two</span><i class="ant-menu-submenu-arrow"></i></div>
<!----><span class="ant-menu-title-content"><span role="img" aria-label="appstore" class="anticon anticon-appstore"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span> Navigation Two </span><i class="ant-menu-submenu-arrow"></i>
</div>
<ul id="sub_menu_18_$$_sub2-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true" style="display: none;"> <ul id="sub_menu_18_$$_sub2-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true" style="display: none;">
<!----> <!---->
<li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="5" aria-disabled="false"> <li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="5" aria-disabled="false">
@ -272,25 +284,53 @@ exports[`renders ./components/menu/demo/sider-current.vue correctly 1`] = `
</div> </div>
`; `;
exports[`renders ./components/menu/demo/submenu-theme.vue correctly 1`] = `
<div><button type="button" role="switch" aria-checked="false" class="ant-switch css-dev-only-do-not-override-1tii49m">
<div class="ant-switch-handle">
<!---->
</div><span class="ant-switch-inner"><span class="ant-switch-inner-checked">dark</span><span class="ant-switch-inner-unchecked">light</span></span>
</button><br><br>
<ul class="ant-menu ant-menu-root ant-menu-vertical ant-menu-dark css-dev-only-do-not-override-1tii49m" style="width: 256px;" role="menu" data-menu-list="true">
<li class="ant-menu-submenu ant-menu-submenu-vertical ant-menu-submenu-open" role="none" data-submenu-id="sub1">
<!---->
<div class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="true" aria-haspopup="true" aria-controls="sub_menu_25_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content">Navigation One</span><i class="ant-menu-submenu-arrow"></i></div>
<!---->
</li>
<!---->
<li class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="5" aria-disabled="false">
<!----><span class="ant-menu-title-content">Option 5</span>
</li>
<!---->
<li class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="6" aria-disabled="false">
<!----><span class="ant-menu-title-content">Option 6</span>
</li>
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
</ul>
</div>
`;
exports[`renders ./components/menu/demo/switch-mode.vue correctly 1`] = ` exports[`renders ./components/menu/demo/switch-mode.vue correctly 1`] = `
<div><button type="button" role="switch" aria-checked="false" class="ant-switch"> <div><button type="button" role="switch" aria-checked="false" class="ant-switch css-dev-only-do-not-override-1tii49m">
<div class="ant-switch-handle"> <div class="ant-switch-handle">
<!----> <!---->
</div><span class="ant-switch-inner"><!----></span> </div><span class="ant-switch-inner"><span class="ant-switch-inner-checked"><!----></span><span class="ant-switch-inner-unchecked"><!----></span></span>
</button> Change Mode <span class="ant-divider" style="margin: 0px 1em;"></span><button type="button" role="switch" aria-checked="false" class="ant-switch"> </button> Change Mode <span class="ant-divider" style="margin: 0px 1em;"></span><button type="button" role="switch" aria-checked="false" class="ant-switch css-dev-only-do-not-override-1tii49m">
<div class="ant-switch-handle"> <div class="ant-switch-handle">
<!----> <!---->
</div><span class="ant-switch-inner"><!----></span> </div><span class="ant-switch-inner"><span class="ant-switch-inner-checked"><!----></span><span class="ant-switch-inner-unchecked"><!----></span></span>
</button> Change Theme <br><br> </button> Change Theme <br><br>
<ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-light" style="width: 256px;" role="menu" data-menu-list="true"> <ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-light css-dev-only-do-not-override-1tii49m" style="width: 256px;" role="menu" data-menu-list="true">
<!----> <!---->
<li class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="1" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content"> Navigation One </span></li> <li class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="1" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content">Navigation One</span></li>
<!----> <!---->
<li class="ant-menu-item" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="2" aria-disabled="false"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-menu-item-icon"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span><span class="ant-menu-title-content"> Navigation Two </span></li> <li class="ant-menu-item" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="2" aria-disabled="false"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-menu-item-icon"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span><span class="ant-menu-title-content">Navigation Two</span></li>
<li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="none" data-submenu-id="sub1"> <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="none" data-submenu-id="sub1">
<!----> <!---->
<div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="true" aria-haspopup="true" aria-controls="sub_menu_25_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="appstore" class="anticon anticon-appstore ant-menu-item-icon"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span class="ant-menu-title-content">Navigation Three</span><i class="ant-menu-submenu-arrow"></i></div> <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="true" aria-haspopup="true" aria-controls="sub_menu_27_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="appstore" class="anticon anticon-appstore ant-menu-item-icon"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span class="ant-menu-title-content">Navigation Two</span><i class="ant-menu-submenu-arrow"></i></div>
<ul id="sub_menu_25_$$_sub1-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true"> <ul id="sub_menu_27_$$_sub1-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true">
<!----> <!---->
<li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="3" aria-disabled="false"> <li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="3" aria-disabled="false">
<!----><span class="ant-menu-title-content">Option 3</span> <!----><span class="ant-menu-title-content">Option 3</span>
@ -301,8 +341,8 @@ exports[`renders ./components/menu/demo/switch-mode.vue correctly 1`] = `
</li> </li>
<li role="none" class="ant-menu-submenu ant-menu-submenu-inline" data-submenu-id="sub1-2"> <li role="none" class="ant-menu-submenu ant-menu-submenu-inline" data-submenu-id="sub1-2">
<!----> <!---->
<div style="padding-left: 48px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1-2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_26_$$_sub1-2-popup" aria-disabled="false"><span class="ant-menu-title-content">Submenu</span><i class="ant-menu-submenu-arrow"></i></div> <div style="padding-left: 48px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1-2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_28_$$_sub1-2-popup" aria-disabled="false"><span class="ant-menu-title-content">Submenu</span><i class="ant-menu-submenu-arrow"></i></div>
<ul id="sub_menu_26_$$_sub1-2-popup" class="ant-menu ant-menu-sub ant-menu-inline" data-menu-list="true" style="display: none;"> <ul id="sub_menu_28_$$_sub1-2-popup" class="ant-menu ant-menu-sub ant-menu-inline" data-menu-list="true" style="display: none;">
<!----> <!---->
<li style="padding-left: 72px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="5" aria-disabled="false"> <li style="padding-left: 72px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="5" aria-disabled="false">
<!----><span class="ant-menu-title-content">Option 5</span> <!----><span class="ant-menu-title-content">Option 5</span>
@ -317,8 +357,8 @@ exports[`renders ./components/menu/demo/switch-mode.vue correctly 1`] = `
</li> </li>
<li class="ant-menu-submenu ant-menu-submenu-inline" role="none" data-submenu-id="sub2"> <li class="ant-menu-submenu ant-menu-submenu-inline" role="none" data-submenu-id="sub2">
<!----> <!---->
<div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_27_$$_sub2-popup" aria-disabled="false"><span role="img" aria-label="setting" class="anticon anticon-setting ant-menu-item-icon"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span class="ant-menu-title-content">Navigation Four</span><i class="ant-menu-submenu-arrow"></i></div> <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_29_$$_sub2-popup" aria-disabled="false"><span role="img" aria-label="setting" class="anticon anticon-setting ant-menu-item-icon"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span class="ant-menu-title-content">Navigation Three</span><i class="ant-menu-submenu-arrow"></i></div>
<ul id="sub_menu_27_$$_sub2-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true" style="display: none;"> <ul id="sub_menu_29_$$_sub2-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true" style="display: none;">
<!----> <!---->
<li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="7" aria-disabled="false"> <li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="7" aria-disabled="false">
<!----><span class="ant-menu-title-content">Option 7</span> <!----><span class="ant-menu-title-content">Option 7</span>
@ -345,68 +385,39 @@ exports[`renders ./components/menu/demo/switch-mode.vue correctly 1`] = `
</div> </div>
`; `;
exports[`renders ./components/menu/demo/template.vue correctly 1`] = `
<div style="width: 256px;"><button style="margin-bottom: 16px;" class="ant-btn ant-btn-primary" type="button">
<!----><span role="img" aria-label="menu-fold" class="anticon anticon-menu-fold"><svg focusable="false" class="" data-icon="menu-fold" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z"></path></svg></span>
</button>
<ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark" role="menu" data-menu-list="true">
<!---->
<li class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="1" aria-disabled="false"><span role="img" aria-label="pie-chart" class="anticon anticon-pie-chart ant-menu-item-icon"><svg focusable="false" class="" data-icon="pie-chart" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"></path></svg></span><span class="ant-menu-title-content"> Option 1</span></li>
<li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="none" data-submenu-id="2">
<!---->
<div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="2" aria-expanded="true" aria-haspopup="true" aria-controls="sub_menu_31_$$_2-popup" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content">Navigation 2</span><i class="ant-menu-submenu-arrow"></i></div>
<ul id="sub_menu_31_$$_2-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true">
<li role="none" class="ant-menu-submenu ant-menu-submenu-inline" data-submenu-id="2.1">
<!---->
<div style="padding-left: 48px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="2.1" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_32_$$_2.1-popup" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content">Navigation 3</span><i class="ant-menu-submenu-arrow"></i></div>
<ul id="sub_menu_32_$$_2.1-popup" class="ant-menu ant-menu-sub ant-menu-inline" data-menu-list="true" style="display: none;">
<!---->
<li style="padding-left: 72px;" class="ant-menu-item" role="menuitem" tabindex="-1" data-menu-id="2.1.1" aria-disabled="false"><span role="img" aria-label="pie-chart" class="anticon anticon-pie-chart ant-menu-item-icon"><svg focusable="false" class="" data-icon="pie-chart" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"></path></svg></span><span class="ant-menu-title-content"> Option 2.1.1</span></li>
</ul>
</li>
</ul>
</li>
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
</ul>
</div>
`;
exports[`renders ./components/menu/demo/theme.vue correctly 1`] = ` exports[`renders ./components/menu/demo/theme.vue correctly 1`] = `
<div><button type="button" role="switch" aria-checked="true" class="ant-switch-checked ant-switch"> <div><button type="button" role="switch" aria-checked="true" class="ant-switch-checked ant-switch css-dev-only-do-not-override-1tii49m">
<div class="ant-switch-handle"> <div class="ant-switch-handle">
<!----> <!---->
</div><span class="ant-switch-inner">Dark</span> </div><span class="ant-switch-inner"><span class="ant-switch-inner-checked">Dark</span><span class="ant-switch-inner-unchecked">Light</span></span>
</button><br><br> </button><br><br>
<ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark" style="width: 256px;" role="menu" data-menu-list="true"> <ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark css-dev-only-do-not-override-1tii49m" style="width: 256px;" role="menu" data-menu-list="true">
<!----> <!---->
<li class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="1" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content"> Navigation One </span></li> <li class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="1" aria-disabled="false" title="Navigation One"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content">Navigation One</span></li>
<!----> <!---->
<li class="ant-menu-item" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="2" aria-disabled="false"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-menu-item-icon"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span><span class="ant-menu-title-content"> Navigation Two </span></li> <li class="ant-menu-item" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="2" aria-disabled="false" title="Navigation Two"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-menu-item-icon"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span><span class="ant-menu-title-content">Navigation Two</span></li>
<li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="none" data-submenu-id="sub1"> <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="none" data-submenu-id="sub1">
<!----> <!---->
<div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="true" aria-haspopup="true" aria-controls="sub_menu_35_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="appstore" class="anticon anticon-appstore ant-menu-item-icon"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span class="ant-menu-title-content">Navigation Three</span><i class="ant-menu-submenu-arrow"></i></div> <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="true" aria-haspopup="true" aria-controls="sub_menu_33_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="appstore" class="anticon anticon-appstore ant-menu-item-icon"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span class="ant-menu-title-content">Navigation Three</span><i class="ant-menu-submenu-arrow"></i></div>
<ul id="sub_menu_35_$$_sub1-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true"> <ul id="sub_menu_33_$$_sub1-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true">
<!----> <!---->
<li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="3" aria-disabled="false"> <li title="Option 3" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="3" aria-disabled="false">
<!----><span class="ant-menu-title-content">Option 3</span> <!----><span class="ant-menu-title-content">Option 3</span>
</li> </li>
<!----> <!---->
<li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="4" aria-disabled="false"> <li title="Option 4" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="4" aria-disabled="false">
<!----><span class="ant-menu-title-content">Option 4</span> <!----><span class="ant-menu-title-content">Option 4</span>
</li> </li>
<li role="none" class="ant-menu-submenu ant-menu-submenu-inline" data-submenu-id="sub1-2"> <li role="none" class="ant-menu-submenu ant-menu-submenu-inline" data-submenu-id="sub1-2">
<!----> <!---->
<div style="padding-left: 48px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1-2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_36_$$_sub1-2-popup" aria-disabled="false"><span class="ant-menu-title-content">Submenu</span><i class="ant-menu-submenu-arrow"></i></div> <div style="padding-left: 48px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1-2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_34_$$_sub1-2-popup" aria-disabled="false"><span class="ant-menu-title-content">Submenu</span><i class="ant-menu-submenu-arrow"></i></div>
<ul id="sub_menu_36_$$_sub1-2-popup" class="ant-menu ant-menu-sub ant-menu-inline" data-menu-list="true" style="display: none;"> <ul id="sub_menu_34_$$_sub1-2-popup" class="ant-menu ant-menu-sub ant-menu-inline" data-menu-list="true" style="display: none;">
<!----> <!---->
<li style="padding-left: 72px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="5" aria-disabled="false"> <li title="Option 5" style="padding-left: 72px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="5" aria-disabled="false">
<!----><span class="ant-menu-title-content">Option 5</span> <!----><span class="ant-menu-title-content">Option 5</span>
</li> </li>
<!----> <!---->
<li style="padding-left: 72px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="6" aria-disabled="false"> <li title="Option 6" style="padding-left: 72px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="6" aria-disabled="false">
<!----><span class="ant-menu-title-content">Option 6</span> <!----><span class="ant-menu-title-content">Option 6</span>
</li> </li>
</ul> </ul>
@ -415,22 +426,22 @@ exports[`renders ./components/menu/demo/theme.vue correctly 1`] = `
</li> </li>
<li class="ant-menu-submenu ant-menu-submenu-inline" role="none" data-submenu-id="sub2"> <li class="ant-menu-submenu ant-menu-submenu-inline" role="none" data-submenu-id="sub2">
<!----> <!---->
<div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_37_$$_sub2-popup" aria-disabled="false"><span role="img" aria-label="setting" class="anticon anticon-setting ant-menu-item-icon"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span class="ant-menu-title-content">Navigation Four</span><i class="ant-menu-submenu-arrow"></i></div> <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_35_$$_sub2-popup" aria-disabled="false"><span role="img" aria-label="setting" class="anticon anticon-setting ant-menu-item-icon"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span class="ant-menu-title-content">Navigation Four</span><i class="ant-menu-submenu-arrow"></i></div>
<ul id="sub_menu_37_$$_sub2-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true" style="display: none;"> <ul id="sub_menu_35_$$_sub2-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true" style="display: none;">
<!----> <!---->
<li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="7" aria-disabled="false"> <li title="Option 7" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="7" aria-disabled="false">
<!----><span class="ant-menu-title-content">Option 7</span> <!----><span class="ant-menu-title-content">Option 7</span>
</li> </li>
<!----> <!---->
<li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="8" aria-disabled="false"> <li title="Option 8" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="8" aria-disabled="false">
<!----><span class="ant-menu-title-content">Option 8</span> <!----><span class="ant-menu-title-content">Option 8</span>
</li> </li>
<!----> <!---->
<li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="9" aria-disabled="false"> <li title="Option 9" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="9" aria-disabled="false">
<!----><span class="ant-menu-title-content">Option 9</span> <!----><span class="ant-menu-title-content">Option 9</span>
</li> </li>
<!----> <!---->
<li style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="10" aria-disabled="false"> <li title="Option 10" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="10" aria-disabled="false">
<!----><span class="ant-menu-title-content">Option 10</span> <!----><span class="ant-menu-title-content">Option 10</span>
</li> </li>
</ul> </ul>
@ -444,19 +455,19 @@ exports[`renders ./components/menu/demo/theme.vue correctly 1`] = `
`; `;
exports[`renders ./components/menu/demo/vertical.vue correctly 1`] = ` exports[`renders ./components/menu/demo/vertical.vue correctly 1`] = `
<ul class="ant-menu ant-menu-root ant-menu-vertical ant-menu-light" style="width: 256px;" role="menu" data-menu-list="true"> <ul class="ant-menu ant-menu-root ant-menu-vertical ant-menu-light css-dev-only-do-not-override-1tii49m" style="width: 256px;" role="menu" data-menu-list="true">
<!----> <!---->
<li class="ant-menu-item" role="menuitem" tabindex="-1" data-menu-id="1" aria-disabled="false"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content"> Navigation One </span></li> <li class="ant-menu-item" role="menuitem" tabindex="-1" data-menu-id="1" aria-disabled="false" title="Navigation One"><span role="img" aria-label="mail" class="anticon anticon-mail ant-menu-item-icon"><svg focusable="false" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span class="ant-menu-title-content">Navigation One</span></li>
<!----> <!---->
<li class="ant-menu-item" role="menuitem" tabindex="-1" data-menu-id="2" aria-disabled="false"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-menu-item-icon"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span><span class="ant-menu-title-content"> Navigation Two </span></li> <li class="ant-menu-item" role="menuitem" tabindex="-1" data-menu-id="2" aria-disabled="false" title="Navigation Two"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-menu-item-icon"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span><span class="ant-menu-title-content">Navigation Two</span></li>
<li class="ant-menu-submenu ant-menu-submenu-vertical" role="none" data-submenu-id="sub1"> <li class="ant-menu-submenu ant-menu-submenu-vertical" role="none" data-submenu-id="sub1">
<!----> <!---->
<div class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_41_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="appstore" class="anticon anticon-appstore ant-menu-item-icon"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span class="ant-menu-title-content">Navigation Three</span><i class="ant-menu-submenu-arrow"></i></div> <div class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_39_$$_sub1-popup" aria-disabled="false"><span role="img" aria-label="appstore" class="anticon anticon-appstore ant-menu-item-icon"><svg focusable="false" class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span class="ant-menu-title-content">Navigation Three</span><i class="ant-menu-submenu-arrow"></i></div>
<!----> <!---->
</li> </li>
<li class="ant-menu-submenu ant-menu-submenu-vertical" role="none" data-submenu-id="sub2"> <li class="ant-menu-submenu ant-menu-submenu-vertical" role="none" data-submenu-id="sub2">
<!----> <!---->
<div class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_42_$$_sub2-popup" aria-disabled="false"><span role="img" aria-label="setting" class="anticon anticon-setting ant-menu-item-icon"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span class="ant-menu-title-content">Navigation Four</span><i class="ant-menu-submenu-arrow"></i></div> <div class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub2" aria-expanded="false" aria-haspopup="true" aria-controls="sub_menu_40_$$_sub2-popup" aria-disabled="false"><span role="img" aria-label="setting" class="anticon anticon-setting ant-menu-item-icon"><svg focusable="false" class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span class="ant-menu-title-content">Navigation Four</span><i class="ant-menu-submenu-arrow"></i></div>
<!----> <!---->
</li> </li>
<!----> <!---->

103
components/menu/demo/horizontal.vue
View File

@ -17,54 +17,65 @@ Horizontal top navigation menu.
</docs> </docs>
<template> <template>
<a-menu v-model:selectedKeys="current" mode="horizontal"> <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" />
<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>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref } from 'vue'; import { h, ref } from 'vue';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue'; import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
export default defineComponent({ const current = ref<string[]>(['mail']);
components: { const items = ref([
MailOutlined, {
AppstoreOutlined, key: 'mail',
SettingOutlined, icon: () => h(MailOutlined),
label: 'Navigation One',
title: 'Navigation One',
}, },
setup() { {
const current = ref<string[]>(['mail']); key: 'app',
return { icon: () => h(AppstoreOutlined),
current, 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> </script>

10
components/menu/demo/index.vue
View File

@ -4,10 +4,10 @@
<inline /> <inline />
<inline-collapsed /> <inline-collapsed />
<sider-current /> <sider-current />
<switch-mode />
<theme />
<vertical /> <vertical />
<TemplateSingleFile /> <theme />
<submenu-theme />
<switch-mode />
</demo-sort> </demo-sort>
</template> </template>
@ -22,7 +22,7 @@ import SiderCurrent from './sider-current.vue';
import SwitchMode from './switch-mode.vue'; import SwitchMode from './switch-mode.vue';
import Theme from './theme.vue'; import Theme from './theme.vue';
import Vertical from './vertical.vue'; import Vertical from './vertical.vue';
import TemplateSingleFile from './template.vue'; import SubmenuTheme from './submenu-theme.vue';
export default defineComponent({ export default defineComponent({
CN, CN,
@ -35,7 +35,7 @@ export default defineComponent({
SwitchMode, SwitchMode,
Theme, Theme,
Vertical, Vertical,
TemplateSingleFile, SubmenuTheme,
}, },
}); });
</script> </script>

188
components/menu/demo/inline-collapsed.vue
View File

@ -23,62 +23,22 @@ Here is [a complete demo](/components/layout/#components-layout-demo-side) with
<template> <template>
<div style="width: 256px"> <div style="width: 256px">
<a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed"> <a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
<MenuUnfoldOutlined v-if="collapsed" /> <MenuUnfoldOutlined v-if="state.collapsed" />
<MenuFoldOutlined v-else /> <MenuFoldOutlined v-else />
</a-button> </a-button>
<a-menu <a-menu
v-model:openKeys="openKeys" v-model:openKeys="state.openKeys"
v-model:selectedKeys="selectedKeys" v-model:selectedKeys="state.selectedKeys"
mode="inline" mode="inline"
theme="dark" theme="dark"
:inline-collapsed="collapsed" :inline-collapsed="state.collapsed"
> :items="items"
<a-menu-item key="1"> ></a-menu>
<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>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, reactive, toRefs, watch } from 'vue'; import { reactive, watch, h } from 'vue';
import { import {
MenuFoldOutlined, MenuFoldOutlined,
MenuUnfoldOutlined, MenuUnfoldOutlined,
@ -88,39 +48,103 @@ import {
InboxOutlined, InboxOutlined,
AppstoreOutlined, AppstoreOutlined,
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
export default defineComponent({ const state = reactive({
components: { collapsed: false,
MenuFoldOutlined, selectedKeys: ['1'],
MenuUnfoldOutlined, openKeys: ['sub1'],
PieChartOutlined, preOpenKeys: ['sub1'],
MailOutlined,
DesktopOutlined,
InboxOutlined,
AppstoreOutlined,
},
setup() {
const state = reactive({
collapsed: false,
selectedKeys: ['1'],
openKeys: ['sub1'],
preOpenKeys: ['sub1'],
});
watch(
() => state.openKeys,
(_val, oldVal) => {
state.preOpenKeys = oldVal;
},
);
const toggleCollapsed = () => {
state.collapsed = !state.collapsed;
state.openKeys = state.collapsed ? [] : state.preOpenKeys;
};
return {
...toRefs(state),
toggleCollapsed,
};
},
}); });
const items = reactive([
{
key: '1',
icon: () => h(PieChartOutlined),
label: 'Option 1',
title: 'Option 1',
},
{
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',
},
{
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> </script>

133
components/menu/demo/inline.vue
View File

@ -22,83 +22,66 @@ Vertical menu with inline submenus.
v-model:selectedKeys="selectedKeys" v-model:selectedKeys="selectedKeys"
style="width: 256px" style="width: 256px"
mode="inline" mode="inline"
:items="items"
@click="handleClick" @click="handleClick"
> ></a-menu>
<a-sub-menu key="sub1" @titleClick="titleClick">
<template #icon>
<MailOutlined />
</template>
<template #title>Navigation One</template>
<a-menu-item-group key="g1">
<template #icon>
<QqOutlined />
</template>
<template #title>Item 1</template>
<a-menu-item key="1">Option 1</a-menu-item>
<a-menu-item key="2">Option 2</a-menu-item>
</a-menu-item-group>
<a-menu-item-group key="g2" title="Item 2">
<a-menu-item key="3">Option 3</a-menu-item>
<a-menu-item key="4">Option 4</a-menu-item>
</a-menu-item-group>
</a-sub-menu>
<a-sub-menu key="sub2" @titleClick="titleClick">
<template #icon>
<AppstoreOutlined />
</template>
<template #title>Navigation Two</template>
<a-menu-item key="5">Option 5</a-menu-item>
<a-menu-item key="6">Option 6</a-menu-item>
<a-sub-menu key="sub3" title="Submenu">
<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>
<a-sub-menu key="sub4">
<template #icon>
<SettingOutlined />
</template>
<template #title>Navigation Three</template>
<a-menu-item key="9">Option 9</a-menu-item>
<a-menu-item key="10">Option 10</a-menu-item>
<a-menu-item key="11">Option 11</a-menu-item>
<a-menu-item key="12">Option 12</a-menu-item>
</a-sub-menu>
</a-menu>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref, watch } from 'vue'; import { reactive, ref, watch, VueElement, h } from 'vue';
import { MailOutlined, QqOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue'; import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
import type { MenuProps } from 'ant-design-vue'; import type { MenuProps, ItemType } from 'ant-design-vue';
export default defineComponent({
components: {
MailOutlined,
QqOutlined,
AppstoreOutlined,
SettingOutlined,
},
setup() {
const selectedKeys = ref<string[]>(['1']);
const openKeys = ref<string[]>(['sub1']);
const handleClick: MenuProps['onClick'] = e => {
console.log('click', e);
};
const titleClick = (e: Event) => {
console.log('titleClick', e);
};
watch(
() => openKeys,
val => {
console.log('openKeys', val);
},
);
return {
selectedKeys,
openKeys,
handleClick, const selectedKeys = ref<string[]>(['1']);
titleClick, const openKeys = ref<string[]>(['sub1']);
};
function getItem(
label: VueElement | string,
key: string,
icon?: any,
children?: ItemType[],
type?: 'group',
): ItemType {
return {
key,
icon,
children,
label,
type,
} as ItemType;
}
const items: ItemType[] = reactive([
getItem('Navigation One', 'sub1', () => h(MailOutlined), [
getItem('Item 1', 'g1', null, [getItem('Option 1', '1'), getItem('Option 2', '2')], 'group'),
getItem('Item 2', 'g2', null, [getItem('Option 3', '3'), getItem('Option 4', '4')], 'group'),
]),
getItem('Navigation Two', 'sub2', () => h(AppstoreOutlined), [
getItem('Option 5', '5'),
getItem('Option 6', '6'),
getItem('Submenu', 'sub3', null, [getItem('Option 7', '7'), getItem('Option 8', '8')]),
]),
{ type: 'divider' },
getItem('Navigation Three', 'sub4', () => h(SettingOutlined), [
getItem('Option 9', '9'),
getItem('Option 10', '10'),
getItem('Option 11', '11'),
getItem('Option 12', '12'),
]),
getItem('Group', 'grp', null, [getItem('Option 13', '13'), getItem('Option 14', '14')], 'group'),
]);
const handleClick: MenuProps['onClick'] = e => {
console.log('click', e);
};
watch(
() => openKeys,
val => {
console.log('openKeys', val);
}, },
}); );
</script> </script>

120
components/menu/demo/sider-current.vue
View File

@ -19,75 +19,67 @@ Click the menu and you will see that all the other menus gets collapsed to keep
<template> <template>
<div> <div>
<a-menu <a-menu
v-model:selectedKeys="selectedKeys" v-model:selectedKeys="state.selectedKeys"
style="width: 256px" style="width: 256px"
mode="inline" mode="inline"
:open-keys="openKeys" :open-keys="state.openKeys"
:items="items"
@openChange="onOpenChange" @openChange="onOpenChange"
> ></a-menu>
<a-sub-menu key="sub1">
<template #icon>
<MailOutlined />
</template>
<template #title>Navigation One</template>
<a-menu-item key="1">Option 1</a-menu-item>
<a-menu-item key="2">Option 2</a-menu-item>
<a-menu-item key="3">Option 3</a-menu-item>
<a-menu-item key="4">Option 4</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<template #icon></template>
<template #title>
<AppstoreOutlined />
Navigation Two
</template>
<a-menu-item key="5">Option 5</a-menu-item>
<a-menu-item key="6">Option 6</a-menu-item>
<a-sub-menu key="sub3" title="Submenu">
<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>
<a-sub-menu key="sub4">
<template #icon>
<SettingOutlined />
</template>
<template #title>Navigation Three</template>
<a-menu-item key="9">Option 9</a-menu-item>
<a-menu-item key="10">Option 10</a-menu-item>
<a-menu-item key="11">Option 11</a-menu-item>
<a-menu-item key="12">Option 12</a-menu-item>
</a-sub-menu>
</a-menu>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, reactive, toRefs } from 'vue'; import { VueElement, h, reactive } from 'vue';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue'; import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
export default defineComponent({ import { ItemType } from 'ant-design-vue';
components: {
MailOutlined, function getItem(
AppstoreOutlined, label: VueElement | string,
SettingOutlined, key: string,
}, icon?: any,
setup() { children?: ItemType[],
const state = reactive({ type?: 'group',
rootSubmenuKeys: ['sub1', 'sub2', 'sub4'], ): ItemType {
openKeys: ['sub1'], return {
selectedKeys: [], key,
}); icon,
const onOpenChange = (openKeys: string[]) => { children,
const latestOpenKey = openKeys.find(key => state.openKeys.indexOf(key) === -1); label,
if (state.rootSubmenuKeys.indexOf(latestOpenKey!) === -1) { type,
state.openKeys = openKeys; } as ItemType;
} else { }
state.openKeys = latestOpenKey ? [latestOpenKey] : [];
} const items: ItemType[] = reactive([
}; getItem('Navigation One', 'sub1', h(MailOutlined), [
return { getItem('Option 1', '1'),
...toRefs(state), getItem('Option 2', '2'),
onOpenChange, getItem('Option 3', '3'),
}; getItem('Option 4', '4'),
}, ]),
getItem('Navigation Two', 'sub2', h(AppstoreOutlined), [
getItem('Option 5', '5'),
getItem('Option 6', '6'),
getItem('Submenu', 'sub3', null, [getItem('Option 7', '7'), getItem('Option 8', '8')]),
]),
getItem('Navigation Three', 'sub4', h(SettingOutlined), [
getItem('Option 9', '9'),
getItem('Option 10', '10'),
getItem('Option 11', '11'),
getItem('Option 12', '12'),
]),
]);
const state = reactive({
rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
openKeys: ['sub1'],
selectedKeys: [],
}); });
const onOpenChange = (openKeys: string[]) => {
const latestOpenKey = openKeys.find(key => state.openKeys.indexOf(key) === -1);
if (state.rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
state.openKeys = openKeys;
} else {
state.openKeys = latestOpenKey ? [latestOpenKey] : [];
}
};
</script> </script>

84
components/menu/demo/submenu-theme.vue Normal file
View File

@ -0,0 +1,84 @@
<docs>
---
order: 2
title:
zh-CN: 子菜单主题
en-US: SubMenu theme
---
## zh-CN
你可以通过 `theme` 属性来设置 SubMenu 的主题从而达到不同目录树下不同主题色的效果。该例子默认为根目录深色，子目录浅色效果。
## en-US
You can config SubMenu theme with `theme` prop to enable different theme color effect. This sample is dark for root and light for SubMenu.
</docs>
<template>
<div>
<a-switch
:checked="theme === 'dark'"
checked-children="dark"
un-checked-children="light"
@Change="changeTheme"
/>
<br />
<br />
<a-menu
:style="{ width: '256px' }"
:open-keys="openKeys"
:selected-keys="selectedKeys"
mode="vertical"
theme="dark"
:items="items"
@click="handleClick"
/>
</div>
</template>
<script lang="ts" setup>
import { computed, ref, VueElement, ComputedRef, h } from 'vue';
import { MailOutlined } from '@ant-design/icons-vue';
import type { MenuProps } from 'ant-design-vue';
const selectedKeys = ref<string[]>(['1']);
const openKeys = ref<string[]>(['sub1']);
const theme = ref<MenuProps['theme']>('light');
function getItem(
label: VueElement | string,
key: string,
icon?: any,
children?: MenuProps['items'],
theme?: 'light' | 'dark',
): MenuProps['items'][number] {
return {
key,
icon,
children,
label,
theme,
};
}
const items: ComputedRef<MenuProps['items']> = computed(() => [
getItem(
'Navigation One',
'sub1',
h(MailOutlined),
[getItem('Option 1', '1'), getItem('Option 2', '2'), getItem('Option 3', '3')],
theme.value,
),
getItem('Option 5', '5'),
getItem('Option 6', '6'),
]);
function handleClick(info: any) {
console.log('click', info);
}
function changeTheme(checked: boolean) {
theme.value = checked ? 'dark' : 'light';
}
</script>

128
components/menu/demo/switch-mode.vue
View File

@ -18,60 +18,25 @@ Show the dynamic switching mode (between `inline` and `vertical`).
<template> <template>
<div> <div>
<a-switch :checked="mode === 'vertical'" @change="changeMode" /> <a-switch :checked="state.mode === 'vertical'" @change="changeMode" />
Change Mode Change Mode
<span class="ant-divider" style="margin: 0 1em" /> <span class="ant-divider" style="margin: 0 1em" />
<a-switch :checked="theme === 'dark'" @change="changeTheme" /> <a-switch :checked="state.theme === 'dark'" @change="changeTheme" />
Change Theme Change Theme
<br /> <br />
<br /> <br />
<a-menu <a-menu
v-model:openKeys="openKeys" v-model:openKeys="state.openKeys"
v-model:selectedKeys="selectedKeys" v-model:selectedKeys="state.selectedKeys"
style="width: 256px" style="width: 256px"
:mode="mode" :mode="state.mode"
:theme="theme" :items="items"
> :theme="state.theme"
<a-menu-item key="1"> ></a-menu>
<template #icon>
<MailOutlined />
</template>
Navigation One
</a-menu-item>
<a-menu-item key="2">
<template #icon>
<CalendarOutlined />
</template>
Navigation Two
</a-menu-item>
<a-sub-menu key="sub1">
<template #icon>
<AppstoreOutlined />
</template>
<template #title>Navigation Three</template>
<a-menu-item key="3">Option 3</a-menu-item>
<a-menu-item key="4">Option 4</a-menu-item>
<a-sub-menu key="sub1-2" title="Submenu">
<a-menu-item key="5">Option 5</a-menu-item>
<a-menu-item key="6">Option 6</a-menu-item>
</a-sub-menu>
</a-sub-menu>
<a-sub-menu key="sub2">
<template #icon>
<SettingOutlined />
</template>
<template #title>Navigation Four</template>
<a-menu-item key="7">Option 7</a-menu-item>
<a-menu-item key="8">Option 8</a-menu-item>
<a-menu-item key="9">Option 9</a-menu-item>
<a-menu-item key="10">Option 10</a-menu-item>
</a-sub-menu>
</a-menu>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, reactive, toRefs } from 'vue'; import { h, reactive } from 'vue';
import { import {
MailOutlined, MailOutlined,
CalendarOutlined, CalendarOutlined,
@ -79,31 +44,52 @@ import {
SettingOutlined, SettingOutlined,
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
import type { MenuMode, MenuTheme } from 'ant-design-vue'; import type { MenuMode, MenuTheme } from 'ant-design-vue';
export default defineComponent({ import { ItemType } from 'ant-design-vue';
components: {
MailOutlined, const state = reactive({
CalendarOutlined, mode: 'inline' as MenuMode,
AppstoreOutlined, theme: 'light' as MenuTheme,
SettingOutlined, selectedKeys: ['1'],
}, openKeys: ['sub1'],
setup() {
const state = reactive({
mode: 'inline' as MenuMode,
theme: 'light' as MenuTheme,
selectedKeys: ['1'],
openKeys: ['sub1'],
});
const changeMode = (checked: boolean) => {
state.mode = checked ? 'vertical' : 'inline';
};
const changeTheme = (checked: boolean) => {
state.theme = checked ? 'dark' : 'light';
};
return {
...toRefs(state),
changeMode,
changeTheme,
};
},
}); });
function getItem(
label: string,
key: string,
icon?: any,
children?: ItemType[],
type?: 'group',
): ItemType {
return {
key,
icon,
children,
label,
type,
} as ItemType;
}
const items: ItemType[] = reactive([
getItem('Navigation One', '1', h(MailOutlined)),
getItem('Navigation Two', '2', h(CalendarOutlined)),
getItem('Navigation Two', 'sub1', h(AppstoreOutlined), [
getItem('Option 3', '3'),
getItem('Option 4', '4'),
getItem('Submenu', 'sub1-2', null, [getItem('Option 5', '5'), getItem('Option 6', '6')]),
]),
getItem('Navigation Three', 'sub2', h(SettingOutlined), [
getItem('Option 7', '7'),
getItem('Option 8', '8'),
getItem('Option 9', '9'),
getItem('Option 10', '10'),
]),
]);
const changeMode = (checked: boolean) => {
state.mode = checked ? 'vertical' : 'inline';
};
const changeTheme = (checked: boolean) => {
state.theme = checked ? 'dark' : 'light';
};
</script> </script>

127
components/menu/demo/template.vue
View File

@ -1,127 +0,0 @@
<docs>
---
order: 99
title:
zh-CN: 单文件递归菜单
en-US: Single file recursive menu
---
## zh-CN
使用单文件方式递归生成菜单。
## en-US
Use the single file method to recursively generate menus.
</docs>
<template>
<div style="width: 256px">
<a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
<MenuUnfoldOutlined v-if="collapsed" />
<MenuFoldOutlined v-else />
</a-button>
<a-menu
v-model:openKeys="openKeys"
v-model:selectedKeys="selectedKeys"
mode="inline"
theme="dark"
:inline-collapsed="collapsed"
>
<template v-for="item in list" :key="item.key">
<template v-if="!item.children">
<a-menu-item :key="item.key">
<template #icon>
<PieChartOutlined />
</template>
{{ item.title }}
</a-menu-item>
</template>
<template v-else>
<sub-menu :key="item.key" :menu-info="item" />
</template>
</template>
</a-menu>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, PropType } from 'vue';
import {
MenuFoldOutlined,
MenuUnfoldOutlined,
PieChartOutlined,
MailOutlined,
} from '@ant-design/icons-vue';
const list = [
{
key: '1',
title: 'Option 1',
},
{
key: '2',
title: 'Navigation 2',
children: [
{
key: '2.1',
title: 'Navigation 3',
children: [{ key: '2.1.1', title: 'Option 2.1.1' }],
},
],
},
];
// you can rewrite it to a single file component, if not, you should config vue alias to vue/dist/vue.esm-bundler.js
const SubMenu = defineComponent({
name: 'SubMenu',
components: {
PieChartOutlined,
MailOutlined,
},
props: {
menuInfo: {
type: Object as PropType<(typeof list)[number]>,
default: () => ({} as (typeof list)[number]),
},
},
template: `
<a-sub-menu :key="menuInfo.key">
<template #icon><MailOutlined /></template>
<template #title>{{ menuInfo.title }}</template>
<template v-for="item in menuInfo.children" :key="item.key">
<template v-if="!item.children">
<a-menu-item :key="item.key">
<template #icon>
<PieChartOutlined />
</template>
{{ item.title }}
</a-menu-item>
</template>
<template v-else>
<sub-menu :menu-info="item" :key="item.key" />
</template>
</template>
</a-sub-menu>
`,
});
export default defineComponent({
components: {
'sub-menu': SubMenu,
MenuFoldOutlined,
MenuUnfoldOutlined,
PieChartOutlined,
},
setup() {
const collapsed = ref<boolean>(false);
const toggleCollapsed = () => {
collapsed.value = !collapsed.value;
};
return {
list,
collapsed,
toggleCollapsed,
selectedKeys: ref(['1']),
openKeys: ref(['2']),
};
},
});
</script>

144
components/menu/demo/theme.vue
View File

@ -32,46 +32,12 @@ There are two built-in themes: `light` and `dark`. The default value is `light`.
style="width: 256px" style="width: 256px"
mode="inline" mode="inline"
:theme="theme" :theme="theme"
> :items="items"
<a-menu-item key="1"> />
<template #icon>
<MailOutlined />
</template>
Navigation One
</a-menu-item>
<a-menu-item key="2">
<template #icon>
<CalendarOutlined />
</template>
Navigation Two
</a-menu-item>
<a-sub-menu key="sub1">
<template #icon>
<AppstoreOutlined />
</template>
<template #title>Navigation Three</template>
<a-menu-item key="3">Option 3</a-menu-item>
<a-menu-item key="4">Option 4</a-menu-item>
<a-sub-menu key="sub1-2" title="Submenu">
<a-menu-item key="5">Option 5</a-menu-item>
<a-menu-item key="6">Option 6</a-menu-item>
</a-sub-menu>
</a-sub-menu>
<a-sub-menu key="sub2">
<template #icon>
<SettingOutlined />
</template>
<template #title>Navigation Four</template>
<a-menu-item key="7">Option 7</a-menu-item>
<a-menu-item key="8">Option 8</a-menu-item>
<a-menu-item key="9">Option 9</a-menu-item>
<a-menu-item key="10">Option 10</a-menu-item>
</a-sub-menu>
</a-menu>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, reactive, toRefs } from 'vue'; import { h, ref } from 'vue';
import { import {
MailOutlined, MailOutlined,
CalendarOutlined, CalendarOutlined,
@ -79,27 +45,87 @@ import {
SettingOutlined, SettingOutlined,
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
import type { MenuTheme } from 'ant-design-vue'; import type { MenuTheme } from 'ant-design-vue';
export default defineComponent({ const theme = ref<MenuTheme>('dark');
components: { const selectedKeys = ref(['1']);
MailOutlined, const openKeys = ref(['sub1']);
CalendarOutlined, const items = ref([
AppstoreOutlined, {
SettingOutlined, key: '1',
icon: () => h(MailOutlined),
label: 'Navigation One',
title: 'Navigation One',
}, },
setup() { {
const state = reactive({ key: '2',
theme: 'dark' as MenuTheme, icon: () => h(CalendarOutlined),
selectedKeys: ['1'], label: 'Navigation Two',
openKeys: ['sub1'], title: 'Navigation Two',
});
const changeTheme = (checked: boolean) => {
state.theme = checked ? 'dark' : 'light';
};
return {
...toRefs(state),
changeTheme,
};
}, },
}); {
key: 'sub1',
icon: () => h(AppstoreOutlined),
label: 'Navigation Three',
title: 'Navigation Three',
children: [
{
key: '3',
label: 'Option 3',
title: 'Option 3',
},
{
key: '4',
label: 'Option 4',
title: 'Option 4',
},
{
key: 'sub1-2',
label: 'Submenu',
title: 'Submenu',
children: [
{
key: '5',
label: 'Option 5',
title: 'Option 5',
},
{
key: '6',
label: 'Option 6',
title: 'Option 6',
},
],
},
],
},
{
key: 'sub2',
icon: () => h(SettingOutlined),
label: 'Navigation Four',
title: 'Navigation Four',
children: [
{
key: '7',
label: 'Option 7',
title: 'Option 7',
},
{
key: '8',
label: 'Option 8',
title: 'Option 8',
},
{
key: '9',
label: 'Option 9',
title: 'Option 9',
},
{
key: '10',
label: 'Option 10',
title: 'Option 10',
},
],
},
]);
const changeTheme = (checked: boolean) => {
theme.value = checked ? 'dark' : 'light';
};
</script> </script>

141
components/menu/demo/vertical.vue
View File

@ -22,46 +22,12 @@ Submenus open as pop-ups.
v-model:selectedKeys="selectedKeys" v-model:selectedKeys="selectedKeys"
style="width: 256px" style="width: 256px"
mode="vertical" mode="vertical"
:items="items"
@click="handleClick" @click="handleClick"
> />
<a-menu-item key="1">
<template #icon>
<MailOutlined />
</template>
Navigation One
</a-menu-item>
<a-menu-item key="2">
<template #icon>
<CalendarOutlined />
</template>
Navigation Two
</a-menu-item>
<a-sub-menu key="sub1">
<template #icon>
<AppstoreOutlined />
</template>
<template #title>Navigation Three</template>
<a-menu-item key="3">Option 3</a-menu-item>
<a-menu-item key="4">Option 4</a-menu-item>
<a-sub-menu key="sub1-2" title="Submenu">
<a-menu-item key="5">Option 5</a-menu-item>
<a-menu-item key="6">Option 6</a-menu-item>
</a-sub-menu>
</a-sub-menu>
<a-sub-menu key="sub2">
<template #icon>
<SettingOutlined />
</template>
<template #title>Navigation Four</template>
<a-menu-item key="7">Option 7</a-menu-item>
<a-menu-item key="8">Option 8</a-menu-item>
<a-menu-item key="9">Option 9</a-menu-item>
<a-menu-item key="10">Option 10</a-menu-item>
</a-sub-menu>
</a-menu>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, reactive, toRefs } from 'vue'; import { h, ref } from 'vue';
import { import {
MailOutlined, MailOutlined,
CalendarOutlined, CalendarOutlined,
@ -70,25 +36,86 @@ import {
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
import type { MenuProps } from 'ant-design-vue'; import type { MenuProps } from 'ant-design-vue';
export default defineComponent({ const selectedKeys = ref([]);
components: { const openKeys = ref([]);
MailOutlined, const items = ref([
CalendarOutlined, {
AppstoreOutlined, key: '1',
SettingOutlined, icon: () => h(MailOutlined),
label: 'Navigation One',
title: 'Navigation One',
}, },
setup() { {
const state = reactive({ key: '2',
selectedKeys: [], icon: () => h(CalendarOutlined),
openKeys: [], label: 'Navigation Two',
}); title: 'Navigation Two',
const handleClick: MenuProps['onClick'] = menuInfo => {
console.log('click ', menuInfo);
};
return {
...toRefs(state),
handleClick,
};
}, },
}); {
key: 'sub1',
icon: () => h(AppstoreOutlined),
label: 'Navigation Three',
title: 'Navigation Three',
children: [
{
key: '3',
label: 'Option 3',
title: 'Option 3',
},
{
key: '4',
label: 'Option 4',
title: 'Option 4',
},
{
key: 'sub1-2',
label: 'Submenu',
title: 'Submenu',
children: [
{
key: '5',
label: 'Option 5',
title: 'Option 5',
},
{
key: '6',
label: 'Option 6',
title: 'Option 6',
},
],
},
],
},
{
key: 'sub2',
icon: () => h(SettingOutlined),
label: 'Navigation Four',
title: 'Navigation Four',
children: [
{
key: '7',
label: 'Option 7',
title: 'Option 7',
},
{
key: '8',
label: 'Option 8',
title: 'Option 8',
},
{
key: '9',
label: 'Option 9',
title: 'Option 9',
},
{
key: '10',
label: 'Option 10',
title: 'Option 10',
},
],
},
]);
const handleClick: MenuProps['onClick'] = menuInfo => {
console.log('click ', menuInfo);
};
</script> </script>

64
components/menu/index.en-US.md
View File

@ -37,10 +37,11 @@ More layouts with navigation: [Layout](/components/layout).
### Menu ### Menu
| Param | Description | Type | Default value | | Param | Description | Type | Default value |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| forceSubMenuRender | render submenu into DOM before it shows | boolean | false | | forceSubMenuRender | render submenu into DOM before it shows | boolean | false |
| inlineCollapsed | specifies the collapsed status when menu is inline mode | boolean | - | | inlineCollapsed | specifies the collapsed status when menu is inline mode | boolean | - |
| inlineIndent | indent px of inline menu item on each level | number | 24 | | inlineIndent | indent px of inline menu item on each level | number | 24 |
| items | Menu item content | [ItemType\[\]](#ItemType) | - | 4.20.0 |
| mode | type of the menu; `vertical`, `horizontal`, and `inline` modes are supported | `vertical` \| `horizontal` \| `inline` | `vertical` | | mode | type of the menu; `vertical`, `horizontal`, and `inline` modes are supported | `vertical` \| `horizontal` \| `inline` | `vertical` |
| multiple | Allow selection of multiple items | boolean | false | | multiple | Allow selection of multiple items | boolean | false |
| openKeys(v-model) | array with the keys of currently opened sub menus | string\[] | | | openKeys(v-model) | array with the keys of currently opened sub menus | string\[] | |
@ -70,6 +71,67 @@ More layouts with navigation: [Layout](/components/layout).
| key | unique id of the menu item | string | | | key | unique id of the menu item | string | |
| title | set display title for collapsed item | string \| slot | | | title | set display title for collapsed item | string \| slot | |
### ItemType
> type ItemType = [MenuItemType](#MenuItemType) | [SubMenuType](#SubMenuType) | [MenuItemGroupType](#MenuItemGroupType) | [MenuDividerType](#MenuDividerType);
#### MenuItemType
| Param | Description | Type | Default value | Version |
| -------- | ------------------------------------ | ------- | ------------- | ------- |
| danger | Display the danger style | boolean | false | |
| disabled | Whether menu item is disabled | boolean | false | |
| icon | The icon of the menu item | VueNode | - | |
| key | Unique ID of the menu item | string | - | |
| label | Menu label | VueNode | - | |
| title | Set display title for collapsed item | string | - | |
#### SubMenuType
<!-- prettier-ignore -->
| Property | Description | Type | Default value | Version |
| --- | --- | --- | --- | --- |
| children | Sub-menus or sub-menu items | [ItemType\[\]](#ItemType) | - | |
| disabled | Whether sub-menu is disabled | boolean | false | |
| icon | Icon of sub menu | VueNode\|()=>VueNode | - | |
| key | Unique ID of the sub-menu | string | - | |
| label | Menu label | VueNode | - | |
| popupClassName | Sub-menu class name, not working when `mode="inline"` | string | - | |
| popupOffset | Sub-menu offset, not working when `mode="inline"` | \[number, number] | - | |
| theme | Color theme of the SubMenu (inherits from Menu by default) | | `light` \| `dark` | - | |
| onTitleClick | Callback executed when the sub-menu title is clicked | function({ key, domEvent }) | - | |
#### MenuItemGroupType
Define `type` as `group` to make as group:
```ts
const groupItem = {
type: 'group', // Must have
label: 'My Group',
children: [],
};
```
| Param | Description | Type | Default value | Version |
| -------- | ---------------------- | --------------------------------- | ------------- | ------- |
| children | Sub-menu items | [MenuItemType\[\]](#MenuItemType) | - | |
| label | The title of the group | ReactNode | - | |
#### MenuDividerType
Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu. Need define the `type` as `divider`：
```ts
const dividerItem = {
type: 'divider', // Must have
};
```
| Param | Description | Type | Default value | Version |
| ------ | ---------------------- | ------- | ------------- | ------- |
| dashed | Whether line is dashed | boolean | false | |
### Menu.SubMenu ### Menu.SubMenu
| Param | Description | Type | Default value | Version | | Param | Description | Type | Default value | Version |

2
components/menu/index.tsx
View File

@ -10,6 +10,7 @@ import Divider from './src/Divider';
import type { MenuDividerProps } from './src/Divider'; import type { MenuDividerProps } from './src/Divider';
import type { App, Plugin } from 'vue'; import type { App, Plugin } from 'vue';
import type { MenuTheme, MenuMode } from './src/interface'; import type { MenuTheme, MenuMode } from './src/interface';
import type { ItemType } from './src/hooks/useItems';
/* istanbul ignore next */ /* istanbul ignore next */
Menu.install = function (app: App) { Menu.install = function (app: App) {
app.component(Menu.name, Menu); app.component(Menu.name, Menu);
@ -32,6 +33,7 @@ export type {
MenuTheme, MenuTheme,
MenuMode, MenuMode,
MenuDividerProps, MenuDividerProps,
ItemType,
}; };
export { export {
SubMenu, SubMenu,

63
components/menu/index.zh-CN.md
View File

@ -38,10 +38,11 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Vn4XSqJFAxcAAA
### Menu ### Menu
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false | | forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false |
| inlineCollapsed | inline 时菜单是否收起状态 | boolean | - | | inlineCollapsed | inline 时菜单是否收起状态 | boolean | - |
| inlineIndent | inline 模式的菜单缩进宽度 | number | 24 | | inlineIndent | inline 模式的菜单缩进宽度 | number | 24 |
| items | 菜单内容 | [ItemType\[\]](#ItemType) | - | |
| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | `vertical` \| `horizontal` \| `inline` | `vertical` | | mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | `vertical` \| `horizontal` \| `inline` | `vertical` |
| multiple | 是否允许多选 | boolean | false | | multiple | 是否允许多选 | boolean | false |
| openKeys(v-model) | 当前展开的 SubMenu 菜单项 key 数组 | string\[] | | | openKeys(v-model) | 当前展开的 SubMenu 菜单项 key 数组 | string\[] | |
@ -71,6 +72,66 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Vn4XSqJFAxcAAA
| key | item 的唯一标志 | string | | | | key | item 的唯一标志 | string | | |
| title | 设置收缩时展示的悬浮标题 | string \| slot | | | | title | 设置收缩时展示的悬浮标题 | string \| slot | | |
### ItemType
> type ItemType = [MenuItemType](#MenuItemType) | [SubMenuType](#SubMenuType) | [MenuItemGroupType](#MenuItemGroupType) | [MenuDividerType](#MenuDividerType);
### MenuItemType
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | ------------------------ | -------------------- | ------ | ---- |
| danger | 展示错误状态样式 | boolean | false | |
| disabled | 是否禁用 | boolean | false | |
| icon | 菜单图标 | VueNode\|()=>VueNode | - | |
| key | item 的唯一标志 | string | - | |
| label | 菜单项标题 | VueNode | - | |
| title | 设置收缩时展示的悬浮标题 | string | - | |
#### SubMenuType
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| children | 子菜单的菜单项 | [ItemType\[\]](#ItemType) | - | |
| disabled | 是否禁用 | boolean | false | |
| icon | 菜单图标 | VueNode\|()=>VueNode | - | |
| key | 唯一标志 | string | - | |
| label | 菜单项标题 | VueNode | - | |
| popupClassName | 子菜单样式，`mode="inline"` 时无效 | string | - | |
| popupOffset | 子菜单偏移量，`mode="inline"` 时无效 | \[number, number] | - | |
| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | - | |
| theme | 设置子菜单的主题，默认从 Menu 上继承 | `light` \| `dark` | - | |
#### MenuItemGroupType
定义类型为 `group` 时，会作为分组处理:
```ts
const groupItem = {
type: 'group', // Must have
label: 'My Group',
children: [],
};
```
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | ------------ | --------------------------------- | ------ | ---- |
| children | 分组的菜单项 | [MenuItemType\[\]](#MenuItemType) | - | |
| label | 分组标题 | ReactNode | - | |
#### MenuDividerType
菜单项分割线，只用在弹出菜单内，需要定义类型为 `divider`：
```ts
const dividerItem = {
type: 'divider', // Must have
};
```
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ------ | -------- | ------- | ------ | ---- |
| dashed | 是否虚线 | boolean | false | |
### Menu.SubMenu ### Menu.SubMenu
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

2
components/menu/src/MenuItem.tsx
View File

@ -248,7 +248,7 @@ export default defineComponent({
title={typeof title === 'string' ? title : undefined} title={typeof title === 'string' ? title : undefined}
> >
{cloneElement( {cloneElement(
icon, typeof icon === 'function' ? icon() : icon,
{ {
class: `${prefixCls.value}-item-icon`, class: `${prefixCls.value}-item-icon`,
}, },

2
components/menu/src/SubMenu.tsx
View File

@ -224,7 +224,7 @@ export default defineComponent({
return ( return (
<> <>
{cloneElement( {cloneElement(
icon, typeof icon === 'function' ? icon() : icon,
{ {
class: `${prefixCls.value}-item-icon`, class: `${prefixCls.value}-item-icon`,
}, },