mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-11 19:42:54 +08:00
fix: checkbox & radio in flex align (#30260)
* fix: checkbox & radio in flex align * rm only md * docs: Update doc * test: Update snapshot
This commit is contained in:
二货机器人
GitHub
parent
37c1c302b1
commit
7c2c49316b
@ -158,6 +158,209 @@ Array [
|
|||||||
]
|
]
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./components/checkbox/demo/debug-line.md correctly 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||||
|
style="border:1px solid red;margin-bottom:16px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="ant-checkbox-wrapper"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-checkbox"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="ant-checkbox-input"
|
||||||
|
type="checkbox"
|
||||||
|
value="light"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-checkbox-inner"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
Bamboo
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="ant-checkbox-wrapper"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-checkbox"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="ant-checkbox-input"
|
||||||
|
type="checkbox"
|
||||||
|
value="little"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-checkbox-inner"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
Little
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||||
|
style="border:1px solid red;margin-bottom:16px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="ant-radio-wrapper"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-radio"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="ant-radio-input"
|
||||||
|
type="radio"
|
||||||
|
value="light"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-radio-inner"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
Bamboo
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="ant-radio-wrapper"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-radio"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="ant-radio-input"
|
||||||
|
type="radio"
|
||||||
|
value="little"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-radio-inner"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
Little
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style="border:1px solid red;margin-bottom:16px;display:flex;align-items:center"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="ant-checkbox-wrapper"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-checkbox"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="ant-checkbox-input"
|
||||||
|
type="checkbox"
|
||||||
|
value="light"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-checkbox-inner"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div>
|
||||||
|
Bamboo
|
||||||
|
</div>
|
||||||
|
<label
|
||||||
|
class="ant-checkbox-wrapper"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-checkbox"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="ant-checkbox-input"
|
||||||
|
type="checkbox"
|
||||||
|
value="little"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-checkbox-inner"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
Little
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style="border:1px solid red;margin-bottom:16px;display:flex;align-items:center"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="ant-radio-wrapper"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-radio"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="ant-radio-input"
|
||||||
|
type="radio"
|
||||||
|
value="light"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-radio-inner"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div>
|
||||||
|
Bamboo
|
||||||
|
</div>
|
||||||
|
<label
|
||||||
|
class="ant-radio-wrapper"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-radio"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="ant-radio-input"
|
||||||
|
type="radio"
|
||||||
|
value="little"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-radio-inner"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
Little
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`renders ./components/checkbox/demo/disabled.md correctly 1`] = `
|
exports[`renders ./components/checkbox/demo/disabled.md correctly 1`] = `
|
||||||
Array [
|
Array [
|
||||||
<label
|
<label
|
||||||
|
|||||||
65
components/checkbox/demo/debug-line.md
Normal file
65
components/checkbox/demo/debug-line.md
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
---
|
||||||
|
order: 99
|
||||||
|
title:
|
||||||
|
zh-CN: 同行布局
|
||||||
|
en-US: Same line
|
||||||
|
debug: true
|
||||||
|
---
|
||||||
|
|
||||||
|
## zh-CN
|
||||||
|
|
||||||
|
同行布局
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Same line
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Checkbox, Radio, Space } from 'antd';
|
||||||
|
|
||||||
|
const sharedStyle: React.CSSProperties = {
|
||||||
|
border: '1px solid red',
|
||||||
|
marginBottom: 16,
|
||||||
|
};
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<div>
|
||||||
|
<Space style={sharedStyle} align="center">
|
||||||
|
<Checkbox value="light" />
|
||||||
|
<div>Bamboo</div>
|
||||||
|
<Checkbox value="little">Little</Checkbox>
|
||||||
|
</Space>
|
||||||
|
|
||||||
|
<Space style={sharedStyle} align="center">
|
||||||
|
<Radio value="light" />
|
||||||
|
<div>Bamboo</div>
|
||||||
|
<Radio value="little">Little</Radio>
|
||||||
|
</Space>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
...sharedStyle,
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Checkbox value="light" />
|
||||||
|
<div>Bamboo</div>
|
||||||
|
<Checkbox value="little">Little</Checkbox>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
...sharedStyle,
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Radio value="light" />
|
||||||
|
<div>Bamboo</div>
|
||||||
|
<Radio value="little">Little</Radio>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
mountNode,
|
||||||
|
);
|
||||||
|
```
|
||||||
@ -151,6 +151,13 @@
|
|||||||
line-height: unset;
|
line-height: unset;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
content: '\a0';
|
||||||
|
}
|
||||||
|
|
||||||
&.@{checkbox-prefix-cls}-wrapper-disabled {
|
&.@{checkbox-prefix-cls}-wrapper-disabled {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -672,87 +672,106 @@ exports[`renders ./components/radio/demo/radiogroup-more.md correctly 1`] = `
|
|||||||
<div
|
<div
|
||||||
class="ant-radio-group ant-radio-group-outline"
|
class="ant-radio-group ant-radio-group-outline"
|
||||||
>
|
>
|
||||||
<label
|
<div
|
||||||
class="ant-radio-wrapper ant-radio-wrapper-checked"
|
class="ant-space ant-space-vertical"
|
||||||
style="display:block;height:30px;line-height:30px"
|
|
||||||
>
|
>
|
||||||
<span
|
<div
|
||||||
class="ant-radio ant-radio-checked"
|
class="ant-space-item"
|
||||||
|
style="margin-bottom:8px"
|
||||||
>
|
>
|
||||||
<input
|
<label
|
||||||
checked=""
|
class="ant-radio-wrapper ant-radio-wrapper-checked"
|
||||||
class="ant-radio-input"
|
>
|
||||||
type="radio"
|
<span
|
||||||
value="1"
|
class="ant-radio ant-radio-checked"
|
||||||
/>
|
>
|
||||||
<span
|
<input
|
||||||
class="ant-radio-inner"
|
checked=""
|
||||||
/>
|
class="ant-radio-input"
|
||||||
</span>
|
type="radio"
|
||||||
<span>
|
value="1"
|
||||||
Option A
|
/>
|
||||||
</span>
|
<span
|
||||||
</label>
|
class="ant-radio-inner"
|
||||||
<label
|
/>
|
||||||
class="ant-radio-wrapper"
|
</span>
|
||||||
style="display:block;height:30px;line-height:30px"
|
<span>
|
||||||
>
|
Option A
|
||||||
<span
|
</span>
|
||||||
class="ant-radio"
|
</label>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-bottom:8px"
|
||||||
>
|
>
|
||||||
<input
|
<label
|
||||||
class="ant-radio-input"
|
class="ant-radio-wrapper"
|
||||||
type="radio"
|
>
|
||||||
value="2"
|
<span
|
||||||
/>
|
class="ant-radio"
|
||||||
<span
|
>
|
||||||
class="ant-radio-inner"
|
<input
|
||||||
/>
|
class="ant-radio-input"
|
||||||
</span>
|
type="radio"
|
||||||
<span>
|
value="2"
|
||||||
Option B
|
/>
|
||||||
</span>
|
<span
|
||||||
</label>
|
class="ant-radio-inner"
|
||||||
<label
|
/>
|
||||||
class="ant-radio-wrapper"
|
</span>
|
||||||
style="display:block;height:30px;line-height:30px"
|
<span>
|
||||||
>
|
Option B
|
||||||
<span
|
</span>
|
||||||
class="ant-radio"
|
</label>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-bottom:8px"
|
||||||
>
|
>
|
||||||
<input
|
<label
|
||||||
class="ant-radio-input"
|
class="ant-radio-wrapper"
|
||||||
type="radio"
|
>
|
||||||
value="3"
|
<span
|
||||||
/>
|
class="ant-radio"
|
||||||
<span
|
>
|
||||||
class="ant-radio-inner"
|
<input
|
||||||
/>
|
class="ant-radio-input"
|
||||||
</span>
|
type="radio"
|
||||||
<span>
|
value="3"
|
||||||
Option C
|
/>
|
||||||
</span>
|
<span
|
||||||
</label>
|
class="ant-radio-inner"
|
||||||
<label
|
/>
|
||||||
class="ant-radio-wrapper"
|
</span>
|
||||||
style="display:block;height:30px;line-height:30px"
|
<span>
|
||||||
>
|
Option C
|
||||||
<span
|
</span>
|
||||||
class="ant-radio"
|
</label>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
>
|
>
|
||||||
<input
|
<label
|
||||||
class="ant-radio-input"
|
class="ant-radio-wrapper"
|
||||||
type="radio"
|
>
|
||||||
value="4"
|
<span
|
||||||
/>
|
class="ant-radio"
|
||||||
<span
|
>
|
||||||
class="ant-radio-inner"
|
<input
|
||||||
/>
|
class="ant-radio-input"
|
||||||
</span>
|
type="radio"
|
||||||
<span>
|
value="4"
|
||||||
More...
|
/>
|
||||||
</span>
|
<span
|
||||||
</label>
|
class="ant-radio-inner"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
More...
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|||||||
@ -14,7 +14,7 @@ title:
|
|||||||
Vertical Radio.Group, with more radios.
|
Vertical Radio.Group, with more radios.
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import { Radio, Input } from 'antd';
|
import { Radio, Input, Space } from 'antd';
|
||||||
|
|
||||||
class App extends React.Component {
|
class App extends React.Component {
|
||||||
state = {
|
state = {
|
||||||
@ -29,27 +29,18 @@ class App extends React.Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const radioStyle = {
|
|
||||||
display: 'block',
|
|
||||||
height: '30px',
|
|
||||||
lineHeight: '30px',
|
|
||||||
};
|
|
||||||
const { value } = this.state;
|
const { value } = this.state;
|
||||||
return (
|
return (
|
||||||
<Radio.Group onChange={this.onChange} value={value}>
|
<Radio.Group onChange={this.onChange} value={value}>
|
||||||
<Radio style={radioStyle} value={1}>
|
<Space direction="vertical">
|
||||||
Option A
|
<Radio value={1}>Option A</Radio>
|
||||||
</Radio>
|
<Radio value={2}>Option B</Radio>
|
||||||
<Radio style={radioStyle} value={2}>
|
<Radio value={3}>Option C</Radio>
|
||||||
Option B
|
<Radio value={4}>
|
||||||
</Radio>
|
More...
|
||||||
<Radio style={radioStyle} value={3}>
|
{value === 4 ? <Input style={{ width: 100, marginLeft: 10 }} /> : null}
|
||||||
Option C
|
</Radio>
|
||||||
</Radio>
|
</Space>
|
||||||
<Radio style={radioStyle} value={4}>
|
|
||||||
More...
|
|
||||||
{value === 4 ? <Input style={{ width: 100, marginLeft: 10 }} /> : null}
|
|
||||||
</Radio>
|
|
||||||
</Radio.Group>
|
</Radio.Group>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -32,6 +32,13 @@
|
|||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
margin-right: @radio-wrapper-margin-right;
|
margin-right: @radio-wrapper-margin-right;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
content: '\a0';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.@{radio-prefix-cls} {
|
.@{radio-prefix-cls} {
|
||||||
|
|||||||
@ -209,10 +209,6 @@
|
|||||||
&-footer {
|
&-footer {
|
||||||
border-top: @border-width-base @border-style-base @border-color-split;
|
border-top: @border-width-base @border-style-base @border-color-split;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-checkbox .@{ant-prefix}-checkbox {
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&-operation {
|
&-operation {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user