diff --git a/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue b/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue
index c1b1c23cb..ad229b314 100644
--- a/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue
@@ -6,10 +6,14 @@
:options="options"
:suffix-icon="tinyIconEllipsis"
more-text=""
- spacing="12px"
+ spacing="8px"
:max-show-num="3"
>
+
+
+
+
场景2:只显示文本
@@ -18,12 +22,12 @@
diff --git a/examples/sites/demos/pc/app/dropdown/visible-arrow.vue b/examples/sites/demos/pc/app/dropdown/visible-arrow.vue
index e72093947..2c72ae1a8 100644
--- a/examples/sites/demos/pc/app/dropdown/visible-arrow.vue
+++ b/examples/sites/demos/pc/app/dropdown/visible-arrow.vue
@@ -1,26 +1,35 @@
-
-
-
-
- 黄金糕
- 狮子头
- 螺蛳粉
- 双皮奶
- 蚵仔煎
-
-
-
+
+
是否显示箭头:
+
+
+
+
+
+ 黄金糕
+ 狮子头
+ 螺蛳粉
+ 双皮奶
+ 蚵仔煎
+
+
+
+
diff --git a/packages/design/smb/src/action-menu/index.ts b/packages/design/smb/src/action-menu/index.ts
index c7f87dc12..6f8bad07c 100644
--- a/packages/design/smb/src/action-menu/index.ts
+++ b/packages/design/smb/src/action-menu/index.ts
@@ -1,3 +1,5 @@
export default {
- icons: {}
+ props: {
+ spacing: '8px'
+ }
}
diff --git a/packages/renderless/src/action-menu/index.ts b/packages/renderless/src/action-menu/index.ts
index e0a975b4e..75482a5ad 100644
--- a/packages/renderless/src/action-menu/index.ts
+++ b/packages/renderless/src/action-menu/index.ts
@@ -26,7 +26,7 @@ export const computedMaxShowNum =
}
export const computedSpacing =
- ({ props, state }: Pick) =>
+ ({ props, state, designConfig }: Pick) =>
(): string => {
if (props.spacing !== undefined) {
return String(props.spacing).includes('px') ? props.spacing : props.spacing + 'px'
@@ -34,7 +34,7 @@ export const computedSpacing =
if (state.isCardMode) {
return '10px'
} else {
- return '5px'
+ return designConfig?.props.spacing || '5px'
}
}
diff --git a/packages/renderless/src/action-menu/vue.ts b/packages/renderless/src/action-menu/vue.ts
index 2b8f041e2..c960e8386 100644
--- a/packages/renderless/src/action-menu/vue.ts
+++ b/packages/renderless/src/action-menu/vue.ts
@@ -32,7 +32,7 @@ export const api = ['state', 'handleMoreClick', 'handleItemClick', 'visibleChang
export const renderless = (
props: IActionMenuProps,
{ computed, reactive }: ISharedRenderlessParamHooks,
- { emit, t }: IActionMenuRenderlessParamUtils
+ { emit, t, designConfig }: IActionMenuRenderlessParamUtils
): IActionMenuApi => {
const api = {} as IActionMenuApi
@@ -52,7 +52,7 @@ export const renderless = (
handleItemClick: handleItemClick(emit),
visibleChange: visibleChange(emit),
computedMaxShowNum: computedMaxShowNum({ props, state }),
- computedSpacing: computedSpacing({ props, state }),
+ computedSpacing: computedSpacing({ props, state, designConfig }),
computedMoreText: computedMoreText({ props, state, t }),
computedSuffixIcon: computedSuffixIcon({ props, state })
})
diff --git a/packages/theme/src/action-menu/index.less b/packages/theme/src/action-menu/index.less
index 390b281b9..5dca7326f 100644
--- a/packages/theme/src/action-menu/index.less
+++ b/packages/theme/src/action-menu/index.less
@@ -75,11 +75,15 @@
&.@{action-menu-prefix-cls}__item-visable {
.@{dropdown-item-prefix-cls} {
background-color: var(--ti-action-menu-item-hover-bg-color);
- }
- }
- .tiny-svg {
- fill: var(--ti-action-menu-item-hover-text-color); // TINY-TODO :没有使用--ti-base-color-brand-8的图标色
+ > .tiny-dropdown-item__wrap {
+ > .tiny-dropdown-item__content {
+ .tiny-svg {
+ fill: var(--ti-action-menu-item-hover-icon-color);
+ }
+ }
+ }
+ }
}
}
diff --git a/packages/theme/src/action-menu/smb-theme.js b/packages/theme/src/action-menu/smb-theme.js
index eef6e1884..d95fc1998 100644
--- a/packages/theme/src/action-menu/smb-theme.js
+++ b/packages/theme/src/action-menu/smb-theme.js
@@ -3,13 +3,13 @@ export const tinyActionMenuSmbTheme = {
'ti-dropdown-item-font-size': 'var(--ti-common-font-size-1)',
'ti-dropdown-item-line-height': 'var(--ti-common-line-height-2)',
'ti-action-menu-item-svg-margin-top': '0',
- 'ti-action-menu-font-weight': 'var(--ti-common-font-weight-bold)',
+ 'ti-action-menu-font-weight': 'var(--ti-common-font-weight-normal)',
'ti-action-menu-item-hover-text-color': 'var(--ti-common-color-text-link)',
'ti-action-menu-item-line-width': 'var(--ti-common-space-0)',
'ti-action-menu-hover-text-decoratio': 'underline',
'ti-dropdown-line-height': 'calc(var(--ti-common-line-height-4) + 2px)',
- 'ti-action-menu-more-icon-width': 'var(--ti-common-size-5x)',
- 'ti-action-menu-more-icon-height': 'var(--ti-common-size-5x)',
+ 'ti-action-menu-more-icon-width': 'var(--ti-common-size-4x)',
+ 'ti-action-menu-more-icon-height': 'var(--ti-common-size-4x)',
'ti-action-menu-item-card-text-color': 'var(--ti-common-color-text-primary)',
'ti-action-menu-item-card-hover-text-color': 'var(--ti-common-color-text-primary)'
}
diff --git a/packages/theme/src/action-menu/vars.less b/packages/theme/src/action-menu/vars.less
index a0a1981bb..cab6225d9 100644
--- a/packages/theme/src/action-menu/vars.less
+++ b/packages/theme/src/action-menu/vars.less
@@ -35,6 +35,8 @@
--ti-action-menu-item-hover-bg-color: var(--ti-common-color-transparent, transparent);
// 下拉菜单项文本悬浮色
--ti-action-menu-item-hover-text-color: var(--ti-common-color-text-link-hover, #344899);
+ // 下拉菜单项图标悬浮色
+ --ti-action-menu-item-hover-icon-color: var(--ti-common-color-text-link-hover, #344899); // 没有这个颜色的图标色
// 下拉菜单项顶部内边距
--ti-action-menu-item-padding-top: var(--ti-common-space-0, 0px);
// 下拉菜单项右侧内边距
@@ -44,7 +46,7 @@
// 下拉菜单项右侧内边距
--ti-action-menu-item-padding-left: var(--ti-common-space-0, 0px);
// 下拉菜单项图标顶部内边距
- --ti-action-menu-item-svg-margin-top: -2px;
+ --ti-action-menu-item-svg-margin-top: var(--ti-common-space-0, 0px);
// 下拉菜单项图标右侧内边距
--ti-action-menu-item-svg-margin-right: var(--ti-common-space-base, 4px);
// 下拉菜单项图标底部部内边距
diff --git a/packages/theme/src/dropdown-item/aurora-theme.js b/packages/theme/src/dropdown-item/aurora-theme.js
index 8bb83c6ea..4951b2ccc 100644
--- a/packages/theme/src/dropdown-item/aurora-theme.js
+++ b/packages/theme/src/dropdown-item/aurora-theme.js
@@ -1,6 +1,6 @@
export const tinyDropdownItemAuroraTheme = {
'ti-dropdown-item-height': '32px',
- 'ti-dropdown-item-font-size': '14px',
+ 'ti-dropdown-item-font-size': 'var(--ti-common-font-size-base)',
'ti-dropdown-item-padding-horizontal': 'var(--ti-common-space-2x)',
'ti-dropdown-item-padding-vertical': 'var(--ti-common-space-6)',
'ti-dropdown-item-margin-bottom': 'var(--ti-common-space-base)',
diff --git a/packages/theme/src/dropdown-item/smb-theme.js b/packages/theme/src/dropdown-item/smb-theme.js
index 6893fe3af..238e50b22 100644
--- a/packages/theme/src/dropdown-item/smb-theme.js
+++ b/packages/theme/src/dropdown-item/smb-theme.js
@@ -3,14 +3,14 @@ export const tinyDropdownItemSmbTheme = {
'ti-dropdown-item-padding-vertical': 'var(--ti-common-space-0)',
'ti-dropdown-item-padding-horizontal': 'var(--ti-common-space-4x)',
'ti-dropdown-item-hover-text-color': 'var(--ti-common-color-text-primary)',
- 'ti-dropdown-item-icon-color-hover': 'var(--ti-common-color-text-link-hover)',
'ti-dropdown-item-expand-svg-margin-left': 'var(--ti-common-space-0)',
'ti-dropdown-item-expand-svg-margin-right': 'var(--ti-common-space-2x)',
'ti-dropdown-item-content-margin-left': 'calc(var(--ti-dropdown-item-expand-icon-size) + var(--ti-common-space-2x))',
'ti-dropdown-item-max-width': 'var(--ti-common-size-auto)',
'ti-dropdown-item-height': 'var(--ti-common-size-height-normal)',
- 'ti-dropdown-item-icon-color': 'var(--ti-common-color-icon)',
- 'ti-dropdown-item-content-font-weight-hover': 'var(--ti-common-font-weight-6)',
+ 'ti-dropdown-item-icon-color': 'var(--ti-common-color-icon-normal)',
+ 'ti-dropdown-item-icon-color-hover': 'var(--ti-common-color-icon-hover)',
+ 'ti-dropdown-item-content-font-weight-hover': 'var(--ti-common-font-weight-4)',
'ti-dropdown-item-active-bg-color': 'var(--ti-common-color-bg-white-normal)',
'ti-dropdown-item-active-text-color': '#1476FF',
'ti-dropdown-item-content-text-hover': '#1476FF',
@@ -20,5 +20,6 @@ export const tinyDropdownItemSmbTheme = {
'ti-dropdown-item-before-height': '0',
'ti-dropdown-item-bg-color-selected': 'var(--ti-common-color-bg-white-normal)',
'ti-dropdown-item-text-color-selected': '#1476FF',
- 'ti-dropdown-item-font-weight-selected': 'var(--ti-common-font-weight-6)'
+ 'ti-dropdown-item-font-weight-selected': 'var(--ti-common-font-weight-6)',
+ 'ti-dropdown-item-hover-bg-color': 'var(--ti-common-color-bg-normal)'
}
diff --git a/packages/theme/src/dropdown-menu/aurora-theme.js b/packages/theme/src/dropdown-menu/aurora-theme.js
index 40e17eb93..23cfff5d8 100644
--- a/packages/theme/src/dropdown-menu/aurora-theme.js
+++ b/packages/theme/src/dropdown-menu/aurora-theme.js
@@ -5,5 +5,7 @@ export const tinyDropdownMenuAuroraTheme = {
'ti-dropdown-menu-padding-vertical': 'var(--ti-common-space-base)',
'ti-dropdown-menu-margin-vertical': 'var(--ti-common-space-3x)',
'ti-dropdown-item-hover-bg-color': 'var(--ti-common-color-hover-background)',
- 'ti-dropdown-menu-min-width': 'auto'
+ 'ti-dropdown-menu-min-width': 'auto',
+ 'ti-dropdown-menu-arrow-margin-top': 'var(--ti-common-space-3x)',
+ 'ti-dropdown-menu-arrow-margin-bottom': 'var(--ti-common-space-3x)'
}
diff --git a/packages/theme/src/dropdown-menu/index.less b/packages/theme/src/dropdown-menu/index.less
index db068ac0d..346e824a4 100644
--- a/packages/theme/src/dropdown-menu/index.less
+++ b/packages/theme/src/dropdown-menu/index.less
@@ -60,7 +60,9 @@
}
&.@{css-prefix}popper[x-placement^='top'] {
- margin-bottom: var(--ti-dropdown-menu-arrow-margin-bottom);
+ &:has(.popper__arrow) {
+ margin-bottom: var(--ti-dropdown-menu-arrow-margin-bottom);
+ }
}
&.@{css-prefix}popper[x-placement^='top'] .popper__arrow {
@@ -79,7 +81,9 @@
}
&.@{css-prefix}popper[x-placement^='bottom'] {
- margin-top: var(--ti-dropdown-menu-arrow-margin-top);
+ &:has(.popper__arrow) {
+ margin-top: var(--ti-dropdown-menu-arrow-margin-top);
+ }
}
&.@{css-prefix}popper[x-placement^='bottom'] .popper__arrow {
@@ -191,4 +195,4 @@
margin: var(--ti-dropdown-item-before-margin-vertical) var(--ti-dropdown-item-mini-before-margin-horizontal);
}
}
-}
\ No newline at end of file
+}
diff --git a/packages/theme/src/dropdown-menu/vars.less b/packages/theme/src/dropdown-menu/vars.less
index 7b8c1ceb8..fb3b601b8 100644
--- a/packages/theme/src/dropdown-menu/vars.less
+++ b/packages/theme/src/dropdown-menu/vars.less
@@ -39,14 +39,14 @@
--ti-dropdown-menu-small-padding-horizontal: var(--ti-common-space-0, 0px);
// 下拉菜单弹框箭头的尺寸
--ti-dropdown-menu-arrow-border-width: 6px;
- // 下拉菜单弹框箭头的底部外边距
- --ti-dropdown-menu-arrow-margin-bottom: 12px;
- // 下拉菜单弹框箭头的顶部外边距
- --ti-dropdown-menu-arrow-margin-top: 12px;
+ // 下拉菜单带箭头弹框的底部外边距
+ --ti-dropdown-menu-arrow-margin-bottom: var(--ti-common-space-3x);
+ // 下拉菜单带箭头弹框的顶部外边距
+ --ti-dropdown-menu-arrow-margin-top: var(--ti-common-space-3x);
// 下拉菜单弹框箭头的边框色
--ti-dropdown-menu-arrow-border-color: var(--ti-common-color-line-normal, #adb0b8);
// 下拉菜单弹框箭头的颜色
--ti-dropdown-menu-arrow-after-border-color: var(--ti-common-color-light, #fff);
// 下拉菜单弹框周边的填充色
--ti-dropdown-menu-arrow-after-default-border-color: var(--ti-common-color-transparent, transparent);
-}
\ No newline at end of file
+}
diff --git a/packages/theme/src/dropdown/aurora-theme.js b/packages/theme/src/dropdown/aurora-theme.js
index f482bef68..800f52e17 100644
--- a/packages/theme/src/dropdown/aurora-theme.js
+++ b/packages/theme/src/dropdown/aurora-theme.js
@@ -9,5 +9,6 @@ export const tinyDropdownAuroraTheme = {
'ti-dropdown-caret-button-padding-left': 'var(--ti-common-space-2x)',
'ti-dropdown-caret-button-padding-right': 'var(--ti-common-space-2x)',
'ti-dropdown-caret-svg-margin-horizontal': 'var(--ti-common-space-0)',
- 'ti-dropdown-caret-svg-padding-left': 'var(--ti-common-space-0)'
+ 'ti-dropdown-caret-svg-padding-left': 'var(--ti-common-space-0)',
+ 'ti-dropdown-suffix-icon-margin-vertical': 'var(--ti-common-space-2x)'
}
diff --git a/packages/theme/src/dropdown/index.less b/packages/theme/src/dropdown/index.less
index de590b1cb..8fb1f9bf1 100644
--- a/packages/theme/src/dropdown/index.less
+++ b/packages/theme/src/dropdown/index.less
@@ -176,6 +176,13 @@
cursor: pointer;
}
+ .tiny-dropdown__suffix-inner {
+ .tiny-svg {
+ margin: var(--ti-dropdown-suffix-icon-margin-vertical) 0;
+ vertical-align: top;
+ }
+ }
+
&--visible {
// rotate(180deg) 会受svg的margin影响,位置会变动!
transform: scaleY(-1);
diff --git a/packages/theme/src/dropdown/smb-theme.js b/packages/theme/src/dropdown/smb-theme.js
index f3891bc83..72e0a8d6b 100644
--- a/packages/theme/src/dropdown/smb-theme.js
+++ b/packages/theme/src/dropdown/smb-theme.js
@@ -14,5 +14,7 @@ export const tinyDropdownSmbTheme = {
'ti-dropdown-trigger-only-svg-width': 'var(--ti-common-size-5x)',
'ti-dropdown-trigger-only-svg-height': 'var(--ti-common-size-5x)',
'ti-dropdown-trigger-only-svg-hover-bg-color': 'rgba(0,0,0,0.05)',
- 'ti-dropdown-trigger-only-svg-hover-radius': 'var(--ti-common-border-radius-2)'
+ 'ti-dropdown-trigger-only-svg-hover-radius': 'var(--ti-common-border-radius-2)',
+ 'ti-dropdown-line-height': 'var(--ti-common-line-height-1)',
+ 'ti-dropdown-suffix-icon-margin-vertical': 'var(--ti-common-space-2x)'
}
diff --git a/packages/theme/src/dropdown/vars.less b/packages/theme/src/dropdown/vars.less
index fb3d9a815..922615531 100644
--- a/packages/theme/src/dropdown/vars.less
+++ b/packages/theme/src/dropdown/vars.less
@@ -67,4 +67,6 @@
--ti-dropdown-title-button-padding-right: var(--ti-common-space-5x, 20px);
// 下拉菜单文字按钮的右侧内边距
--ti-dropdown-title-button-padding-left: var(--ti-common-space-5x, 20px);
+ // 下拉图标垂直内边距
+ --ti-dropdown-suffix-icon-margin-vertical: calc(var(--ti-common-space-2x, 8px) - 1px);
}
diff --git a/packages/vue/src/action-menu/src/pc.vue b/packages/vue/src/action-menu/src/pc.vue
index 7a383be14..7d9a42985 100644
--- a/packages/vue/src/action-menu/src/pc.vue
+++ b/packages/vue/src/action-menu/src/pc.vue
@@ -22,7 +22,11 @@
-
+