From 4c5e541b6bbdf8e24c8c79929d82ba3f7bdd0757 Mon Sep 17 00:00:00 2001 From: jahnli Date: Fri, 22 Sep 2023 09:50:44 +0800 Subject: [PATCH] feat(n-descriptions): add `content-class` `label-class` prop --- CHANGELOG.en-US.md | 1 + CHANGELOG.zh-CN.md | 1 + .../demos/enUS/index.demo-entry.md | 4 +++ .../demos/zhCN/index.demo-entry.md | 4 +++ src/descriptions/src/Descriptions.tsx | 31 +++++++++++++++---- src/descriptions/src/DescriptionsItem.ts | 2 ++ 6 files changed, 37 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 8a3eab7b38f..7640fb26b51 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -48,6 +48,7 @@ - `n-tree` adds node information for `render-switcher-icon` props, closes [#4815](https://github.com/tusen-ai/naive-ui/issues/4815). - `n-input-number` export the `select` method. - `n-data-table` adds `n-data-table-tr--expanded` class to expanded rows, and `n-data-table-tr n-data-table-tr--expand` class to the additional row, closes [#4420](https://github.com/tusen-ai/naive-ui/issues/4420). +- `n-descriptions` adds `content-class` `label-class` prop. ### i18n diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 82aa0fd87da..94ccee390b6 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -48,6 +48,7 @@ - `n-tree` 为 `render-switcher-icon` 属性添加节点信息，关闭 [#4815](https://github.com/tusen-ai/naive-ui/issues/4815) - `n-input-number` 导出 `select` 方法 - `n-data-table` 新增 `n-data-table-tr--expanded` class 到展开行，新增 `n-data-table-tr n-data-table-tr--expand` class 到附加行，关闭 [#4420](https://github.com/tusen-ai/naive-ui/issues/4420). +- `n-descriptions` 新增 `content-class` `label-class` 属性 ### i18n diff --git a/src/descriptions/demos/enUS/index.demo-entry.md b/src/descriptions/demos/enUS/index.demo-entry.md index 38c16f55c46..e4a0d18a29b 100644 --- a/src/descriptions/demos/enUS/index.demo-entry.md +++ b/src/descriptions/demos/enUS/index.demo-entry.md @@ -23,9 +23,11 @@ size.vue | --- | --- | --- | --- | | bordered | `boolean` | `false` | Whether to display border. | | column | `number` | `3` | Total columns. | +| content-class | `string` | `undefined` | Class of the item content. | | content-style | `Object \| string` | `undefined` | Style of the item content. | | label-align | `'center' \| 'left' \| 'right'` | `'left'` | Label align. | | label-placement | `'top' \| 'left'` | `'top'` | Label placement. | +| label-class | `string` | `undefined` | Class of the item label. | | label-style | `Object \| string` | `undefined` | Style of the item label. | | separator | `string` | `':'` | Separator, only work when `label-placement` is `left` and 　`bordered` is `false`.　 | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the description. | @@ -35,8 +37,10 @@ size.vue | Name | Type | Default | Description | | --- | --- | --- | --- | +| content-class | `string` | `undefined` | Class of the item content. | | content-style | `Object \| string` | `undefined` | Style of the item content. | | label | `string` | `undefined` | Label of the item. | +| label-class | `string` | `undefined` | Class of the item label. | | label-style | `Object \| string` | `undefined` | Style of the item label. | | span | `number` | `1` | Column span of the item. | diff --git a/src/descriptions/demos/zhCN/index.demo-entry.md b/src/descriptions/demos/zhCN/index.demo-entry.md index 92f96f54ff5..4df65505b8a 100644 --- a/src/descriptions/demos/zhCN/index.demo-entry.md +++ b/src/descriptions/demos/zhCN/index.demo-entry.md @@ -24,9 +24,11 @@ single-line-debug.vue | --- | --- | --- | --- | | bordered | `boolean` | `false` | 是否显示 border | | column | `number` | `3` | 设置的总列数 | +| content-class | `string` | `undefined` | 内容的类名 | | content-style | `Object \| string` | `undefined` | 内容的样式 | | label-align | `'center' \| 'left' \| 'right'` | `'left'` | label 对齐方式 | | label-placement | `'top' \| 'left'` | `'top'` | label 显示位置 | +| label-class | `string` | `undefined` | label 的类名 | | label-style | `Object \| string` | `undefined` | label 的样式 | | separator | `string` | `':'` | 分隔符，`label-placement` 为 `left` 并且　`bordered`　为 `false`　时生效 | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 | @@ -36,8 +38,10 @@ single-line-debug.vue | 名称 | 类型 | 默认值 | 说明 | | ------------- | ------------------ | ----------- | --------------- | +| content-class | `string` | `undefined` | 内容的类名 | | content-style | `Object \| string` | `undefined` | 内容的样式 | | label | `string` | `undefined` | 显示的 label 值 | +| label-class | `string` | `undefined` | label 的类名 | | label-style | `Object \| string` | `undefined` | label 的样式 | | span | `number` | `1` | 所占的单元格数 | diff --git a/src/descriptions/src/Descriptions.tsx b/src/descriptions/src/Descriptions.tsx index f2ee2ba5122..cb5aa63e5e2 100644 --- a/src/descriptions/src/Descriptions.tsx +++ b/src/descriptions/src/Descriptions.tsx @@ -48,7 +48,9 @@ export const descriptionsProps = { default: 'medium' }, bordered: Boolean, + labelClass: String, labelStyle: [Object, String] as PropType, + contentClass: String, contentStyle: [Object, String] as PropType } as const @@ -146,6 +148,8 @@ export default defineComponent({ const children = defaultSlots ? flatten(defaultSlots()) : [] const memorizedLength = children.length const { + contentClass, + labelClass, compitableColumn, labelPlacement, labelAlign, @@ -196,14 +200,20 @@ export default defineComponent({ if (bordered) { state.row.push( {itemLabel} , {[ @@ -238,7 +251,10 @@ export default defineComponent({ ]} {itemChildren} @@ -252,7 +268,7 @@ export default defineComponent({ : itemSpan * 2 state.row.push( @@ -261,7 +277,10 @@ export default defineComponent({ ) state.secondRow.push( diff --git a/src/descriptions/src/DescriptionsItem.ts b/src/descriptions/src/DescriptionsItem.ts index 1e6a799d011..4bbe809f79f 100644 --- a/src/descriptions/src/DescriptionsItem.ts +++ b/src/descriptions/src/DescriptionsItem.ts @@ -8,7 +8,9 @@ export const descriptionsItemProps = { type: Number, default: 1 }, + labelClass: String, labelStyle: [Object, String] as PropType, + contentClass: String, contentStyle: [Object, String] as PropType } as const