mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-25 03:29:59 +08:00
Code Issues Actions 35 Packages Projects Releases Wiki Activity

fix: 优化 menu 的 margin token,做到了视觉统一

Browse Source
This commit is contained in:
期贤 2022-07-29 14:07:53 +08:00
parent 0eecbfae89
commit 993e975e76
3 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/menu/style/horizontal.tsx
View File

@ -10,6 +10,7 @@ const getHorizontalStyle: GenerateStyle<MenuToken> = token => {
lineWidth, lineWidth,
lineType, lineType,
menuItemPaddingInline, menuItemPaddingInline,
menuItemMarginInline,
} = token; } = token;
return { return {
@ -32,6 +33,7 @@ const getHorizontalStyle: GenerateStyle<MenuToken> = token => {
display: 'inline-block', display: 'inline-block',
verticalAlign: 'bottom', verticalAlign: 'bottom',
paddingInline: menuItemPaddingInline, paddingInline: menuItemPaddingInline,
marginInline: menuItemMarginInline,
}, },
[`> ${componentCls}-item:hover, [`> ${componentCls}-item:hover,

4
components/menu/style/index.tsx
View File

@ -55,6 +55,7 @@ export interface MenuToken extends FullToken<'Menu'> {
menuItemHeight: number; menuItemHeight: number;
menuHorizontalHeight: number; menuHorizontalHeight: number;
menuItemPaddingInline: number; menuItemPaddingInline: number;
menuItemMarginInline: number;
menuArrowSize: number; menuArrowSize: number;
menuArrowOffset: string; menuArrowOffset: string;
menuPanelMaskInset: number; menuPanelMaskInset: number;
@ -404,7 +405,8 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
// Menu Token // Menu Token
const menuToken = mergeToken<MenuToken>(token, { const menuToken = mergeToken<MenuToken>(token, {
menuItemHeight: controlHeightLG, menuItemHeight: controlHeightLG,
menuItemPaddingInline: controlHeightLG / 2, menuItemPaddingInline: 16,
menuItemMarginInline: 4,
menuArrowSize, menuArrowSize,
menuHorizontalHeight: controlHeightLG * 1.15, menuHorizontalHeight: controlHeightLG * 1.15,
menuArrowOffset: `${menuArrowSize * 0.25}px`, menuArrowOffset: `${menuArrowSize * 0.25}px`,

8
components/menu/style/vertical.tsx
View File

@ -3,7 +3,7 @@ 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, marginXS, padding, marginXXS, menuArrowSize, fontSize } = const { componentCls, menuItemHeight, menuItemMarginInline, padding, menuArrowSize, fontSize } =
token; token;
const paddingWithArrow = menuArrowSize + fontSize; const paddingWithArrow = menuArrowSize + fontSize;
@ -16,7 +16,7 @@ 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: marginXXS, marginBlock: menuItemMarginInline,
paddingInline: padding, paddingInline: padding,
overflow: 'hidden', overflow: 'hidden',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
@ -27,10 +27,6 @@ const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = token => {
paddingBottom: 0.02, paddingBottom: 0.02,
}, },
[`${componentCls}-item:not(:last-child)`]: {
marginBottom: marginXS,
},
[`> ${componentCls}-item, [`> ${componentCls}-item,
> ${componentCls}-submenu > ${componentCls}-submenu-title`]: { > ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
height: menuItemHeight, height: menuItemHeight,