diff --git a/.changeset/late-birds-jam.md b/.changeset/late-birds-jam.md new file mode 100644 index 000000000..84977cdf7 --- /dev/null +++ b/.changeset/late-birds-jam.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +feat(descriptions): 新增自定义列间距功能 diff --git a/.changeset/orange-seals-laugh.md b/.changeset/orange-seals-laugh.md new file mode 100644 index 000000000..b4955f1d3 --- /dev/null +++ b/.changeset/orange-seals-laugh.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/descriptions": minor +--- + +feat: 新增自定义列间距功能 diff --git a/packages/ui/descriptions/src/Cell.tsx b/packages/ui/descriptions/src/Cell.tsx index 10d3b17e3..fc1a23582 100644 --- a/packages/ui/descriptions/src/Cell.tsx +++ b/packages/ui/descriptions/src/Cell.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { cx } from '@hi-ui/classname' +import { cx, getPrefixStyleVar } from '@hi-ui/classname' import { isNullish } from '@hi-ui/type-assertion' export const Cell: React.FC = ({ @@ -13,6 +13,7 @@ export const Cell: React.FC = ({ label, content, labelWidth, + cellColumnGap, }) => { const Component: any = component @@ -42,7 +43,13 @@ export const Cell: React.FC = ({ return ( -
+
{!isNullish(label) && ( {label} @@ -67,4 +74,5 @@ export interface CellProps { label?: React.ReactNode content?: React.ReactNode labelWidth?: React.ReactText + cellColumnGap?: React.ReactText } diff --git a/packages/ui/descriptions/src/Descriptions.tsx b/packages/ui/descriptions/src/Descriptions.tsx index 5876e5d3d..9220da768 100644 --- a/packages/ui/descriptions/src/Descriptions.tsx +++ b/packages/ui/descriptions/src/Descriptions.tsx @@ -29,6 +29,7 @@ export const Descriptions = forwardRef appearance = 'unset', labelPlacement = 'left', labelWidth, + columnGap, size = 'md', ...rest }, @@ -66,6 +67,7 @@ export const Descriptions = forwardRef noBackground={noBackground} labelPlacement={labelPlacement} rootLabelWidth={labelWidth} + cellColumnGap={columnGap} /> ))} @@ -100,6 +102,11 @@ export interface DescriptionsProps extends HiBaseHTMLProps<'div'> { * label宽度 */ labelWidth?: React.ReactText + /** + * 单元格列间距 + * 注:在无边框场景下生效 + */ + columnGap?: React.ReactText /** * 设置大小 */ diff --git a/packages/ui/descriptions/src/Row.tsx b/packages/ui/descriptions/src/Row.tsx index aaec27471..c5117cb42 100644 --- a/packages/ui/descriptions/src/Row.tsx +++ b/packages/ui/descriptions/src/Row.tsx @@ -49,6 +49,7 @@ export interface RowProps { noBackground?: boolean labelPlacement?: 'left' | 'center' | 'right' rootLabelWidth?: React.ReactText + cellColumnGap?: React.ReactText } interface CellConfig { @@ -60,7 +61,13 @@ interface CellConfig { function renderCols( items: React.ReactElement[], - { prefixCls, bordered, labelPlacement: labelPlacementContext, rootLabelWidth }: RowProps, + { + prefixCls, + bordered, + labelPlacement: labelPlacementContext, + rootLabelWidth, + cellColumnGap, + }: RowProps, { component, type, showLabel, showContent }: CellConfig ) { return items.map( @@ -95,6 +102,7 @@ function renderCols( label={showLabel ? label : null} content={showContent ? children : null} labelWidth={labelWidth ?? rootLabelWidth} + cellColumnGap={index === items.length - 1 ? 0 : cellColumnGap} /> ) } diff --git a/packages/ui/descriptions/src/styles/descriptions.scss b/packages/ui/descriptions/src/styles/descriptions.scss index c274dcba0..d0d9a7ecb 100644 --- a/packages/ui/descriptions/src/styles/descriptions.scss +++ b/packages/ui/descriptions/src/styles/descriptions.scss @@ -36,6 +36,7 @@ $prefix: '#{$component-prefix}-descriptions' !default; &__container { box-sizing: border-box; display: flex; + padding-right: var(--hi-v4-container-padding-right, 0); } &__label,