mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +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`] = `
|
||||
Array [
|
||||
<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;
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
content: '\a0';
|
||||
}
|
||||
|
||||
&.@{checkbox-prefix-cls}-wrapper-disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@ -672,87 +672,106 @@ exports[`renders ./components/radio/demo/radiogroup-more.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-radio-group ant-radio-group-outline"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-wrapper ant-radio-wrapper-checked"
|
||||
style="display:block;height:30px;line-height:30px"
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-radio-checked"
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="1"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Option A
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
style="display:block;height:30px;line-height:30px"
|
||||
>
|
||||
<span
|
||||
class="ant-radio"
|
||||
<label
|
||||
class="ant-radio-wrapper ant-radio-wrapper-checked"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-radio-checked"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="1"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Option A
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="2"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Option B
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
style="display:block;height:30px;line-height:30px"
|
||||
>
|
||||
<span
|
||||
class="ant-radio"
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="2"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Option B
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="3"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Option C
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
style="display:block;height:30px;line-height:30px"
|
||||
>
|
||||
<span
|
||||
class="ant-radio"
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="3"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Option C
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="4"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
More...
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="4"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
More...
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ title:
|
||||
Vertical Radio.Group, with more radios.
|
||||
|
||||
```jsx
|
||||
import { Radio, Input } from 'antd';
|
||||
import { Radio, Input, Space } from 'antd';
|
||||
|
||||
class App extends React.Component {
|
||||
state = {
|
||||
@ -29,27 +29,18 @@ class App extends React.Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
const radioStyle = {
|
||||
display: 'block',
|
||||
height: '30px',
|
||||
lineHeight: '30px',
|
||||
};
|
||||
const { value } = this.state;
|
||||
return (
|
||||
<Radio.Group onChange={this.onChange} value={value}>
|
||||
<Radio style={radioStyle} value={1}>
|
||||
Option A
|
||||
</Radio>
|
||||
<Radio style={radioStyle} value={2}>
|
||||
Option B
|
||||
</Radio>
|
||||
<Radio style={radioStyle} value={3}>
|
||||
Option C
|
||||
</Radio>
|
||||
<Radio style={radioStyle} value={4}>
|
||||
More...
|
||||
{value === 4 ? <Input style={{ width: 100, marginLeft: 10 }} /> : null}
|
||||
</Radio>
|
||||
<Space direction="vertical">
|
||||
<Radio value={1}>Option A</Radio>
|
||||
<Radio value={2}>Option B</Radio>
|
||||
<Radio value={3}>Option C</Radio>
|
||||
<Radio value={4}>
|
||||
More...
|
||||
{value === 4 ? <Input style={{ width: 100, marginLeft: 10 }} /> : null}
|
||||
</Radio>
|
||||
</Space>
|
||||
</Radio.Group>
|
||||
);
|
||||
}
|
||||
|
||||
@ -32,6 +32,13 @@
|
||||
align-items: baseline;
|
||||
margin-right: @radio-wrapper-margin-right;
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
content: '\a0';
|
||||
}
|
||||
}
|
||||
|
||||
.@{radio-prefix-cls} {
|
||||
|
||||
@ -209,10 +209,6 @@
|
||||
&-footer {
|
||||
border-top: @border-width-base @border-style-base @border-color-split;
|
||||
}
|
||||
|
||||
&-checkbox .@{ant-prefix}-checkbox {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-operation {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user