diff --git a/examples/sites/demos/pc/app/dropdown/split-button.spec.ts b/examples/sites/demos/pc/app/dropdown/split-button.spec.ts
index fbd6f0e345..d410312937 100644
--- a/examples/sites/demos/pc/app/dropdown/split-button.spec.ts
+++ b/examples/sites/demos/pc/app/dropdown/split-button.spec.ts
@@ -1,26 +1,27 @@
import { test, expect } from '@playwright/test'
+// 不展示此示例。按钮类型推荐使用 border
test('按钮类型', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('dropdown#split-button')
+ // await page.goto('dropdown#split-button')
- const wrap = page.locator('#split-button')
- const dropDown = wrap.locator('.tiny-dropdown').nth(1)
- const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
- const textBtn = dropDown.locator('button').first()
- const dropDownBtn = dropDown.locator('button').nth(1)
+ // const wrap = page.locator('#split-button')
+ // const dropDown = wrap.locator('.tiny-dropdown').nth(1)
+ // const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
+ // const textBtn = dropDown.locator('button').first()
+ // const dropDownBtn = dropDown.locator('button').nth(1)
// 是否变成了按钮且按钮样式是否生效
- await expect(dropDown.locator('button')).toHaveCount(2)
- await expect(textBtn).toHaveCSS('background-color', 'rgb(92, 179, 0)')
- await expect(textBtn).toHaveCSS('color', 'rgb(255, 255, 255)')
- await expect(dropDownBtn).toHaveCSS('background-color', 'rgb(92, 179, 0)')
- await expect(dropDownBtn).toHaveCSS('color', 'rgb(255, 255, 255)')
+ // await expect(dropDown.locator('button')).toHaveCount(2)
+ // await expect(textBtn).toHaveCSS('background-color', 'rgb(92, 179, 0)')
+ // await expect(textBtn).toHaveCSS('color', 'rgb(255, 255, 255)')
+ // await expect(dropDownBtn).toHaveCSS('background-color', 'rgb(92, 179, 0)')
+ // await expect(dropDownBtn).toHaveCSS('color', 'rgb(255, 255, 255)')
- // 文字悬浮不出现下拉菜单
- await page.waitForTimeout(500)
- await textBtn.hover()
- await expect(dropDownMenu).not.toBeVisible()
- await dropDownBtn.hover()
- await expect(dropDownMenu).toBeVisible()
+ // // 文字悬浮不出现下拉菜单
+ // await page.waitForTimeout(500)
+ // await textBtn.hover()
+ // await expect(dropDownMenu).not.toBeVisible()
+ // await dropDownBtn.hover()
+ // await expect(dropDownMenu).toBeVisible()
})
diff --git a/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js b/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js
index 071b03632d..d265708296 100644
--- a/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js
+++ b/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js
@@ -83,20 +83,6 @@ export default {
},
codeFiles: ['show-icon.vue']
},
- {
- demoId: 'split-button',
- name: {
- 'zh-CN': '按钮类型',
- 'en-US': 'Button type'
- },
- desc: {
- 'zh-CN':
- '通过 split-button
属性,设置下拉菜单显示为按钮类型。仅按钮类型时,支持 type
属性设置按钮状态。
\n',
- 'en-US':
- 'Set the drop-down menu to display as a button type through the split-button
attribute. When only button types are used, the type
attribute setting button status is supported.
\n'
- },
- codeFiles: ['split-button.vue']
- },
{
demoId: 'trigger',
name: {
diff --git a/packages/theme/src/action-menu/index.less b/packages/theme/src/action-menu/index.less
index 24d5f21174..3f877ba423 100644
--- a/packages/theme/src/action-menu/index.less
+++ b/packages/theme/src/action-menu/index.less
@@ -34,6 +34,11 @@
justify-content: space-between;
align-items: center;
+ .@{dropdown-prefix-cls} {
+ display: flex;
+ align-items: center;
+ }
+
// 默认
&.@{action-menu-prefix-cls}__item-visible {
.@{dropdown-item-prefix-cls} {
diff --git a/packages/theme/src/autocomplete/index.less b/packages/theme/src/autocomplete/index.less
index 2db8d9bd14..9c2abfbbdd 100644
--- a/packages/theme/src/autocomplete/index.less
+++ b/packages/theme/src/autocomplete/index.less
@@ -71,6 +71,7 @@
&.is-loading &__list-loading {
.tiny-svg {
font-size: var(--tv-Autocomplete-icon-size);
+ fill: var(--tv-Autocomplete-loading-icon-color);
}
}
}
diff --git a/packages/theme/src/autocomplete/vars.less b/packages/theme/src/autocomplete/vars.less
index 4674180566..06d8fa4456 100644
--- a/packages/theme/src/autocomplete/vars.less
+++ b/packages/theme/src/autocomplete/vars.less
@@ -35,4 +35,7 @@
--tv-Autocomplete-li-padding: 5.5px var(--tv-space-xl, 16px);
// 列表项悬浮背景色
--tv-Autocomplete-li-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5);
+
+ // 加载图标色
+ --tv-Autocomplete-loading-icon-color: var(--tv-color-icon-control, #191919);
}
diff --git a/packages/theme/src/base/dark-theme.less b/packages/theme/src/base/dark-theme.less
index 6f5df30f44..d55add3c9d 100644
--- a/packages/theme/src/base/dark-theme.less
+++ b/packages/theme/src/base/dark-theme.less
@@ -375,7 +375,7 @@
// -- 暗色新增 --
--tv-color-bg-2: var(--tv-base-color-common-9); // #333333 下拉面板/tip背景色
- --tv-color-bg-3: var(--tv-base-color-common-11); // #1A1A1A 顶部导航背景色/顶部导航下拉背景色/折叠面板背景色/容器二级背景色:左侧导航/折叠面板/表格下展背景
+ --tv-color-bg-3: var(--tv-base-color-common-11); // #1A1A1A 顶部导航背景色/顶部导航下拉背景色/折叠面板背景色/modal,dialogbox背景色/容器二级背景色:左侧导航/折叠面板/表格下展背景
--tv-color-bg-4: var(--tv-base-color-common-6); // #808080 时间线实心圆点
--tv-color-bg-progressbar: var(--tv-base-color-success-6); // #5BA854 step当前进度背景色
--tv-color-bg-active-emphasize-1: var(--tv-base-color-common-9); // #333333 下拉选中背景色、tab二级选中背景色
@@ -384,7 +384,10 @@
--tv-color-bg-hover-4: var(--tv-base-color-common-10); // #262626 表格悬浮/下拉悬浮/左侧导航悬浮
--tv-color-bg-active-primary-1: var(--tv-base-color-common-4); // #B3B3B3 主要按钮悬浮
--tv-color-bg-inverse: var(--tv-base-color-common-1); // #fff 不发生反色的背景色:switch/slider按钮控件背景色
-
+ --tv-color-bg-active-control-1:var(--tv-base-color-brand-4); // #264DAB radio 选中禁用色
+ --tv-color-bg-5:var(--tv-base-color-common-6); // #808080 轮播指示器背景色
+ --tv-color-bg-5-active:var(--tv-base-color-common-2); // #E6E6E6 轮播指示器激活背景色
+ --tv-color-bg-inverse-tint-1:var(--tv-base-color-common-10); // #262626 图片工具栏背景色
/** 2.7 边框色/分割线颜色 **/
@@ -407,6 +410,7 @@
--tv-color-border-container: rgba(255, 255, 255, 0.1); // rgba(255,255,255,0.1) 卡片选择默认边框
--tv-color-border-container-hover: rgba(255, 255, 255, 0); // rgba(255,255,255,0) 卡片选择悬浮边框
--tv-color-border-container-active: var(--tv-base-color-brand-7); // #317AF7 卡片选择选中边框
+ --tv-color-border-inverse-tint:var(--tv-base-color-common-13); // #000 tag边框
/** 3. 字体变量 **/
diff --git a/packages/theme/src/base/vars.less b/packages/theme/src/base/vars.less
index 69ec1ff8ae..1306fa7300 100644
--- a/packages/theme/src/base/vars.less
+++ b/packages/theme/src/base/vars.less
@@ -364,7 +364,7 @@
// -- 暗色新增 --
--tv-color-bg-2: var(--tv-base-color-common-1); // #fff下拉面板/tip背景色
- --tv-color-bg-3: var(--tv-base-color-common-1); // #fff 顶部导航背景色/顶部导航下拉背景色/折叠面板背景色/容器二级背景色:左侧导航/折叠面板/表格下展背景
+ --tv-color-bg-3: var(--tv-base-color-common-1); // #fff 顶部导航背景色/顶部导航下拉背景色/折叠面板背景色/modal,dialogbox背景色/容器二级背景色:左侧导航/折叠面板/表格下展背景
--tv-color-bg-4: var(--tv-base-color-common-7); // #c2c2c2 时间线实心圆点
--tv-color-bg-progressbar: var(--tv-base-color-success-6); // #5cb300 step当前进度背景色
--tv-color-bg-active-emphasize-1: var(--tv-base-color-common-1); // #fff 下拉选中背景色、tab二级选中背景色
@@ -373,6 +373,10 @@
--tv-color-bg-hover-4: var(--tv-base-color-common-1); // #ffffff 表格悬浮/下拉悬浮/左侧导航悬浮
--tv-color-bg-active-primary-1: var(--tv-base-color-common-9); // #595959 主要按钮悬浮
--tv-color-bg-inverse: var(--tv-base-color-common-1); // #fff 不发生反色的背景色:switch/slider按钮控件背景色
+ --tv-color-bg-active-control-1:var(--tv-base-color-common-6); // #dbdbdb radio 选中禁用色
+ --tv-color-bg-5:var(--tv-base-color-common-5); // #e6e6e6 轮播指示器背景色
+ --tv-color-bg-5-active:var(--tv-base-color-common-9); // #595959 轮播指示器激活背景色
+ --tv-color-bg-inverse-tint-1:var(--tv-base-color-common-1); // #fff 图片工具栏背景色
/** 2.7 边框色/分割线颜色 **/
@@ -394,6 +398,7 @@
--tv-color-border-container: var(--tv-base-color-common-4); // #f0f0f0 卡片选择默认边框
--tv-color-border-container-hover: var(--tv-base-color-common-1); // #fff 卡片选择悬浮边框
--tv-color-border-container-active: var(--tv-base-color-brand-6); // #1476ff 卡片选择选中边框
+ --tv-color-border-inverse-tint:var(--tv-base-color-common-1); // #fff tag边框
/** 3. 字体变量 **/
diff --git a/packages/theme/src/dialog-select/index.less b/packages/theme/src/dialog-select/index.less
index 69636f54bf..577b97ba9e 100644
--- a/packages/theme/src/dialog-select/index.less
+++ b/packages/theme/src/dialog-select/index.less
@@ -55,7 +55,8 @@
}
.tiny-input__prefix {
- display: inline-block;
+ display: inline-flex;
+ align-items: center;
.tiny-svg {
font-size: var(--tv-DialogSelect-icon-size);
diff --git a/packages/theme/src/dropdown/index.less b/packages/theme/src/dropdown/index.less
index d24b63bf3b..647935c1a4 100644
--- a/packages/theme/src/dropdown/index.less
+++ b/packages/theme/src/dropdown/index.less
@@ -42,14 +42,13 @@
margin-left: var(--tv-Dropdown-icon-margin-x);
.@{svg-prefix-cls} {
- fill: var(--tv-Dropdown-icon-color-link);
font-size: var(--tv-Dropdown-icon-size);
}
}
- &.@{css-prefix}button {
+ &:not(.tiny-button) {
.@{svg-prefix-cls} {
- fill: var(--tv-Dropdown-icon-color-white);
+ fill: var(--tv-Dropdown-icon-color-link);
}
}
@@ -121,7 +120,7 @@
&__trigger:hover {
&.@{css-prefix}button {
- &.tiny-button--default {
+ &.tiny-button--default:not(.is-disabled) {
.tiny-svg {
fill: var(--tv-Dropdown-icon-color-hover);
}
diff --git a/packages/theme/src/dropdown/vars.less b/packages/theme/src/dropdown/vars.less
index 179799c395..66acf354e6 100644
--- a/packages/theme/src/dropdown/vars.less
+++ b/packages/theme/src/dropdown/vars.less
@@ -22,7 +22,7 @@
// 下拉菜单触发元素按钮类型时图标颜色
--tv-Dropdown-icon-color-white: var(--tv-color-icon-inverse-tint, #ffffff);
// 默认按钮图标 hover 颜色
- --tv-Dropdown-icon-color-hover: var(--tv-icon-hover, #191919);
+ --tv-Dropdown-icon-color-hover: var(--tv-color-icon-hover, #191919);
// 触发源的图标颜色
--tv-Dropdown-icon-color-link: var(--tv-color-icon-link, #1476ff);
// 触发源的图标禁用色
diff --git a/packages/theme/src/svgs/ellipsis.svg b/packages/theme/src/svgs/ellipsis.svg
index 4b3aa2fbe2..49391d7149 100644
--- a/packages/theme/src/svgs/ellipsis.svg
+++ b/packages/theme/src/svgs/ellipsis.svg
@@ -6,7 +6,7 @@
-
-
-
+
+
+
diff --git a/packages/theme/src/tall-storage/index.less b/packages/theme/src/tall-storage/index.less
index 63821e9efe..884eea88e8 100644
--- a/packages/theme/src/tall-storage/index.less
+++ b/packages/theme/src/tall-storage/index.less
@@ -28,6 +28,7 @@
background-color: var(--tv-TallStorage-bg-color);
box-shadow: var(--tv-TallStorage-box-shadow);
border-radius: var(--tv-TallStorage-border-radius);
+ overflow: hidden;
width: 100%;
box-sizing: border-box;
z-index: 10;
@@ -47,7 +48,7 @@
&:hover,
&.item-hover {
cursor: pointer;
- background-color: var(--tv-TallStorage-item-bg-color);
+ background-color: var(--tv-TallStorage-item-bg-color-hover);
}
}
}
diff --git a/packages/theme/src/tall-storage/vars.less b/packages/theme/src/tall-storage/vars.less
index 96b6eecb12..ebcd1dd681 100644
--- a/packages/theme/src/tall-storage/vars.less
+++ b/packages/theme/src/tall-storage/vars.less
@@ -12,13 +12,13 @@
.inject-TallStorage-vars() {
// 背景颜色
- --tv-TallStorage-bg-color: var(--tv-color-bg-secondary);
+ --tv-TallStorage-bg-color: var(--tv-color-bg-2);
// 圆角
--tv-TallStorage-border-radius: var(--tv-border-radius-md);
// 选项高度
--tv-TallStorage-item-height: var(--tv-size-height-md);
- // 选项背景颜色
- --tv-TallStorage-item-bg-color: var(--tv-color-bg);
+ // 选项悬浮背景颜色
+ --tv-TallStorage-item-bg-color-hover: var(--tv-color-bg-hover);
// 阴影
--tv-TallStorage-box-shadow: var(--tv-shadow-2-down);
}
diff --git a/packages/vue/src/dropdown/src/pc.vue b/packages/vue/src/dropdown/src/pc.vue
index bb0aa845b1..c76aca73f9 100644
--- a/packages/vue/src/dropdown/src/pc.vue
+++ b/packages/vue/src/dropdown/src/pc.vue
@@ -184,6 +184,7 @@ export default defineComponent({
+ class={`is-text${state.visible ? ' is-expand' : ' is-hide'}${disabled ? ' is-disabled' : ''} ${triggerClass}`}>
{prefixInner}
{defaultTriggerElm}
{suffixInner}