diff --git a/.changeset/flat-insects-smoke.md b/.changeset/flat-insects-smoke.md new file mode 100644 index 000000000..64b21c055 --- /dev/null +++ b/.changeset/flat-insects-smoke.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/descriptions": minor +--- + +feat: add size api diff --git a/.changeset/selfish-islands-double.md b/.changeset/selfish-islands-double.md new file mode 100644 index 000000000..8f4813727 --- /dev/null +++ b/.changeset/selfish-islands-double.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +Descriptions feat: add size api diff --git a/packages/ui/descriptions/src/Descriptions.tsx b/packages/ui/descriptions/src/Descriptions.tsx index 68916e474..5876e5d3d 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, + size = 'md', ...rest }, ref @@ -46,6 +47,7 @@ export const Descriptions = forwardRef appearance && `${prefixCls}--appearance-${appearance}`, placement && `${prefixCls}--placement-${placement}`, labelPlacement && `${prefixCls}--label-placement-${labelPlacement}`, + `${prefixCls}--size-${size}`, className ) @@ -98,6 +100,10 @@ export interface DescriptionsProps extends HiBaseHTMLProps<'div'> { * label宽度 */ labelWidth?: React.ReactText + /** + * 设置大小 + */ + size?: 'md' | 'sm' } if (__DEV__) { diff --git a/packages/ui/descriptions/src/styles/descriptions.scss b/packages/ui/descriptions/src/styles/descriptions.scss index e449254eb..85ac301ac 100644 --- a/packages/ui/descriptions/src/styles/descriptions.scss +++ b/packages/ui/descriptions/src/styles/descriptions.scss @@ -19,6 +19,7 @@ $prefix: '#{$component-prefix}-descriptions' !default; > th, > td { box-sizing: border-box; + padding: 0; font-weight: use-text-weight('normal'); } @@ -59,9 +60,18 @@ $prefix: '#{$component-prefix}-descriptions' !default; &--placement { &-horizontal { - .#{$prefix}-row > th, - .#{$prefix}-row > td { - padding-bottom: use-spacing(6); + &.#{$prefix}--size-md { + .#{$prefix}-row > th, + .#{$prefix}-row > td { + padding-bottom: use-spacing(6); + } + } + + &.#{$prefix}--size-sm { + .#{$prefix}-row > th, + .#{$prefix}-row > td { + padding-bottom: use-spacing(2); + } } } diff --git a/packages/ui/descriptions/stories/index.stories.tsx b/packages/ui/descriptions/stories/index.stories.tsx index 7b842165d..1cd29d467 100644 --- a/packages/ui/descriptions/stories/index.stories.tsx +++ b/packages/ui/descriptions/stories/index.stories.tsx @@ -9,6 +9,7 @@ export * from './col.stories' export * from './vertical.stories' export * from './vertical-border.stories' export * from './label-width.stories' +export * from './size.stories' export default { title: 'Data Display/Descriptions', diff --git a/packages/ui/descriptions/stories/size.stories.tsx b/packages/ui/descriptions/stories/size.stories.tsx new file mode 100644 index 000000000..373ddb9b6 --- /dev/null +++ b/packages/ui/descriptions/stories/size.stories.tsx @@ -0,0 +1,146 @@ +import React from 'react' +import Descriptions from '../src' +import Preview from '@hi-ui/preview' +import { JpgColorful } from '@hi-ui/icons' + +/** + * @title 设置大小 + */ +export const Size = () => { + const [images] = React.useState([ + 'http://i1.mifile.cn/f/i/hiui/docs/card/pic_1.png', + 'http://i1.mifile.cn/f/i/hiui/docs/card/pic_2.png', + 'http://i1.mifile.cn/f/i/hiui/docs/card/pic_3.png', + ]) + const [visible, setVisible] = React.useState(false) + const [current, setCurrent] = React.useState(0) + + return ( + <> +

Size

+
+

md

+ + + 第三方网点 + + + 主站 + + + 有效 + + + 某某有限公司 + + + 是 + + + + + + 备注内容可能会非常长备注内容可能会非常长备注内容可能会非常长 + + + { + setCurrent(0) + setVisible(true) + }} + /> + { + setCurrent(1) + setVisible(true) + }} + /> + { + setCurrent(2) + setVisible(true) + }} + /> + + +

sm

+ + + 第三方网点 + + + 主站 + + + 有效 + + + 某某有限公司 + + + 是 + + + + + + 备注内容可能会非常长备注内容可能会非常长备注内容可能会非常长 + + + { + setCurrent(0) + setVisible(true) + }} + /> + { + setCurrent(1) + setVisible(true) + }} + /> + { + setCurrent(2) + setVisible(true) + }} + /> + + + + { + setVisible(false) + }} + /> +
+ + ) +}