mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
feat: Space support align (#23306)
* support align * update demo & snapshot * update comment * update docs * Update components/space/index.en-US.md Co-Authored-By: 骗你是小猫咪 <darryshaw@gmail.com> * update doc Co-authored-by: 骗你是小猫咪 <darryshaw@gmail.com>
This commit is contained in:
二货机器人
GitHub
parent
87da7bfe67
commit
7e9fe271ed
@ -1,8 +1,159 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/space/demo/align.md correctly 1`] = `
|
||||
<div
|
||||
class="space-align-container"
|
||||
>
|
||||
<div
|
||||
class="space-align-block"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
center
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Primary
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="mock-block"
|
||||
>
|
||||
Block
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="space-align-block"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-start"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
start
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Primary
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="mock-block"
|
||||
>
|
||||
Block
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="space-align-block"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-end"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
end
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Primary
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="mock-block"
|
||||
>
|
||||
Block
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="space-align-block"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-baseline"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
baseline
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Primary
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="mock-block"
|
||||
>
|
||||
Block
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/space/demo/base.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
@ -125,7 +276,7 @@ Array [
|
||||
<br />,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
@ -184,7 +335,7 @@ Array [
|
||||
|
||||
exports[`renders ./components/space/demo/debug.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
@ -325,7 +476,7 @@ Array [
|
||||
<br />,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`Space should render correct with children 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
@ -29,7 +29,7 @@ exports[`Space should render correct with children 1`] = `
|
||||
exports[`Space should render width ConfigProvider 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
@ -48,7 +48,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
@ -67,7 +67,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
|
||||
71
components/space/demo/align.md
Normal file
71
components/space/demo/align.md
Normal file
@ -0,0 +1,71 @@
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 对齐
|
||||
en-US: Align
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
设置对齐模式。
|
||||
|
||||
## en-US
|
||||
|
||||
Config item align.
|
||||
|
||||
```jsx
|
||||
import { Space, Button } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div className="space-align-container">
|
||||
<div className="space-align-block">
|
||||
<Space align="center">
|
||||
center
|
||||
<Button type="primary">Primary</Button>
|
||||
<span className="mock-block">Block</span>
|
||||
</Space>
|
||||
</div>
|
||||
<div className="space-align-block">
|
||||
<Space align="start">
|
||||
start
|
||||
<Button type="primary">Primary</Button>
|
||||
<span className="mock-block">Block</span>
|
||||
</Space>
|
||||
</div>
|
||||
<div className="space-align-block">
|
||||
<Space align="end">
|
||||
end
|
||||
<Button type="primary">Primary</Button>
|
||||
<span className="mock-block">Block</span>
|
||||
</Space>
|
||||
</div>
|
||||
<div className="space-align-block">
|
||||
<Space align="baseline">
|
||||
baseline
|
||||
<Button type="primary">Primary</Button>
|
||||
<span className="mock-block">Block</span>
|
||||
</Space>
|
||||
</div>
|
||||
</div>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
```css
|
||||
.space-align-container {
|
||||
display: flex;
|
||||
align-item: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.space-align-block {
|
||||
margin: 8px 4px;
|
||||
border: 1px solid #40a9ff;
|
||||
padding: 4px;
|
||||
flex: none;
|
||||
}
|
||||
.space-align-block .mock-block {
|
||||
display: inline-block;
|
||||
padding: 32px 8px 16px;
|
||||
background: rgba(150, 150, 150, 0.2);
|
||||
}
|
||||
```
|
||||
@ -17,7 +17,7 @@ Custom spacing size.
|
||||
import React, { useState } from 'react';
|
||||
import { Space, Slider, Button } from 'antd';
|
||||
|
||||
function SpaceCutomizeSize() {
|
||||
function SpaceCustomizeSize() {
|
||||
const [size, setSize] = useState(8);
|
||||
|
||||
return (
|
||||
@ -35,5 +35,5 @@ function SpaceCutomizeSize() {
|
||||
);
|
||||
}
|
||||
|
||||
ReactDOM.render(<SpaceCutomizeSize />, mountNode);
|
||||
ReactDOM.render(<SpaceCustomizeSize />, mountNode);
|
||||
```
|
||||
|
||||
@ -15,5 +15,6 @@ Avoid components clinging together and set a unified space.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| size | space size | `small` \| `middle` \| `large` \| `number` | `small` | 4.1.0 |
|
||||
| align | align items | `start` \| `end` \|`center` \|`baseline` | - | 4.2.0 |
|
||||
| direction | space direction | `vertical` \| `horizontal` | `horizontal` | 4.1.0 |
|
||||
| size | space size | `small` \| `middle` \| `large` \| `number` | `small` | 4.1.0 |
|
||||
|
||||
@ -10,6 +10,8 @@ export interface SpaceProps {
|
||||
style?: React.CSSProperties;
|
||||
size?: SizeType | number;
|
||||
direction?: 'horizontal' | 'vertical';
|
||||
// No `stretch` since many components do not support that.
|
||||
align?: 'start' | 'end' | 'center' | 'baseline';
|
||||
}
|
||||
|
||||
const spaceSize = {
|
||||
@ -25,6 +27,7 @@ const Space: React.FC<SpaceProps> = props => {
|
||||
|
||||
const {
|
||||
size = space?.size || 'small',
|
||||
align,
|
||||
className,
|
||||
children,
|
||||
direction = 'horizontal',
|
||||
@ -39,11 +42,15 @@ const Space: React.FC<SpaceProps> = props => {
|
||||
return null;
|
||||
}
|
||||
|
||||
const mergedAlign = align === undefined && direction === 'horizontal' ? 'center' : align;
|
||||
const prefixCls = getPrefixCls('space', customizePrefixCls);
|
||||
const cn = classNames(
|
||||
prefixCls,
|
||||
`${prefixCls}-${direction}`,
|
||||
{ [`${prefixCls}-rtl`]: directionConfig === 'rtl' },
|
||||
{
|
||||
[`${prefixCls}-rtl`]: directionConfig === 'rtl',
|
||||
[`${prefixCls}-align-${mergedAlign}`]: mergedAlign,
|
||||
},
|
||||
className,
|
||||
);
|
||||
|
||||
|
||||
@ -16,5 +16,6 @@ cols: 1
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --------- | -------- | ------------------------------------------ | ------------ | ----- |
|
||||
| size | 间距大小 | `small` \| `middle` \| `large` \| `number` | `small` | 4.1.0 |
|
||||
| align | 对齐方式 | `start` \| `end` \|`center` \|`baseline` | - | 4.2.0 |
|
||||
| direction | 间距方向 | `vertical` \| `horizontal` | `horizontal` | 4.1.0 |
|
||||
| size | 间距大小 | `small` \| `middle` \| `large` \| `number` | `small` | 4.1.0 |
|
||||
|
||||
@ -5,12 +5,24 @@
|
||||
|
||||
.@{space-prefix-cls} {
|
||||
display: inline-flex;
|
||||
&-horizontal {
|
||||
align-items: center;
|
||||
}
|
||||
&-vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&-align {
|
||||
&-center {
|
||||
align-items: center;
|
||||
}
|
||||
&-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
&-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
&-baseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user