mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

Add buttonStyle(outline|solid) for RadioGroup

Browse Source
This commit is contained in:
afc163 2018-06-28 14:59:19 +08:00
parent f2e22e702e
commit 3eee357bfb
8 changed files with 248 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

198
components/radio/__tests__/__snapshots__/demo.test.js.snap
View File

@ -82,7 +82,7 @@ exports[`renders ./components/radio/demo/radiobutton.md correctly 1`] = `
<div>
<div>
<div
class="ant-radio-group"
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
@ -167,7 +167,7 @@ exports[`renders ./components/radio/demo/radiobutton.md correctly 1`] = `
style="margin-top:16px"
>
<div
class="ant-radio-group"
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
@ -253,7 +253,7 @@ exports[`renders ./components/radio/demo/radiobutton.md correctly 1`] = `
style="margin-top:16px"
>
<div
class="ant-radio-group"
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-disabled"
@ -341,9 +341,183 @@ exports[`renders ./components/radio/demo/radiobutton.md correctly 1`] = `
</div>
`;
exports[`renders ./components/radio/demo/radiobutton-solid.md correctly 1`] = `
<div>
<div>
<div
class="ant-radio-group ant-radio-group-solid"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<span
class="ant-radio-button ant-radio-button-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="a"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Hangzhou
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="b"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Shanghai
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="c"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Beijing
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="d"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Chengdu
</span>
</label>
</div>
</div>
<div
style="margin-top:16px"
>
<div
class="ant-radio-group ant-radio-group-solid"
>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="a"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Hangzhou
</span>
</label>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"
>
<span
class="ant-radio-button ant-radio-button-disabled"
>
<input
class="ant-radio-button-input"
disabled=""
type="radio"
value="b"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Shanghai
</span>
</label>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<span
class="ant-radio-button ant-radio-button-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
value="c"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Beijing
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
value="d"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Chengdu
</span>
</label>
</div>
</div>
</div>
`;
exports[`renders ./components/radio/demo/radiogroup.md correctly 1`] = `
<div
class="ant-radio-group"
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-wrapper ant-radio-wrapper-checked"
@ -427,7 +601,7 @@ exports[`renders ./components/radio/demo/radiogroup.md correctly 1`] = `
exports[`renders ./components/radio/demo/radiogroup-more.md correctly 1`] = `
<div
class="ant-radio-group"
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-wrapper ant-radio-wrapper-checked"
@ -516,7 +690,7 @@ exports[`renders ./components/radio/demo/radiogroup-more.md correctly 1`] = `
exports[`renders ./components/radio/demo/radiogroup-options.md correctly 1`] = `
<div>
<div
class="ant-radio-group"
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-wrapper ant-radio-wrapper-checked"
@ -578,7 +752,7 @@ exports[`renders ./components/radio/demo/radiogroup-options.md correctly 1`] = `
</label>
</div>
<div
class="ant-radio-group"
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-wrapper ant-radio-wrapper-checked"
@ -640,7 +814,7 @@ exports[`renders ./components/radio/demo/radiogroup-options.md correctly 1`] = `
</label>
</div>
<div
class="ant-radio-group"
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-wrapper ant-radio-wrapper-checked"
@ -706,7 +880,7 @@ exports[`renders ./components/radio/demo/radiogroup-options.md correctly 1`] = `
exports[`renders ./components/radio/demo/radiogroup-with-name.md correctly 1`] = `
<div
class="ant-radio-group"
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-wrapper ant-radio-wrapper-checked"
@ -796,7 +970,7 @@ exports[`renders ./components/radio/demo/size.md correctly 1`] = `
<div>
<div>
<div
class="ant-radio-group ant-radio-group-large"
class="ant-radio-group ant-radio-group-outline ant-radio-group-large"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
@ -881,7 +1055,7 @@ exports[`renders ./components/radio/demo/size.md correctly 1`] = `
style="margin-top:16px"
>
<div
class="ant-radio-group"
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
@ -966,7 +1140,7 @@ exports[`renders ./components/radio/demo/size.md correctly 1`] = `
style="margin-top:16px"
>
<div
class="ant-radio-group ant-radio-group-small"
class="ant-radio-group ant-radio-group-outline ant-radio-group-small"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"

2
components/radio/__tests__/__snapshots__/group.test.js.snap
View File

@ -2,7 +2,7 @@
exports[`Radio passes prefixCls down to radio 1`] = `
<div
class="my-radio-group"
class="my-radio-group my-radio-group-outline"
>
<label
class="my-radio-wrapper"

