diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 7c694ac867b..1ef68ae46e6 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -16,6 +16,7 @@ - `n-progress`'s `color` prop supports gradient config. - `n-select` adds `font-weight` theme variable - `n-input` adds `font-weight` theme variable +- `n-tag` adds `content-style` prop. ## 2.40.1 diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 06e42e84b73..061934cd3e9 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -16,6 +16,7 @@ - `n-progress` 的 `color` 属性支持渐变色配置 - `n-select` 新增 `font-weight` 主题变量 - `n-input` 新增 `font-weight` 主题变量 +- `n-tag` 新增 `content-style` 属性 ## 2.40.1 diff --git a/src/tag/demos/enUS/index.demo-entry.md b/src/tag/demos/enUS/index.demo-entry.md index c83d654ed33..b18556ebf64 100644 --- a/src/tag/demos/enUS/index.demo-entry.md +++ b/src/tag/demos/enUS/index.demo-entry.md @@ -28,6 +28,7 @@ icon.vue | checked | `boolean` | `false` | Whether the tag is checked. Note: used with `checkable`. | | | closable | `boolean` | `false` | Whether the tag shows a close button. | | | color | `{ color?: string, borderColor?: string, textColor?: string }` | `undefined` | Color of the tag. Note: this will override the type property's color. | | +| content-style | `string \| Object` | `undefined` | Content style of the tag. | NEXT-VERSION | | disabled | `boolean` | `false` | Whether the tag is disabled. | | | round | `boolean` | `false` | Whether the tag has rounded corners. | | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the tag. | | diff --git a/src/tag/demos/zhCN/index.demo-entry.md b/src/tag/demos/zhCN/index.demo-entry.md index ffbbcbc0e08..fd994226176 100644 --- a/src/tag/demos/zhCN/index.demo-entry.md +++ b/src/tag/demos/zhCN/index.demo-entry.md @@ -29,6 +29,7 @@ rtl-debug.vue | checked | `boolean` | `false` | 是否被选中,配合 checkable 一起使用 | | | closable | `boolean` | `false` | 是否可关闭 | | | color | `{ color?: string, borderColor?: string, textColor?: string }` | `undefined` | 标签颜色,设置该项后 `type` 无效 | | +| content-style | `string \| Object` | `undefined` | tag 内容的样式 | NEXT_VERSION | | disabled | `boolean` | `false` | 是否禁用 | | | round | `boolean` | `false` | 是否圆角 | | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 | | diff --git a/src/tag/src/Tag.tsx b/src/tag/src/Tag.tsx index dcaef457dc8..139cc141228 100644 --- a/src/tag/src/Tag.tsx +++ b/src/tag/src/Tag.tsx @@ -45,6 +45,7 @@ export const tagProps = { }, checked: Boolean, checkable: Boolean, + contentStyle: [Object, String] as PropType, strong: Boolean, triggerClickOnClose: Boolean, onClose: [Array, Function] as PropType void>>, @@ -259,6 +260,7 @@ export default defineComponent({ rtlEnabled, closable, color: { borderColor } = {}, + contentStyle, round, onRender, $slots @@ -299,7 +301,11 @@ export default defineComponent({ onMouseleave={this.onMouseleave} > {iconNode || avatarNode} - + {this.$slots.default?.()} {!this.checkable && closable ? ( diff --git a/src/tag/tests/Tag.spec.ts b/src/tag/tests/Tag.spec.ts index d924d678a42..7168cad6348 100644 --- a/src/tag/tests/Tag.spec.ts +++ b/src/tag/tests/Tag.spec.ts @@ -166,4 +166,17 @@ describe('n-tag', () => { '--n-merged-size: var(--n-avatar-size-override, 34px);' ) }) + + it('should work with `content-style` prop', () => { + const wrapper = mount(NTag, { + props: { + contentStyle: { + color: 'rgb(204, 204, 204)' + } + } + }) + expect(wrapper.find('.n-tag__content').attributes('style')).toContain( + 'color: rgb(204, 204, 204);' + ) + }) })