Skip to content

Commit dc5482f

Browse files
wangxueliangwangxueliang
committed
2 parents e9899ac + 0a11195 commit dc5482f

29 files changed

+435
-380
lines changed

‎components/button/demo/multiple.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ If you need several buttons, we recommend that you use 1 primary button + n seco
1313
<div>
1414
<a-button type="primary">Primary</a-button>
1515
<a-button>secondary</a-button>
16-
<a-dropdown overlay={menu}>
16+
<a-dropdown>
1717
<a-menu slot="overlay" @click="handleMenuClick">
1818
<a-menu-item key="1">1st item</a-menu-item>
1919
<a-menu-item key="2">2nd item</a-menu-item>

‎components/radio/demo/basic.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<cn>
2+
#### 基本
3+
最简单的用法。
4+
</cn>
5+
6+
<us>
7+
#### Basic
8+
The simplest use.
9+
</us>
10+
11+
```html
12+
<template>
13+
<a-radio>Radio</a-radio>
14+
</template>
15+
```

‎components/radio/demo/basic.vue

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎components/radio/demo/disabled.vue renamed to ‎components/radio/demo/disabled.md

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
1+
<cn>
2+
#### 不可用
3+
Radio 不可用。
4+
</cn>
5+
6+
<us>
7+
#### disabled
8+
Radio unavailable.
9+
</us>
10+
11+
```html
112
<template>
213
<div>
3-
<Radio :defaultChecked="false" :disabled="disabled">Disabled</Radio>
14+
<a-radio :defaultChecked="false" :disabled="disabled">Disabled</a-radio>
415
<br />
5-
<Radio defaultChecked :disabled="disabled">Disabled</Radio>
16+
<a-radio defaultChecked :disabled="disabled">Disabled</a-radio>
617
<div :style="{ marginTop: 20 }">
718
<a-button type="primary" @click="toggleDisabled">
819
Toggle disabled
@@ -11,7 +22,6 @@
1122
</div>
1223
</template>
1324
<script>
14-
import { Radio, Button } from 'antd'
1525
export default {
1626
data () {
1727
return {
@@ -23,9 +33,6 @@ export default {
2333
this.disabled = !this.disabled
2434
},
2535
},
26-
components: {
27-
Radio,
28-
29-
},
3036
}
3137
</script>
38+
```

‎components/radio/demo/index.vue

