mirror of
https://github.com/ant-design/ant-design.git
synced 2025-07-30 19:36:29 +08:00
feat: v5 menu style (#38009)
* feat: v5 menu style * chore: code clean * feat: more component token * docs: add v4 demo * test: fix lint * docs: update docs
This commit is contained in:
MadCcc
GitHub
parent
6a562e63b9
commit
ba5a7b8d1b
File diff suppressed because it is too large
Load Diff
@ -791,6 +791,278 @@ exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./components/menu/demo/menu-v4.md correctly 1`] = `
|
||||||
|
Array [
|
||||||
|
<button
|
||||||
|
aria-checked="false"
|
||||||
|
class="ant-switch"
|
||||||
|
role="switch"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-switch-handle"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-switch-inner"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-switch-inner-checked"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-switch-inner-unchecked"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</button>,
|
||||||
|
Change Mode,
|
||||||
|
<br />,
|
||||||
|
<br />,
|
||||||
|
<ul
|
||||||
|
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
|
||||||
|
data-menu-list="true"
|
||||||
|
role="menu"
|
||||||
|
style="width:256px"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-selected"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left:24px"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="mail"
|
||||||
|
class="anticon anticon-mail ant-menu-item-icon"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="mail"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Navigation One
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left:24px"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="calendar"
|
||||||
|
class="anticon anticon-calendar ant-menu-item-icon"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="calendar"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</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"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-expanded="true"
|
||||||
|
aria-haspopup="true"
|
||||||
|
class="ant-menu-submenu-title"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left:24px"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="appstore"
|
||||||
|
class="anticon anticon-appstore ant-menu-item-icon"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="appstore"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Navigation Two
|
||||||
|
</span>
|
||||||
|
<i
|
||||||
|
class="ant-menu-submenu-arrow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<ul
|
||||||
|
class="ant-menu ant-menu-sub ant-menu-inline"
|
||||||
|
data-menu-list="true"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left:48px"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Option 3
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left:48px"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Option 4
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-menu-submenu ant-menu-submenu-inline"
|
||||||
|
role="none"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-haspopup="true"
|
||||||
|
class="ant-menu-submenu-title"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left:48px"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Submenu
|
||||||
|
</span>
|
||||||
|
<i
|
||||||
|
class="ant-menu-submenu-arrow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-menu-submenu ant-menu-submenu-inline"
|
||||||
|
role="none"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-haspopup="true"
|
||||||
|
class="ant-menu-submenu-title"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left:24px"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="setting"
|
||||||
|
class="anticon anticon-setting ant-menu-item-icon"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="setting"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
Navigation Three
|
||||||
|
</span>
|
||||||
|
<i
|
||||||
|
class="ant-menu-submenu-arrow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left:24px"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="link"
|
||||||
|
class="anticon anticon-link ant-menu-item-icon"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="link"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M574 665.4a8.03 8.03 0 00-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 00-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 000 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 000 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 00-11.3 0L372.3 598.7a8.03 8.03 0 000 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="https://ant.design"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Ant Design
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>,
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
style="display:none"
|
||||||
|
/>,
|
||||||
|
]
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
|
exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
|
||||||
Array [
|
Array [
|
||||||
<ul
|
<ul
|
||||||
|
|||||||
109
components/menu/demo/menu-v4.md
Normal file
109
components/menu/demo/menu-v4.md
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
---
|
||||||
|
order: 999
|
||||||
|
title:
|
||||||
|
zh-CN: v4 版本 Menu
|
||||||
|
en-US: Menu v4
|
||||||
|
debug: true
|
||||||
|
---
|
||||||
|
|
||||||
|
## zh-CN
|
||||||
|
|
||||||
|
V4 样式的 Menu 组件。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Menu with v4 style.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {
|
||||||
|
AppstoreOutlined,
|
||||||
|
CalendarOutlined,
|
||||||
|
LinkOutlined,
|
||||||
|
MailOutlined,
|
||||||
|
SettingOutlined,
|
||||||
|
} from '@ant-design/icons';
|
||||||
|
import { Menu, Switch, ConfigProvider } from 'antd';
|
||||||
|
import type { MenuProps } from 'antd/es/menu';
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
|
type MenuItem = Required<MenuProps>['items'][number];
|
||||||
|
|
||||||
|
function getItem(
|
||||||
|
label: React.ReactNode,
|
||||||
|
key?: React.Key | null,
|
||||||
|
icon?: React.ReactNode,
|
||||||
|
children?: MenuItem[],
|
||||||
|
): MenuItem {
|
||||||
|
return {
|
||||||
|
key,
|
||||||
|
icon,
|
||||||
|
children,
|
||||||
|
label,
|
||||||
|
} as MenuItem;
|
||||||
|
}
|
||||||
|
|
||||||
|
const items: MenuItem[] = [
|
||||||
|
getItem('Navigation One', '1', <MailOutlined />),
|
||||||
|
getItem('Navigation Two', '2', <CalendarOutlined />),
|
||||||
|
getItem('Navigation Two', 'sub1', <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', <SettingOutlined />, [
|
||||||
|
getItem('Option 7', '7'),
|
||||||
|
getItem('Option 8', '8'),
|
||||||
|
getItem('Option 9', '9'),
|
||||||
|
getItem('Option 10', '10'),
|
||||||
|
]),
|
||||||
|
getItem(
|
||||||
|
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
|
||||||
|
Ant Design
|
||||||
|
</a>,
|
||||||
|
'link',
|
||||||
|
<LinkOutlined />,
|
||||||
|
),
|
||||||
|
];
|
||||||
|
|
||||||
|
const App: React.FC = () => {
|
||||||
|
const [mode, setMode] = useState<'vertical' | 'inline'>('inline');
|
||||||
|
|
||||||
|
const changeMode = (value: boolean) => {
|
||||||
|
setMode(value ? 'vertical' : 'inline');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Switch onChange={changeMode} /> Change Mode
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<ConfigProvider
|
||||||
|
theme={{
|
||||||
|
components: {
|
||||||
|
Menu: {
|
||||||
|
radiusItem: 0,
|
||||||
|
radiusSubMenuItem: 0,
|
||||||
|
colorItemTextHover: '#1890ff',
|
||||||
|
colorItemTextSelected: '#1890ff',
|
||||||
|
colorItemBgSelected: '#e6f7ff',
|
||||||
|
colorActiveBarWidth: 3,
|
||||||
|
itemMarginInline: 0,
|
||||||
|
colorItemBgHover: 'transparent',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Menu
|
||||||
|
style={{ width: 256 }}
|
||||||
|
defaultSelectedKeys={['1']}
|
||||||
|
defaultOpenKeys={['sub1']}
|
||||||
|
mode={mode}
|
||||||
|
items={items}
|
||||||
|
/>
|
||||||
|
</ConfigProvider>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
```
|
||||||
@ -74,7 +74,7 @@ const App: React.FC = () => {
|
|||||||
<Menu
|
<Menu
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
style={{ width: 256 }}
|
style={{ width: 256 }}
|
||||||
defaultOpenKeys={['sub1']}
|
openKeys={['sub1']}
|
||||||
selectedKeys={[current]}
|
selectedKeys={[current]}
|
||||||
mode="vertical"
|
mode="vertical"
|
||||||
theme="dark"
|
theme="dark"
|
||||||
|
|||||||
@ -18,12 +18,15 @@ export interface ComponentToken {
|
|||||||
|
|
||||||
// radius
|
// radius
|
||||||
radiusItem: number;
|
radiusItem: number;
|
||||||
|
radiusSubMenuItem: number;
|
||||||
|
|
||||||
// Item Text
|
// Item Text
|
||||||
// > Default
|
// > Default
|
||||||
colorItemText: string;
|
colorItemText: string;
|
||||||
colorItemTextHover: string;
|
colorItemTextHover: string;
|
||||||
|
colorItemTextHoverHorizontal: string;
|
||||||
colorItemTextSelected: string;
|
colorItemTextSelected: string;
|
||||||
|
colorItemTextSelectedHorizontal: string;
|
||||||
|
|
||||||
// > Disabled
|
// > Disabled
|
||||||
colorItemTextDisabled: string;
|
colorItemTextDisabled: string;
|
||||||
@ -37,6 +40,7 @@ export interface ComponentToken {
|
|||||||
|
|
||||||
// Item Bg
|
// Item Bg
|
||||||
colorItemBg: string;
|
colorItemBg: string;
|
||||||
|
colorItemBgHover: string;
|
||||||
colorSubItemBg: string;
|
colorSubItemBg: string;
|
||||||
|
|
||||||
// > Default
|
// > Default
|
||||||
@ -48,6 +52,8 @@ export interface ComponentToken {
|
|||||||
colorActiveBarWidth: number;
|
colorActiveBarWidth: number;
|
||||||
colorActiveBarHeight: number;
|
colorActiveBarHeight: number;
|
||||||
colorActiveBarBorderSize: number;
|
colorActiveBarBorderSize: number;
|
||||||
|
|
||||||
|
itemMarginInline: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface MenuToken extends FullToken<'Menu'> {
|
export interface MenuToken extends FullToken<'Menu'> {
|
||||||
@ -78,6 +84,8 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
|
|||||||
iconCls,
|
iconCls,
|
||||||
zIndexPopup,
|
zIndexPopup,
|
||||||
radiusBase,
|
radiusBase,
|
||||||
|
radiusLG,
|
||||||
|
radiusSubMenuItem,
|
||||||
menuArrowSize,
|
menuArrowSize,
|
||||||
controlHeightSM,
|
controlHeightSM,
|
||||||
menuArrowOffset,
|
menuArrowOffset,
|
||||||
@ -132,7 +140,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
|
|||||||
flex: 'none',
|
flex: 'none',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
[`${componentCls}-item,${componentCls}-submenu,`]: {
|
[`${componentCls}-item, ${componentCls}-submenu`]: {
|
||||||
borderRadius: token.radiusItem,
|
borderRadius: token.radiusItem,
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -279,7 +287,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
|
|||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
zIndex: zIndexPopup,
|
zIndex: zIndexPopup,
|
||||||
background: 'transparent',
|
background: 'transparent',
|
||||||
borderRadius: radiusBase,
|
borderRadius: radiusLG,
|
||||||
boxShadow: 'none',
|
boxShadow: 'none',
|
||||||
transformOrigin: '0 0',
|
transformOrigin: '0 0',
|
||||||
|
|
||||||
@ -302,7 +310,11 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
|
|||||||
},
|
},
|
||||||
|
|
||||||
[`> ${componentCls}`]: {
|
[`> ${componentCls}`]: {
|
||||||
borderRadius: radiusBase,
|
borderRadius: radiusLG,
|
||||||
|
|
||||||
|
[`> ${componentCls}-item`]: {
|
||||||
|
borderRadius: radiusSubMenuItem,
|
||||||
|
},
|
||||||
|
|
||||||
[`${componentCls}-submenu-title::after`]: {
|
[`${componentCls}-submenu-title::after`]: {
|
||||||
transition: `transform ${motionDurationSlow} ${motionEaseInOut}`,
|
transition: `transform ${motionDurationSlow} ${motionEaseInOut}`,
|
||||||
@ -480,25 +492,31 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
|
|||||||
colorTextDescription,
|
colorTextDescription,
|
||||||
colorBgContainer,
|
colorBgContainer,
|
||||||
colorFillAlter,
|
colorFillAlter,
|
||||||
controlItemBgActive,
|
colorFillContent,
|
||||||
lineWidth,
|
lineWidth,
|
||||||
lineWidthBold,
|
lineWidthBold,
|
||||||
|
controlItemBgActiveHover,
|
||||||
|
colorBgTextHover,
|
||||||
} = token;
|
} = token;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
dropdownWidth: 160,
|
dropdownWidth: 160,
|
||||||
zIndexPopup: token.zIndexPopupBase + 50,
|
zIndexPopup: token.zIndexPopupBase + 50,
|
||||||
radiusItem: 0,
|
radiusItem: token.radiusLG,
|
||||||
|
radiusSubMenuItem: token.radiusSM,
|
||||||
colorItemText: colorText,
|
colorItemText: colorText,
|
||||||
colorItemTextHover: colorPrimary,
|
colorItemTextHover: colorText,
|
||||||
|
colorItemTextHoverHorizontal: colorPrimary,
|
||||||
colorGroupTitle: colorTextDescription,
|
colorGroupTitle: colorTextDescription,
|
||||||
colorItemTextSelected: colorPrimary,
|
colorItemTextSelected: colorText,
|
||||||
|
colorItemTextSelectedHorizontal: colorPrimary,
|
||||||
colorItemBg: colorBgContainer,
|
colorItemBg: colorBgContainer,
|
||||||
|
colorItemBgHover: colorBgTextHover,
|
||||||
|
colorItemBgActive: colorFillContent,
|
||||||
colorSubItemBg: colorFillAlter,
|
colorSubItemBg: colorFillAlter,
|
||||||
colorItemBgActive: controlItemBgActive,
|
colorItemBgSelected: controlItemBgActiveHover,
|
||||||
colorItemBgSelected: controlItemBgActive,
|
|
||||||
colorItemBgSelectedHorizontal: 'transparent',
|
colorItemBgSelectedHorizontal: 'transparent',
|
||||||
colorActiveBarWidth: lineWidthBold + lineWidth,
|
colorActiveBarWidth: 0,
|
||||||
colorActiveBarHeight: lineWidthBold,
|
colorActiveBarHeight: lineWidthBold,
|
||||||
colorActiveBarBorderSize: lineWidth,
|
colorActiveBarBorderSize: lineWidth,
|
||||||
|
|
||||||
@ -511,6 +529,8 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
|
|||||||
colorDangerItemTextSelected: colorError,
|
colorDangerItemTextSelected: colorError,
|
||||||
colorDangerItemBgActive: colorErrorBg,
|
colorDangerItemBgActive: colorErrorBg,
|
||||||
colorDangerItemBgSelected: colorErrorBg,
|
colorDangerItemBgSelected: colorErrorBg,
|
||||||
|
|
||||||
|
itemMarginInline: token.marginXXS,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|||||||
@ -11,10 +11,10 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
|
|||||||
componentCls,
|
componentCls,
|
||||||
colorItemText,
|
colorItemText,
|
||||||
colorItemTextSelected,
|
colorItemTextSelected,
|
||||||
|
colorItemTextSelectedHorizontal,
|
||||||
colorGroupTitle,
|
colorGroupTitle,
|
||||||
colorItemBg,
|
colorItemBg,
|
||||||
colorSubItemBg,
|
colorSubItemBg,
|
||||||
colorItemBgActive,
|
|
||||||
colorItemBgSelectedHorizontal,
|
colorItemBgSelectedHorizontal,
|
||||||
colorItemBgSelected,
|
colorItemBgSelected,
|
||||||
colorActiveBarHeight,
|
colorActiveBarHeight,
|
||||||
@ -24,10 +24,12 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
|
|||||||
motionEaseInOut,
|
motionEaseInOut,
|
||||||
motionEaseOut,
|
motionEaseOut,
|
||||||
menuItemPaddingInline,
|
menuItemPaddingInline,
|
||||||
|
itemMarginInline,
|
||||||
motionDurationFast,
|
motionDurationFast,
|
||||||
colorItemTextHover,
|
colorItemTextHover,
|
||||||
lineType,
|
lineType,
|
||||||
colorSplit,
|
colorSplit,
|
||||||
|
colorItemBgActive,
|
||||||
|
|
||||||
// Disabled
|
// Disabled
|
||||||
colorItemTextDisabled,
|
colorItemTextDisabled,
|
||||||
@ -38,6 +40,10 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
|
|||||||
colorDangerItemTextSelected,
|
colorDangerItemTextSelected,
|
||||||
colorDangerItemBgActive,
|
colorDangerItemBgActive,
|
||||||
colorDangerItemBgSelected,
|
colorDangerItemBgSelected,
|
||||||
|
|
||||||
|
radiusItem,
|
||||||
|
|
||||||
|
colorItemBgHover,
|
||||||
} = token;
|
} = token;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@ -72,9 +78,54 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// Active
|
[`&:not(${componentCls}-horizontal)`]: {
|
||||||
[`${componentCls}-item:active, ${componentCls}-submenu-title:active`]: {
|
[`${componentCls}-item:not(${componentCls}-item-selected)`]: {
|
||||||
background: colorItemBgActive,
|
'&:hover': {
|
||||||
|
backgroundColor: colorItemBgHover,
|
||||||
|
},
|
||||||
|
|
||||||
|
'&:active::before': {
|
||||||
|
content: '""',
|
||||||
|
position: 'absolute',
|
||||||
|
insetInlineStart: 0,
|
||||||
|
top: 0,
|
||||||
|
width: `100%`,
|
||||||
|
height: '100%',
|
||||||
|
flex: 1,
|
||||||
|
borderRadius: radiusItem,
|
||||||
|
backgroundColor: colorItemBgActive,
|
||||||
|
transition: `background-color ${motionDurationFast}`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
[`${componentCls}-submenu-title`]: {
|
||||||
|
'&::before': {
|
||||||
|
content: '""',
|
||||||
|
position: 'absolute',
|
||||||
|
insetInlineStart: itemMarginInline,
|
||||||
|
top: 0,
|
||||||
|
width: `calc(100% - ${itemMarginInline * 2}px)`,
|
||||||
|
height: '100%',
|
||||||
|
borderRadius: radiusItem,
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
transition: `background-color ${motionDurationFast}`,
|
||||||
|
},
|
||||||
|
|
||||||
|
'&:hover::before': {
|
||||||
|
backgroundColor: colorItemBgHover,
|
||||||
|
},
|
||||||
|
|
||||||
|
'&:active::after': {
|
||||||
|
content: '""',
|
||||||
|
position: 'absolute',
|
||||||
|
insetInlineStart: itemMarginInline,
|
||||||
|
top: 0,
|
||||||
|
width: `calc(100% - ${itemMarginInline * 2}px)`,
|
||||||
|
height: '100%',
|
||||||
|
borderRadius: radiusItem,
|
||||||
|
backgroundColor: colorItemBgActive,
|
||||||
|
transition: `background-color ${motionDurationFast}`,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// Danger - only Item has
|
// Danger - only Item has
|
||||||
@ -152,18 +203,18 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
|
|||||||
},
|
},
|
||||||
|
|
||||||
[`&:hover, &-active, &-open`]: {
|
[`&:hover, &-active, &-open`]: {
|
||||||
color: colorItemTextSelected,
|
color: colorItemTextSelectedHorizontal,
|
||||||
'&::after': {
|
'&::after': {
|
||||||
borderWidth: `${colorActiveBarHeight}px`,
|
borderWidth: `${colorActiveBarHeight}px`,
|
||||||
borderBottomColor: colorItemTextSelected,
|
borderBottomColor: colorItemTextSelectedHorizontal,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
[`&-selected`]: {
|
[`&-selected`]: {
|
||||||
color: colorItemTextSelected,
|
color: colorItemTextSelectedHorizontal,
|
||||||
backgroundColor: colorItemBgSelectedHorizontal,
|
backgroundColor: colorItemBgSelectedHorizontal,
|
||||||
'&::after': {
|
'&::after': {
|
||||||
borderWidth: `${colorActiveBarHeight}px`,
|
borderWidth: `${colorActiveBarHeight}px`,
|
||||||
borderBottomColor: colorItemTextSelected,
|
borderBottomColor: colorItemTextSelectedHorizontal,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -185,11 +236,12 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
|
|||||||
},
|
},
|
||||||
|
|
||||||
// Item
|
// Item
|
||||||
[`${componentCls}-item, ${componentCls}-submenu-title`]: colorActiveBarBorderSize
|
[`${componentCls}-item, ${componentCls}-submenu-title`]:
|
||||||
? {
|
colorActiveBarBorderSize && colorActiveBarWidth
|
||||||
width: `calc(100% + ${colorActiveBarBorderSize}px)`,
|
? {
|
||||||
}
|
width: `calc(100% + ${colorActiveBarBorderSize}px)`,
|
||||||
: {},
|
}
|
||||||
|
: {},
|
||||||
|
|
||||||
[`${componentCls}-item`]: {
|
[`${componentCls}-item`]: {
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
|
|||||||
@ -3,8 +3,15 @@ import type { MenuToken } from '.';
|
|||||||
import type { GenerateStyle } from '../../theme';
|
import type { GenerateStyle } from '../../theme';
|
||||||
|
|
||||||
const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = token => {
|
const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = token => {
|
||||||
const { componentCls, menuItemHeight, menuItemMarginInline, padding, menuArrowSize, fontSize } =
|
const {
|
||||||
token;
|
componentCls,
|
||||||
|
menuItemHeight,
|
||||||
|
menuItemMarginInline,
|
||||||
|
itemMarginInline,
|
||||||
|
padding,
|
||||||
|
menuArrowSize,
|
||||||
|
fontSize,
|
||||||
|
} = token;
|
||||||
|
|
||||||
const paddingWithArrow = menuArrowSize + fontSize;
|
const paddingWithArrow = menuArrowSize + fontSize;
|
||||||
|
|
||||||
@ -16,12 +23,21 @@ const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = token => {
|
|||||||
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
|
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
|
||||||
height: menuItemHeight,
|
height: menuItemHeight,
|
||||||
lineHeight: `${menuItemHeight}px`,
|
lineHeight: `${menuItemHeight}px`,
|
||||||
marginBlock: menuItemMarginInline,
|
|
||||||
paddingInline: padding,
|
paddingInline: padding,
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
textOverflow: 'ellipsis',
|
textOverflow: 'ellipsis',
|
||||||
},
|
},
|
||||||
|
|
||||||
|
[`${componentCls}-item`]: {
|
||||||
|
marginInline: itemMarginInline,
|
||||||
|
marginBlock: menuItemMarginInline,
|
||||||
|
width: `calc(100% - ${itemMarginInline * 2}px)`,
|
||||||
|
},
|
||||||
|
|
||||||
|
[`${componentCls}-submenu-title`]: {
|
||||||
|
marginBlock: menuItemMarginInline,
|
||||||
|
},
|
||||||
|
|
||||||
// disable margin collapsed
|
// disable margin collapsed
|
||||||
[`${componentCls}-submenu`]: {
|
[`${componentCls}-submenu`]: {
|
||||||
paddingBottom: 0.02,
|
paddingBottom: 0.02,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user