diff --git a/packages/components/select/docs/Index.zh.md b/packages/components/select/docs/Index.zh.md index bb2b2feda..462cffc33 100644 --- a/packages/components/select/docs/Index.zh.md +++ b/packages/components/select/docs/Index.zh.md @@ -15,18 +15,18 @@ order: 0 | 名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 | | --- | --- | --- | --- | --- | --- | | `control` | 控件控制器 | `string \| number \| AbstractControl` | - | - | 配合 `@idux/cdk/forms` 使用, 参考 [Form](/components/form/zh) | -| `v-model:value` | 当前选中的 option 的值 | `any \| any[]` | - | - | 当 `mode` 为 `multiple` 或 `tags` 时，`value` 为数组，使用 `control` 时，此配置无效 | +| `v-model:value` | 当前选中的 option 的值 | `any \| any[]` | - | - | 当 `multiple=true` 时，`value` 为数组，使用 `control` 时，此配置无效 | | `v-model:open` | 下拉菜单是否展开 | `boolean` | - | - | - | | `allowInput` | 允许输入模式 | `boolean` | `false` | - | - | | `autofocus` | 默认获取焦点 | `boolean` | `false` | - | - | | `borderless` | 是否无边框 | `boolean` | `false` | ✅ | - | -| `childrenKey` | 分组选项的 key | `string` | `children` | ✅ | 仅在使用 `options` 时有效 | +| `childrenKey` | 分组选项的 key | `string` | `children` | ✅ | 仅在使用 `dataSource` 时有效 | | `clearable` | 是否显示清除图标 | `boolean` | `false` | - | - | | `compareFn` | 用于自定义判断两个 `option` 的值是否相同 | `(o1: any, o2: any) => boolean` | `(o1: any, o2: any) => o1 === o2` | - | 通常用于 `option` 的为对象的情况 | | `dataSource` | 选项数据源 | `SelectData[]` | - | - | 优先级高于 `default` 插槽, 性能会更好 | | `disabled` | 是否禁用状态 | `boolean` | `false` | - | 使用 `control` 时，此配置无效 | | `empty` | 自定义当下拉列表为空时显示的内容 | `string \| EmptyProps \| #empty` | - | - | - | -| `labelKey` | 选项 label 的 key | `string` | `label` | ✅ | 仅在使用 `options` 时有效 | +| `labelKey` | 选项 label 的 key | `string` | `label` | ✅ | 仅在使用 `dataSource` 时有效 | | `maxLabelCount` | 最多显示多少个标签 | `number` | - | - | - | | `multiple` | 多选模式 | `boolean` | `false` | - | - | | `multipleLimit` | 最多选中多少项 | `number` | - | - | - | @@ -39,7 +39,7 @@ order: 0 | `size` | 设置选择器大小 | `'sm' \| 'md' \| 'lg'` | `md` | ✅ | - | | `suffix` | 设置后缀图标 | `string \| #suffix` | `down` | ✅ | - | | `target` | 自定义浮层容器节点 | `string \| HTMLElement \| () => string \| HTMLElement` | - | ✅ | - | -| `valueKey` | 选项 value 的 key | `string` | `value` | ✅ | - | +| `valueKey` | 选项 value 的 key | `string` | `value` | ✅ | 仅在使用 `dataSource` 时有效 | | `virtual` | 是否开启虚拟滚动 | `boolean` | `false` | - | - | | `onChange` | 选中值发生改变后的回调 | `(value: any, oldValue: any) => void` | - | - | - | | `onClear` | 清除图标被点击后的回调 | `(evt: MouseEvent) => void` | - | - | - | diff --git a/packages/components/style/mixins/reset.less b/packages/components/style/mixins/reset.less index b4b5afa7e..dd8878492 100644 --- a/packages/components/style/mixins/reset.less +++ b/packages/components/style/mixins/reset.less @@ -3,6 +3,7 @@ margin: 0; padding: 0; color: @text-color; + font-size: @font-size-base; font-variant: @font-variant-base; font-feature-settings: @font-feature-settings-base; line-height: @line-height-base; @@ -10,7 +11,6 @@ } .reset-scroll() { - ::-webkit-scrollbar { width: 12px; height: 12px; diff --git a/packages/components/tabs/style/index.less b/packages/components/tabs/style/index.less index d1965394b..839296818 100644 --- a/packages/components/tabs/style/index.less +++ b/packages/components/tabs/style/index.less @@ -12,7 +12,6 @@ flex: auto; .@{tabs-prefix} { - &-pane { width: 100%; } @@ -29,7 +28,6 @@ } .@{tabs-prefix} { - &-nav { display: flex; flex-wrap: nowrap; @@ -55,13 +53,12 @@ align-items: center; color: @tabs-nav-tab-text-color; } - &-selected:not(.@{tabs-prefix}-nav-tab-disabled) { + &-selected:not(&-disabled) { .@{tabs-prefix}-nav-tab-label { color: @tabs-selected-color; } } - &:not(.@{tabs-prefix}-nav-tab-disabled) { - + &:not(&-disabled) { &:hover { .@{tabs-prefix}-nav-tab-label { color: @tabs-hover-color; @@ -71,10 +68,10 @@ &:active { .@{tabs-prefix}-nav-tab-label { color: @tabs-active-color; + font-size: @tabs-active-font-size; } } } - &-disabled { cursor: not-allowed; .@{tabs-prefix}-nav-tab-label { @@ -188,7 +185,6 @@ } &-disabled { - &::after { background-color: @tabs-disabled-color; } @@ -199,7 +195,6 @@ &-line { .@{tabs-prefix}-nav { - &-bar { position: absolute; background-color: @tabs-nav-bar-color; @@ -225,11 +220,9 @@ } } &.@{tabs-prefix} { - &-nav-start, &-nav-end { .@{tabs-prefix} { - &-nav-wrapper { flex-wrap: wrap; &.@{tabs-prefix}-nav-wrapper-has-scroll { @@ -262,15 +255,12 @@ } &-nav-start { - &.@{tabs-prefix} { flex-direction: row; } .@{tabs-prefix} { - &-nav { - &-bar { right: 0; border-radius: @tabs-border-radius 0 0 @tabs-border-radius; @@ -292,15 +282,12 @@ } &-nav-end { - &.@{tabs-prefix} { flex-direction: row-reverse; } .@{tabs-prefix} { - &-nav { - &-bar { left: 0; width: @tabs-nav-bar-height; @@ -326,13 +313,11 @@ } &-nav-bottom { - &.@{tabs-prefix} { flex-direction: column-reverse; } .@{tabs-prefix} { - &-pane-wrapper { padding: 0 0 @tabs-pane-padding 0; } @@ -343,7 +328,6 @@ &-segment { .@{tabs-prefix}-nav { - &-wrapper { font-size: 12px; } @@ -353,7 +337,6 @@ border-right: none; height: @tabs-segment-nav-height; &:not(.@{tabs-prefix}-nav-tab-disabled) { - &:hover { border-color: @tabs-selected-color; & + .@{tabs-prefix}-nav-tab { diff --git a/packages/components/tabs/style/themes/default.variable.less b/packages/components/tabs/style/themes/default.variable.less index 01cfc04df..cf94dd007 100644 --- a/packages/components/tabs/style/themes/default.variable.less +++ b/packages/components/tabs/style/themes/default.variable.less @@ -1,6 +1,7 @@ @tabs-selected-color: @color-primary; @tabs-hover-color: @color-primary-l10; @tabs-active-color: @color-primary-d10; +@tabs-active-font-size: @font-size-md; @tabs-disabled-color: @color-graphite-l10; @tabs-nav-background-color: @color-white;