Lines changed: 42 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,3 @@
1-
<template>
2-
<div>
3-
<h1>Basic</h1>
4-
<Basic />
5-
<h1>Disabled</h1>
6-
<Disabled />
7-
<h1>RadioButton</h1>
8-
<RadioButton />
9-
<h1>RadioGroupMore</h1>
10-
<RadioGroupMore />
11-
<h1>RadioGroupOptions</h1>
12-
<RadioGroupOptions />
13-
<h1>RadioGroupWithName</h1>
14-
<RadioGroupWithName />
15-
<h1>RadioGroup</h1>
16-
<RadioGroup />
17-
<h1>Size</h1>
18-
<Size />
19-
</div>
20-
</template>
211
<script>
222
import Basic from './basic'
233
import Disabled from './disabled'
@@ -27,20 +7,53 @@ import RadioGroupOptions from './radioGroup-options'
277
import RadioGroupWithName from './radioGroup-with-name'
288
import RadioGroup from './radioGroup'
299
import Size from './size'
10+
import CN from '../index.zh-CN.md'
11+
import US from '../index.en-US.md'
12+
13+
const md = {
14+
cn: `# 单选框
15+
单选框。
16+
17+
## 何时使用
18+
19+
- 用于在多个备选项中选中单个状态。
20+
- 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。
21+
## 代码演示`,
22+
us: `# Radio
23+
Radio.
24+
25+
## When To Use
26+
27+
- Used to select a single state in multiple options.
28+
- The difference between Select is that Radio is visible to user and can facilitate the comparison of choice. So, when you want to use Radio, option should not be too much.
29+
## Examples
30+
`,
31+
}
3032
export default {
3133
category: 'Components',
3234
subtitle: '单选框',
3335
type: 'Data Entry',
3436
title: 'Radio',
35-
components: {
36-
Basic,
37-
Disabled,
38-
RadioButton,
39-
RadioGroupMore,
40-
RadioGroupOptions,
41-
RadioGroupWithName,
42-
RadioGroup,
43-
Size,
37+
render () {
38+
return (
39+
<div>
40+
<md cn={md.cn} us={md.us}/>
41+
<Basic />
42+
<Disabled />
43+
<RadioButton />
44+
<RadioGroupMore />
45+
<RadioGroupOptions />
46+
<RadioGroupWithName />
47+
<RadioGroup />
48+
<Size />
49+
<api>
50+
<template slot='cn'>
51+
<CN/>
52+
</template>
53+
<US/>
54+
</api>
55+
</div>
56+
)
4457
},
4558
}
4659
</script>

‎components/radio/demo/radioButton.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<cn>
2+
#### 按钮样式
3+
按钮样式的单选组合。
4+
</cn>
5+
6+
<us>
7+
#### radio style
8+
The combination of radio button style.
9+
</us>
10+
11+
```html
12+
<template>
13+
<div>
14+
<div>
15+
<a-radio-group @change="onChange" defaultValue="a">
16+
<a-radio-button value="a">Hangzhou</a-radio-button>
17+
<a-radio-button value="b">Shanghai</a-radio-button>
18+
<a-radio-button value="c">Beijing</a-radio-button>
19+
<a-radio-button value="d">Chengdu</a-radio-button>
20+
</a-radio-group>
21+
</div>
22+
<div :style="{ marginTop: '16px' }">
23+
<a-radio-group @change="onChange" defaultValue="a">
24+
<a-radio-button value="a">Hangzhou</a-radio-button>
25+
<a-radio-button value="b" disabled>Shanghai</a-radio-button>
26+
<a-radio-button value="c">Beijing</a-radio-button>
27+
<a-radio-button value="d">Chengdu</a-radio-button>
28+
</a-radio-group>
29+
</div>
30+
<div :style="{ marginTop: '16px' }">
31+
<a-radio-group disabled @change="onChange" defaultValue="a">
32+
<a-radio-button value="a">Hangzhou</a-radio-button>
33+
<a-radio-button value="b">Shanghai</a-radio-button>
34+
<a-radio-button value="c">Beijing</a-radio-button>
35+
<a-radio-button value="d">Chengdu</a-radio-button>
36+
</a-radio-group>
37+
</div>
38+
</div>
39+
</template>
40+
<script>
41+
export default {
42+
methods: {
43+
onChange (e) {
44+
console.log(`checked = ${e.target.value}`)
45+
},
46+
},
47+
}
48+
</script>
49+
```

‎components/radio/demo/radioButton.vue

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎components/radio/demo/radioGroup-more.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<cn>
2+
#### RadioGroup 垂直
3+
垂直的 RadioGroup，配合更多输入框选项。
4+
</cn>
5+
6+
<us>
7+
#### Vertical RadioGroup
8+
Vertical RadioGroup, with more radios.
9+
</us>
10+
11+
```html
12+
<template>
13+
<a-radio-group @change="onChange" v-model="value">
14+
<a-radio :style="radioStyle" :value="1">Option A</a-radio>
15+
<a-radio :style="radioStyle" :value="2">Option B</a-radio>
16+
<a-radio :style="radioStyle" :value="3">Option C</a-radio>
17+
<a-radio :style="radioStyle" :value="4">
18+
More...
19+
<a-input v-if="value === 4" :style="{ width: 100, marginLeft: 10 }" />
20+
</a-radio>
21+
</a-radio-group>
22+
</template>
23+
<script>
24+
export default {
25+
data () {
26+
return {
27+
value: 1,
28+
radioStyle: {
29+
display: 'block',
30+
height: '30px',
31+
lineHeight: '30px',
32+
},
33+
}
34+
},
35+
methods: {
36+
onChange (e) {
37+
console.log('radio checked', e.target.value)
38+
},
39+
},
40+
}
41+
</script>
42+
```

‎components/radio/demo/radioGroup-more.vue

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎components/radio/demo/radioGroup-options.vue renamed to ‎components/radio/demo/radioGroup-options.md

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,24 @@
1+
<cn>
2+
#### RadioGroup 组合 - 配置方式
3+
通过配置 `options` 参数来渲染单选框。
4+
</cn>
5+
6+
<us>
7+
#### RadioGroup group - optional
8+
Render radios by configuring `options`.
9+
</us>
10+
11+
```html
112
<template>
213
<div>
3-
<RadioGroup :options="plainOptions" @change="onChange1" :defaultValue="value1" />
14+
<a-radio-group :options="plainOptions" @change="onChange1" :defaultValue="value1" />
415
<br />
5-
<RadioGroup :options="options" @change="onChange2" v-model="value2" />
16+
<a-radio-group :options="options" @change="onChange2" v-model="value2" />
617
<br />
7-
<RadioGroup :options="optionsWithDisabled" disabled @change="onChange3" v-model="value3" />
18+
<a-radio-group :options="optionsWithDisabled" disabled @change="onChange3" v-model="value3" />
819
</div>
920
</template>
1021
<script>
11-
import { Radio } from 'antd'
1222
const plainOptions = ['Apple', 'Pear', 'Orange']
1323
const options = [
1424
{ label: 'Apple', value: 'Apple' },
@@ -42,9 +52,6 @@ export default {
4252
console.log('radio3 checked', e.target.value)
4353
},
4454
},
45-
components: {
46-
Radio,
47-
RadioGroup: Radio.Group,
48-
},
4955
}
5056
</script>
57+
```

0 commit comments

Comments
 (0)