39
components/radio/demo/radiobutton-solid.md Normal file
View File

@ -0,0 +1,39 @@
---
order: 6
title:
zh-CN: 填底的按钮样式
en-US: Solid radio button
---
## zh-CN
实色填底的单选按钮样式。
## en-US
Solid radio button style.
```jsx
import { Radio } from 'antd';
ReactDOM.render(
<div>
<div>
<Radio.Group defaultValue="a" buttonStyle="solid">
<Radio.Button value="a">Hangzhou</Radio.Button>
<Radio.Button value="b">Shanghai</Radio.Button>
<Radio.Button value="c">Beijing</Radio.Button>
<Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>
</div>
<div style={{ marginTop: 16 }}>
<Radio.Group defaultValue="c" buttonStyle="solid">
<Radio.Button value="a">Hangzhou</Radio.Button>
<Radio.Button value="b" disabled>Shanghai</Radio.Button>
<Radio.Button value="c">Beijing</Radio.Button>
<Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>
</div>
</div>,
mountNode);
```

5
components/radio/group.tsx
View File

@ -21,6 +21,7 @@ export default class RadioGroup extends React.Component<RadioGroupProps, RadioGr
static defaultProps = {
disabled: false,
prefixCls: 'ant-radio',
buttonStyle: 'outline',
};
static childContextTypes = {
@ -90,9 +91,9 @@ export default class RadioGroup extends React.Component<RadioGroupProps, RadioGr
}
render() {
const props = this.props;
const { prefixCls, className = '', options } = props;
const { prefixCls, className = '', options, buttonStyle } = props;
const groupPrefixCls = `${prefixCls}-group`;
const classString = classNames(groupPrefixCls, {
const classString = classNames(groupPrefixCls, `${groupPrefixCls}-${buttonStyle}`, {
[`${groupPrefixCls}-${props.size}`]: props.size,
}, className);

1
components/radio/index.en-US.md
View File

@ -36,6 +36,7 @@ Radio group can wrap a group of `Radio`。
| size | size for radio button style | `large` \| `default` \| `small` | `default` |
| value | Used for setting the currently selected value. | any | - |
| onChange | The callback function that is triggered when the state changes. | Function(e:Event) | - |
| buttonStyle | style type of radio button | `outline` \| `solid` | `outline` |
## Methods

1
components/radio/index.zh-CN.md
View File

@ -36,6 +36,7 @@ title: Radio
| size | 大小，只对按钮样式生效 | `large` \| `default` \| `small` | `default` |
| value | 用于设置当前选中的值 | any | - |
| onChange | 选项变化时的回调函数 | Function(e:Event) | - |
| buttonStyle | RadioButton 的风格样式，目前有描边和填色两种风格 | `outline` \| `solid` | `outline` |
## 方法

1
components/radio/interface.tsx
View File

@ -12,6 +12,7 @@ export interface RadioGroupProps extends AbstractCheckboxGroupProps {
name?: string;
children?: React.ReactNode;
id?: string;
buttonStyle?: 'outline' | 'solid';
}
export interface RadioGroupState {

16
components/radio/style/index.less
View File

@ -244,6 +244,22 @@ span.@{radio-prefix-cls} + * {
}
}
.@{radio-group-prefix-cls}-solid &-checked:not(&-disabled) {
background: @radio-dot-color;
border-color: @radio-dot-color;
color: #fff;
&:hover {
border-color: @radio-button-hover-color;
background: @radio-button-hover-color;
color: #fff;
}
&:active {
border-color: @radio-button-active-color;
background: @radio-button-active-color;
color: #fff;
}
}
&-disabled {
border-color: @border-color-base;
background-color: @input-disabled-bg;