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

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

View File

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

View File

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

View File

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