ant-design/index.zh-CN.md at 20e09e6c3138ce00b0ff11aa4d7e29cec36bc7de

mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 03:59:01 +08:00

feat: Space support classNames and styles (#42743 )

* feat: add styles and classNames properties

* Update components/space/index.en-US.md

Co-authored-by: kiner-tang(文辉) <1127031143@qq.com>

* docs: fix prettier issue

---------

Co-authored-by: kiner-tang(文辉) <1127031143@qq.com>

2023-05-31 13:43:38 +08:00

2.8 KiB

Raw Blame History

category	group	subtitle	title	cover	coverDark
Components	布局	间距	Space	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZiJ3SbOH9SUAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAAAAAAAAAAAADrJ8AQ/original

设置组件之间的间距。

何时使用

避免组件紧贴在一起，拉开统一的空间。

适合行内元素的水平间距。
可以设置各种水平对齐方式。
需要表单组件之间紧凑连接且合并边框时，使用 Space.Compact（自 antd@4.24.0 版本开始提供该组件）。

代码演示

基本用法 垂直间距 间距大小 对齐 自定义尺寸 自动换行 分隔符 紧凑布局组合 Button 紧凑布局 垂直方向紧凑布局 调试 Input 前置/后置标签 紧凑布局嵌套 多样的 Child Flex gap 样式

API

Space

参数	说明	类型	默认值	版本
align	对齐方式	`start` \| `end` \|`center` \|`baseline`	-	4.2.0
direction	间距方向	`vertical` \| `horizontal`	`horizontal`	4.1.0
size	间距大小	Size \| Size[]	`small`	4.1.0 \| Array: 4.9.0
split	设置拆分	ReactNode	-	4.7.0
wrap	是否自动换行，仅在 `horizontal` 时有效	boolean	false	4.9.0

Size

'small' | 'middle' | 'large' | number

Space.Compact

自 antd@4.24.0 版本开始提供该组件。

需要表单组件之间紧凑连接且合并边框时，使用 Space.Compact。支持的组件有：

Button
AutoComplete
Cascader
DatePicker
Input/Input.Search
Select
TimePicker
TreeSelect

参数	说明	类型	默认值	版本
block	将宽度调整为父元素宽度的选项	boolean	false	4.24.0
direction	指定排列方向	`vertical` \| `horizontal`	`horizontal`	4.24.0
size	子组件大小	`large` \| `middle` \| `small`	`middle`	4.24.0

`styles` 和 `classNames` 属性

名称	说明	版本
item	设置 `Space` 包裹的子组件	5.6.0

2.8 KiB Raw Blame History Unescape Escape