Skip to content

E
Element
Commit 512543e3 authored by Leopoldthecoder's avatar Leopoldthecoder
Browse files
Options

add api for radio and checkbox

parent 9763c816
Show whitespace changes
Inline Side-by-side
Showing with 661 additions and 190 deletions
examples/docs/en-US/checkbox.md
View file @ 512543e3
......@@ -8,6 +8,10 @@
checked: true,
checked1: false,
checked2: true,
checked3: true,
checked4: false,
checked5: false,
checked6: true,
isValid: 'valid',
checkAll: false,
cities: cityOptions,
......@@ -15,8 +19,11 @@
checkedCities1: ['Shanghai', 'Beijing'],
isIndeterminate: true,
checkboxGroup1: ['Shanghai'],
checkboxGroup2: ['Beijing'],
checkboxGroup3: ['Guangzhou']
checkboxGroup2: ['Shanghai'],
checkboxGroup3: ['Shanghai'],
checkboxGroup4: ['Shanghai'],
checkboxGroup5: [],
checkboxGroup6: []
};
},
methods: {
......@@ -190,21 +197,29 @@ The `min` and `max` properties can help you to limit the number of checked items
Checkbox with button styles.
:::demo You just need to change `<el-checkbox>` element into `<el-checkbox-button>` element. We also provide `size` attribute for these buttons: `large` and `small`.
:::demo You just need to change `el-checkbox` element into `el-checkbox-button` element. We also provide `size` attribute.
```html
<template>
<div style="margin: 15px 0;"></div>
<div>
<el-checkbox-group v-model="checkboxGroup1">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkboxGroup2" size="small">
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Shenzhen'" :key="city">{{city}}</el-checkbox-button>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup2" size="medium">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkboxGroup3" size="large" fill="#324057" text-color="#a4aebd" :min="1" :max="3">
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup3" size="small">
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Beijing'" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
</template>
<script>
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
......@@ -213,8 +228,9 @@ Checkbox with button styles.
data () {
return {
checkboxGroup1: ['Shanghai'],
checkboxGroup2: ['Beijing'],
checkboxGroup3: ['Guangzhou'],
checkboxGroup2: ['Shanghai'],
checkboxGroup3: ['Shanghai'],
checkboxGroup4: ['Shanghai'],
cities: cityOptions
};
}
......@@ -223,15 +239,61 @@ Checkbox with button styles.
```
:::
### With borders
:::demo The `border` attribute adds a border to Checkboxes.
```html
<template>
<div>
<el-checkbox v-model="checked3" label="Option1" border></el-checkbox>
<el-checkbox v-model="checked4" label="Option2" border></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox v-model="checked5" label="Option1" border size="medium"></el-checkbox>
<el-checkbox v-model="checked6" label="Option2" border size="medium"></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup5" size="small">
<el-checkbox label="Option1" border></el-checkbox>
<el-checkbox label="Option2" border disabled></el-checkbox>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
<el-checkbox label="Option1" border></el-checkbox>
<el-checkbox label="Option2" border></el-checkbox>
</el-checkbox-group>
</div>
</template>
<script>
export default {
data () {
return {
checked3: true,
checked4: false,
checked5: false,
checked6: true,
checkboxGroup5: [],
checkboxGroup6: []
};
}
}
</script>
```
:::
### Checkbox Attributes
| Attribute | Description | Type | Options | Default|
|---------- |-------- |---------- |------------- |-------- |
| label | value of the checkbox when used inside a `checkbox-group` | string | — | — |
| true-label | value of the checkbox if it's checked | string, number | — | — |
| false-label | value of the checkbox if it's not checked | string, number | — | — |
| label | value of the Checkbox when used inside a `checkbox-group` | string / number / boolean | — | — |
| true-label | value of the Checkbox if it's checked | string / number | — | — |
| false-label | value of the Checkbox if it's not checked | string / number | — | — |
| disabled | whether the Checkbox is disabled | boolean | — | false |
| border | whether to add a border around Checkbox | boolean | — | false |
| size | size of the Checkbox, only works when `border` is true | string | medium / small / mini | — |
| name | native 'name' attribute | string | — | — |
| disabled | if the checkbox is disabled | boolean | — | false |
| checked | if the checkbox is checked | boolean | — | false |
| checked | if the Checkbox is checked | boolean | — | false |
| indeterminate | same as `indeterminate` in native checkbox | boolean | — | false |
### Checkbox Events
......@@ -242,13 +304,24 @@ Checkbox with button styles.
### Checkbox-group Attributes
| Attribute | Description | Type | Options | Default|
|---------- |-------- |---------- |------------- |-------- |
|size | the size of checkbox buttons | string | large/small | —
|fill | border and background color when button is active | string | — | #20a0ff |
|text-color | font color when button is active | string | — | #ffffff |
|size | size of checkbox buttons or bordered checkboxes | string | large/small | — |
| disabled | whether the nesting checkboxes are disabled | boolean | — | false |
| min | minimum number of checkbox checked | number | — | — |
| max | maximum number of checkbox checked | number | — | — |
|text-color | font color when button is active | string | — | #ffffff |
|fill | border and background color when button is active | string | — | #1989fa |
### Checkbox-group Events
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| change | triggers when the binding value changes | the updated value |
### Checkbox-button Attributes
| Attribute | Description | Type | Options | Default|
|---------- |-------- |---------- |------------- |-------- |
| label | value of the checkbox when used inside a `checkbox-group` | string / number / boolean | — | — |
| true-label | value of the checkbox if it's checked | string / number | — | — |
| false-label | value of the checkbox if it's not checked | string / number | — | — |
| disabled | whether the checkbox is disabled | boolean | — | false |
| name | native 'name' attribute | string | — | — |
| checked | if the checkbox is checked | boolean | — | false |
examples/docs/en-US/radio.md
View file @ 512543e3
......@@ -7,7 +7,12 @@
radio2: 3,
radio3: 'New York',
radio4: 'New York',
radio5: 'New York'
radio5: 'New York',
radio6: 'New York',
radio7: '1',
radio8: '1',
radio9: '1',
radio10: '1'
};
}
};
......@@ -21,11 +26,11 @@ Single selection among multiple options.
Radio should not have too many options. Otherwise, use the Select component instead.
:::demo Creating a radio component is easy, you just need to bind a variable to Radio's `v-model`. It equals to the value of `label` of the chosen radio. The type of `label` is `String` or `Number`.
:::demo Creating a radio component is easy, you just need to bind a variable to Radio's `v-model`. It equals to the value of `label` of the chosen radio. The type of `label` is `String`, `Number` or `Boolean`.
```html
<template>
<el-radio class="radio" v-model="radio" label="1">optionA</el-radio>
<el-radio class="radio" v-model="radio" label="2">optionB</el-radio>
<el-radio v-model="radio" label="1">Option A</el-radio>
<el-radio v-model="radio" label="2">Option B</el-radio>
</template>
<script>
......@@ -47,8 +52,8 @@ Radio should not have too many options. Otherwise, use the Select component inst
:::demo You just need to add the `disabled` attribute.
```html
<template>
<el-radio disabled v-model="radio1" label="disabled">optionA</el-radio>
<el-radio disabled v-model="radio1" label="selected and disabled">optionB</el-radio>
<el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>
<el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>
</template>
<script>
......@@ -67,13 +72,13 @@ Radio should not have too many options. Otherwise, use the Select component inst
Suitable for choosing from some mutually exclusive options.
:::demo Combine `<el-radio-group>` with `<el-radio>` to display a radio group. Bind a variable with `v-model` of `<el-radio-group>` element and set label value in `<el-radio>`. It also provides `change` event with the current value as its parameter.
:::demo Combine `el-radio-group` with `el-radio` to display a radio group. Bind a variable with `v-model` of `el-radio-group` element and set label value in `el-radio`. It also provides `change` event with the current value as its parameter.
```html
<el-radio-group v-model="radio2">
<el-radio :label="3">optionA</el-radio>
<el-radio :label="6">optionB</el-radio>
<el-radio :label="9">optionC</el-radio>
<el-radio :label="3">Option A</el-radio>
<el-radio :label="6">Option B</el-radio>
<el-radio :label="9">Option C</el-radio>
</el-radio-group>
<script>
......@@ -92,28 +97,42 @@ Suitable for choosing from some mutually exclusive options.
Radio with button styles.
:::demo You just need to change `<el-radio>` element into `<el-radio-button>` element. We also provide `size` attribute for these buttons: `large` and `small`.
:::demo You just need to change `el-radio` element into `el-radio-button` element. We also provide `size` attribute.
```html
<el-radio-group v-model="radio3">
<template>
<div>
<el-radio-group v-model="radio3">
<el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
<div style="margin: 15px 0;"></div>
<el-radio-group v-model="radio4">
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio4" size="medium">
<el-radio-button label="New York" ></el-radio-button>
<el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio5" size="small">
<el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington" :disabled="true"></el-radio-button>
<el-radio-button label="Washington" disabled ></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
<div style="margin: 15px 0;"></div>
<el-radio-group v-model="radio5" :disabled="true">
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio6" disabled size="mini">
<el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
</el-radio-group>
</div>
</template>
<script>
export default {
......@@ -121,7 +140,50 @@ Radio with button styles.
return {
radio3: 'New York',
radio4: 'New York',
radio5: 'New York'
radio5: 'New York',
radio6: 'New York'
};
}
}
</script>
```
:::
### With borders
:::demo The `border` attribute adds a border to Radios.
```html
<template>
<div>
<el-radio v-model="radio7" label="1" border>Option A</el-radio>
<el-radio v-model="radio7" label="2" border>Option B</el-radio>
</div>
<div style="margin-top: 20px">
<el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>
<el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio9" size="small">
<el-radio label="1" border>Option A</el-radio>
<el-radio label="2" border disabled>Option B</el-radio>
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio10" size="mini" disabled>
<el-radio label="1" border>Option A</el-radio>
<el-radio label="2" border>Option B</el-radio>
</el-radio-group>
</div>
</template>
<script>
export default {
data () {
return {
radio7: '1',
radio8: '1',
radio9: '1',
radio10: '1'
};
}
}
......@@ -133,8 +195,10 @@ Radio with button styles.
Attribute | Description | Type | Accepted Values | Default
---- | ---- | ---- | ---- | ----
label | the value of radio | string/number/boolean | — | —
disabled | whether radio is disabled | boolean | — | false
label | the value of Radio | string / number / boolean | — | —
disabled | whether Radio is disabled | boolean | — | false
border | whether to add a border around Radio | boolean | — | false
size | size of the Radio, only works when `border` is true | string | medium / small / mini | —
name | native 'name' attribute | string | — | —
### Radio Events
......@@ -147,9 +211,10 @@ name | native 'name' attribute | string | — | —
Attribute | Description | Type | Accepted Values | Default
---- | ---- | ---- | ---- | ----
size | the size of radio buttons | string | large/small | —
fill | border and background color when button is active | string | — | #20a0ff |
size | the size of radio buttons or bordered radios | string | medium / small / mini | —
disabled | whether the nesting radios are disabled | boolean | — | false
text-color | font color when button is active | string | — | #ffffff |
fill | border and background color when button is active | string | — | #1989fa |
### Radio-group Events
......@@ -161,7 +226,6 @@ text-color | font color when button is active | string | — | #ffffff |
Attribute | Description | Type | Accepted Values | Default
---- | ---- | ---- | ---- | ----
label | the value of radio | string/number | — | —
label | the value of radio | string / number | — | —
disabled | whether radio is disabled | boolean | — | false
name | native 'name' attribute | string | — | —
examples/docs/zh-CN/checkbox.md
View file @ 512543e3
......@@ -8,6 +8,10 @@
checked: true,
checked1: false,
checked2: true,
checked3: true,
checked4: false,
checked5: false,
checked6: true,
isValid: '可用',
checkAll: false,
cities: cityOptions,
......@@ -15,8 +19,11 @@
checkedCities1: ['上海', '北京'],
isIndeterminate: true,
checkboxGroup1: ['上海'],
checkboxGroup2: ['北京'],
checkboxGroup3: ['广州']
checkboxGroup2: ['上海'],
checkboxGroup3: ['上海'],
checkboxGroup4: ['上海'],
checkboxGroup5: [],
checkboxGroup6: []
};
},
methods: {
......@@ -35,18 +42,6 @@
}
};
</script>
<style>
.demo-box.demo-checkbox {
.checkbox {
margin-right: 5px;
& + .checkbox {
margin-left: 10px;
}
}
}
</style>
## Checkbox 多选框
一组备选项中进行多选
......@@ -201,21 +196,29 @@
按钮样式的多选组合。
:::demo 只需要把`el-checkbox`元素替换为`el-checkbox-button`元素即可。此外，Element 还提供了`size`属性，支持`large`和`small`两种。
:::demo 只需要把`el-checkbox`元素替换为`el-checkbox-button`元素即可。此外，Element 还提供了`size`属性。
```html
<template>
<div style="margin: 15px 0;"></div>
<div>
<el-checkbox-group v-model="checkboxGroup1">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkboxGroup2" size="small">
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '深圳'" :key="city">{{city}}</el-checkbox-button>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup2" size="medium">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkboxGroup3" size="large" fill="#324057" text-color="#a4aebd" :min="1" :max="3">
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup3" size="small">
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
......@@ -223,25 +226,71 @@
data () {
return {
checkboxGroup1: ['上海'],
checkboxGroup2: ['北京'],
checkboxGroup3: ['广州'],
checkboxGroup2: ['上海'],
checkboxGroup3: ['上海'],
checkboxGroup4: ['上海'],
cities: cityOptions
};
}
}
</script>
```
:::
### 带有边框
:::demo 设置`border`属性可以渲染为带有边框的多选框。
```html
<template>
<div>
<el-checkbox v-model="checked3" label="备选项1" border></el-checkbox>
<el-checkbox v-model="checked4" label="备选项2" border></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox v-model="checked5" label="备选项1" border size="medium"></el-checkbox>
<el-checkbox v-model="checked6" label="备选项2" border size="medium"></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup5" size="small">
<el-checkbox label="备选项1" border></el-checkbox>
<el-checkbox label="备选项2" border disabled></el-checkbox>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
<el-checkbox label="备选项1" border></el-checkbox>
<el-checkbox label="备选项2" border></el-checkbox>
</el-checkbox-group>
</div>
</template>
<script>
export default {
data () {
return {
checked3: true,
checked4: false,
checked5: false,
checked6: true,
checkboxGroup5: [],
checkboxGroup6: []
};
}
}
</script>
```
:::
### Checkbox Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| label | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string | — | — |
| true-label | 选中时的值 | string, number | — | — |
| false-label | 没有选中时的值 | string, number | — | — |
| label | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string / number / boolean | — | — |
| true-label | 选中时的值 | string / number | — | — |
| false-label | 没有选中时的值 | string / number | — | — |
| disabled | 是否禁用 | boolean | — | false |
| border | 是否显示边框 | boolean | — | false |
| size | Checkbox 的尺寸，仅在 border 为真时有效 | string | medium / small / mini | — |
| name | 原生 name 属性 | string | — | — |
| disabled | 按钮禁用 | boolean | — | false |
| checked | 当前是否勾选 | boolean | — | false |
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | — | false |
......@@ -253,13 +302,24 @@
### Checkbox-group Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| size | Checkbox 按钮组尺寸 | string | large, small | — |
| fill | 按钮激活时的填充色和边框色 | string | — | #20a0ff |
| text-color | 按钮激活时的文本颜色 | string | — | #ffffff |
| size | 多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效 | string | medium / small / mini | — |
| disabled | 是否禁用 | boolean | — | false |
| min | 可被勾选的 checkbox 的最小数量 | number | — | — |
| max | 可被勾选的 checkbox 的最大数量 | number | — | — |
| text-color | 按钮形式的 Checkbox 激活时的文本颜色 | string | — | #ffffff |
| fill | 按钮形式的 Checkbox 激活时的填充色和边框色 | string | — | #1989fa |
### Checkbox-group Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| change | 当绑定值变化时触发的事件 | 更新后的值 |
### Checkbox-button Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| label | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string / number / boolean | — | — |
| true-label | 选中时的值 | string / number | — | — |
| false-label | 没有选中时的值 | string / number | — | — |
| disabled | 是否禁用 | boolean | — | false |
| name | 原生 name 属性 | string | — | — |
| checked | 当前是否勾选 | boolean | — | false |
examples/docs/zh-CN/radio.md
View file @ 512543e3
......@@ -7,7 +7,12 @@
radio2: 3,
radio3: '上海',
radio4: '上海',
radio5: '上海'
radio5: '上海',
radio6: '上海',
radio7: '1',
radio8: '1',
radio9: '1',
radio10: '1'
};
}
};
......@@ -21,12 +26,12 @@
由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。
:::demo 要使用 Radio 组件，只需要设置`v-model`绑定变量，选中意味着变量的值为相应 Radio `label`属性的值，`label`可以是`String`或者`Number`。
:::demo 要使用 Radio 组件，只需要设置`v-model`绑定变量，选中意味着变量的值为相应 Radio `label`属性的值，`label`可以是`String`、`Number`或`Boolean`。
```html
<template>
<el-radio class="radio" v-model="radio" label="1">备选项</el-radio>
<el-radio class="radio" v-model="radio" label="2">备选项</el-radio>
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>
</template>
<script>
......@@ -45,7 +50,7 @@
单选框不可用的状态。
:::demo 注意：请牢记，选中的条件是绑定的变量值等于`label`中的值。只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
:::demo 只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
```html
<template>
<el-radio disabled v-model="radio1" label="禁用">备选项</el-radio>
......@@ -95,29 +100,41 @@
按钮样式的单选组合。
:::demo 只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性给按钮组，支持`large`和`small`两种（如果不设定为默认）。
:::demo 只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性。
```html
<template>
<div>
<el-radio-group v-model="radio3">
<el-radio-button label="上海"></el-radio-button>
<el-radio-button label="北京"></el-radio-button>
<el-radio-button label="广州"></el-radio-button>
<el-radio-button label="深圳"></el-radio-button>
</el-radio-group>
<div style="margin: 15px 0;"></div>
<el-radio-group v-model="radio4">
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio4" size="medium">
<el-radio-button label="上海" ></el-radio-button>
<el-radio-button label="北京"></el-radio-button>
<el-radio-button label="广州"></el-radio-button>
<el-radio-button label="深圳"></el-radio-button>
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio5" size="small">
<el-radio-button label="上海"></el-radio-button>
<el-radio-button label="北京" :disabled="true"></el-radio-button>
<el-radio-button label="北京" disabled ></el-radio-button>
<el-radio-button label="广州"></el-radio-button>
<el-radio-button label="深圳"></el-radio-button>
</el-radio-group>
<div style="margin: 15px 0;"></div>
<el-radio-group v-model="radio5" :disabled="true">
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio6" disabled size="mini">
<el-radio-button label="上海"></el-radio-button>
<el-radio-button label="北京"></el-radio-button>
<el-radio-button label="广州"></el-radio-button>
<el-radio-button label="深圳"></el-radio-button>
</el-radio-group>
</div>
</template>
<script>
......@@ -126,7 +143,50 @@
return {
radio3: '上海',
radio4: '上海',
radio5: '上海'
radio5: '上海',
radio6: '上海'
};
}
}
</script>
```
:::
### 带有边框
:::demo 设置`border`属性可以渲染为带有边框的单选框。
```html
<template>
<div>
<el-radio v-model="radio7" label="1" border>备选项1</el-radio>
<el-radio v-model="radio7" label="2" border>备选项2</el-radio>
</div>
<div style="margin-top: 20px">
<el-radio v-model="radio8" label="1" border size="medium">备选项1</el-radio>
<el-radio v-model="radio8" label="2" border size="medium">备选项2</el-radio>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio9" size="small">
<el-radio label="1" border>备选项1</el-radio>
<el-radio label="2" border disabled>备选项2</el-radio>
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio10" size="mini" disabled>
<el-radio label="1" border>备选项1</el-radio>
<el-radio label="2" border>备选项2</el-radio>
</el-radio-group>
</div>
</template>
<script>
export default {
data () {
return {
radio7: '1',
radio8: '1',
radio9: '1',
radio10: '1'
};
}
}
......@@ -137,8 +197,10 @@
### Radio Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| label | Radio 的 value | string,number,boolean | — | — |
| label | Radio 的 value | string / number / boolean | — | — |
| disabled | 是否禁用 | boolean | — | false |
| border | 是否显示边框 | boolean | — | false |
| size | Radio 的尺寸，仅在 border 为真时有效 | string | medium / small / mini | — |
| name | 原生 name 属性 | string | — | — |
### Radio Events
......@@ -149,9 +211,10 @@
### Radio-group Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| size | Radio 按钮组尺寸 | string | large, small | — |
| fill | 按钮激活时的填充色和边框色 | string | — | #20a0ff |
| text-color | 按钮激活时的文本颜色 | string | — | #ffffff |
| size | 单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效 | string | medium / small / mini | — |
| disabled | 是否禁用 | boolean | — | false |
| text-color | 按钮形式的 Radio 激活时的文本颜色 | string | — | #ffffff |
| fill | 按钮形式的 Radio 激活时的填充色和边框色 | string | — | #1989fa |
### Radio-group Events
| 事件名称 | 说明 | 回调参数 |
......@@ -161,5 +224,6 @@
### Radio-button Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| label | Radio 的 value | string,number | — | — |
| label | Radio 的 value | string / number | — | — |
| disabled | 是否禁用 | boolean | — | false |
| name | 原生 name 属性 | string | — | — |
packages/checkbox/src/checkbox-button.vue
View file @ 512543e3
......@@ -3,20 +3,20 @@
class="el-checkbox-button"
:class="[
size ? 'el-checkbox-button--' + size : '',
{ 'is-disabled': disabled },
{ 'is-disabled': isDisabled },
{ 'is-checked': isChecked },
{ 'is-focus': focus },
]"
role="checkbox"
:aria-checked="isChecked"
:aria-disabled="disabled"
:aria-disabled="isDisabled"
>
<input
v-if="trueLabel || falseLabel"
class="el-checkbox-button__original"
type="checkbox"
:name="name"
:disabled="disabled"
:disabled="isDisabled"
:true-value="trueLabel"
:false-value="falseLabel"
v-model="model"
......@@ -28,7 +28,7 @@
class="el-checkbox-button__original"
type="checkbox"
:name="name"
:disabled="disabled"
:disabled="isDisabled"
:value="label"
v-model="model"
@change="handleChange"
......@@ -135,6 +135,12 @@
size() {
return this._checkboxGroup.size;
},
isDisabled() {
return this._checkboxGroup
? this._checkboxGroup.disabled || this.disabled
: this.disabled;
}
},
methods: {
......
packages/checkbox/src/checkbox-group.vue
View file @ 512543e3
......@@ -10,6 +10,7 @@
props: {
value: {},
disabled: Boolean,
min: Number,
max: Number,
size: String,
......
packages/checkbox/src/checkbox.vue
View file @ 512543e3
<template>
<label
class="el-checkbox"
:class="[
border && checkboxSize ? 'el-checkbox--' + checkboxSize : '',
{ 'is-disabled': isDisabled },
{ 'is-bordered': border },
{ 'is-checked': isChecked }
]"
role="checkbox"
:aria-checked="indeterminate ? 'mixed': isChecked"
:aria-disabled="disabled"
:aria-disabled="isDisabled"
:id="id"
>
<span class="el-checkbox__input"
:class="{
'is-disabled': disabled,
'is-disabled': isDisabled,
'is-checked': isChecked,
'is-indeterminate': indeterminate,
'is-focus': focus
......@@ -21,7 +27,7 @@
class="el-checkbox__original"
type="checkbox"
:name="name"
:disabled="disabled"
:disabled="isDisabled"
:true-value="trueLabel"
:false-value="falseLabel"
v-model="model"
......@@ -32,7 +38,7 @@
v-else
class="el-checkbox__original"
type="checkbox"
:disabled="disabled"
:disabled="isDisabled"
:value="label"
:name="name"
v-model="model"
......@@ -117,6 +123,18 @@
store() {
return this._checkboxGroup ? this._checkboxGroup.value : this.value;
},
isDisabled() {
return this.isGroup
? this._checkboxGroup.disabled || this.disabled
: this.disabled;
},
checkboxSize() {
return this.isGroup
? this._checkboxGroup.size || this.size
: this.size;
}
},
......@@ -130,7 +148,9 @@
trueLabel: [String, Number],
falseLabel: [String, Number],
id: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/
controls: String /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/
controls: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/
border: Boolean,
size: String
},
methods: {
......
packages/radio/src/radio.vue
View file @ 512543e3
<template>
<label
class="el-radio"
:class="[
border && radioSize ? 'el-radio--' + radioSize : '',
{ 'is-disabled': isDisabled },
{ 'is-bordered': border },
{ 'is-checked': model === label }
]"
role="radio"
:aria-checked="model === label"
:aria-disabled="isDisabled"
......@@ -48,7 +54,9 @@
value: {},
label: {},
disabled: Boolean,
name: String
name: String,
border: Boolean,
size: String
},
data() {
......@@ -81,7 +89,11 @@
}
}
},
radioSize() {
return this.isGroup
? this._radioGroup.size || this.size
: this.size;
},
isDisabled() {
return this.isGroup
? this._radioGroup.disabled || this.disabled
......
packages/theme-chalk/src/checkbox.scss
View file @ 512543e3
......@@ -5,12 +5,75 @@
@include b(checkbox) {
color: $--checkbox-color;
font-weight: $--checkbox-font-weight;
line-height: 1;
position: relative;
cursor: pointer;
display: inline-block;
white-space: nowrap;
@include utils-user-select(none);
@include when(bordered) {
padding: $--checkbox-bordered-padding;
border-radius: $--border-radius-base;
border: $--border-base;
&.is-checked {
border-color: $--color-primary;
}
&.is-disabled {
border-color: $--border-color-lighter;
cursor: not-allowed;
}
& + .el-checkbox.is-bordered {
margin-left: 10px;
}
&.el-checkbox--medium {
padding: $--checkbox-bordered-medium-padding;
border-radius: $--button-medium-border-radius;
.el-checkbox__label {
font-size: $--button-medium-font-size;
}
.el-checkbox__inner {
height: $--checkbox-bordered-medium-input-height;
width: $--checkbox-bordered-medium-input-width;
}
}
&.el-checkbox--small {
padding: $--checkbox-bordered-small-padding;
border-radius: $--button-small-border-radius;
.el-checkbox__label {
font-size: $--button-small-font-size;
}
.el-checkbox__inner {
height: $--checkbox-bordered-small-input-height;
width: $--checkbox-bordered-small-input-width;
&::after {
height: 6px;
width: 2px;
}
}
}
&.el-checkbox--mini {
padding: $--checkbox-bordered-mini-padding;
border-radius: $--button-mini-border-radius;
.el-checkbox__label {
font-size: $--button-mini-font-size;
}
.el-checkbox__inner {
height: $--checkbox-bordered-mini-input-height;
width: $--checkbox-bordered-mini-input-width;
&::after {
height: 6px;
width: 2px;
}
}
}
}
@include e(input) {
white-space: nowrap;
cursor: pointer;
......@@ -55,7 +118,7 @@
}
}
}
& + .el-checkbox__label {
& + span.el-checkbox__label {
color: $--disabled-color-base;
cursor: not-allowed;
}
......@@ -69,11 +132,14 @@
transform: rotate(45deg) scaleY(1);
}
}
& + .el-checkbox__label {
color: $--checkbox-checked-text-color;
}
}
@include when(focus) { /*focus时 视觉上区分*/
.el-checkbox__inner {
border-color: $--checkbox-input-border-color-hover;
box-shadow: 0 0 1px 0 $--checkbox-input-border-color-hover;
}
}
@include when(indeterminate) {
......@@ -85,11 +151,12 @@
content: '';
position: absolute;
display: block;
border: 1px solid $--checkbox-checked-icon-color;
margin-top: -1px;
left: 3px;
right: 3px;
top: 50%;
background-color: $--checkbox-checked-icon-color;
height: 2px;
transform: scale(0.5);
left: 0;
right: 0;
top: 5px;
}
&::after {
......@@ -118,15 +185,15 @@
&::after {
box-sizing: content-box;
content: "";
border: 2px solid $--checkbox-checked-icon-color;
border: 1px solid $--checkbox-checked-icon-color;
border-left: 0;
border-top: 0;
height: 8px;
left: 5px;
height: 7px;
left: 4px;
position: absolute;
top: 1px;
transform: rotate(45deg) scaleY(0);
width: 4px;
width: 3px;
transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
transform-origin: center;
}
......@@ -144,11 +211,11 @@
@include e(label) {
font-size: $--checkbox-font-size;
padding-left: 5px;
padding-left: 10px;
}
& + .el-checkbox {
margin-left: 15px;
margin-left: 30px;
}
}
......@@ -159,6 +226,7 @@
@include e(inner) {
display: inline-block;
line-height: 1;
font-weight: $--checkbox-font-weight;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
......@@ -203,7 +271,7 @@
color: $--checkbox-button-checked-color;
background-color: $--checkbox-button-checked-fill;
border-color: $--checkbox-button-checked-border-color;
box-shadow: -1px 0 0 0 $--checkbox-button-checked-border-color;
box-shadow: -1px 0 0 0 $--color-primary-light-4;
}
}
......@@ -229,7 +297,6 @@
&.is-focus {
& .el-checkbox-button__inner {
border-color: $--checkbox-button-checked-border-color;
box-shadow: 0 0 1px 0 $--checkbox-button-checked-border-color !important;
}
}
......
packages/theme-chalk/src/color-picker.scss
View file @ 512543e3
@import "mixins/mixins";
@import "common/var";
@include b(color-hue-slider) {
......
packages/theme-chalk/src/common/var.scss
View file @ 512543e3
......@@ -76,6 +76,7 @@ $--fill-base: $--color-white;
$--font-size-base: 14px;
$--font-color-base: #5a5e66;
$--font-color-disabled-base: #bbb;
$--font-weight-primary: 500;
/* Size
-------------------------- */
......@@ -89,9 +90,9 @@ $--index-popper: 2000;
/* Disable base
-------------------------- */
$--disabled-fill-base: $--color-primary-light-9;
$--disabled-color-base: #bbb;
$--disabled-border-base: $--color-text-placeholder;
$--disabled-fill-base: $--border-color-extra-light;
$--disabled-color-base: $--color-text-placeholder;
$--disabled-border-base: $--border-color-lighter;
/* Icon
-------------------------- */
......@@ -100,10 +101,11 @@ $--icon-color: #666;
/* Checkbox
-------------------------- */
$--checkbox-font-size: 14px;
$--checkbox-font-weight: $--font-weight-primary;
$--checkbox-color: $--color-text-regular;
$--checkbox-input-height: 18px;
$--checkbox-input-width: 18px;
$--checkbox-input-border-radius: $--border-radius-base;
$--checkbox-input-height: 14px;
$--checkbox-input-width: 14px;
$--checkbox-input-border-radius: $--border-radius-small;
$--checkbox-input-fill: $--color-white;
$--checkbox-input-border: $--border-base;
$--checkbox-input-border-color: $--border-color-base;
......@@ -111,18 +113,30 @@ $--checkbox-icon-color: $--color-white;
$--checkbox-disabled-input-border-color: $--disabled-border-base;
$--checkbox-disabled-input-fill: $--disabled-fill-base;
$--checkbox-disabled-icon-color: $--disabled-fill-base;
$--checkbox-disabled-icon-color: $--color-text-placeholder;
$--checkbox-disabled-checked-input-fill: $--disabled-border-base;
$--checkbox-disabled-checked-input-border-color: $--disabled-border-base;
$--checkbox-disabled-checked-icon-color: $--color-white;
$--checkbox-disabled-checked-input-fill: $--border-color-extra-light;
$--checkbox-disabled-checked-input-border-color: $--border-color-base;
$--checkbox-disabled-checked-icon-color: $--color-text-placeholder;
$--checkbox-checked-input-border-color: $--color-primary-light-2;
$--checkbox-checked-text-color: $--color-primary;
$--checkbox-checked-input-border-color: $--color-primary;
$--checkbox-checked-input-fill: $--color-primary;
$--checkbox-checked-icon-color: $--fill-base;
$--checkbox-input-border-color-hover: $--color-primary;
$--checkbox-bordered-padding: 10px 20px 10px 10px;
$--checkbox-bordered-medium-padding: 8px 20px 8px 10px;
$--checkbox-bordered-small-padding: 6px 20px 6px 10px;
$--checkbox-bordered-mini-padding: 4px 20px 4px 10px;
$--checkbox-bordered-medium-input-height: 14px;
$--checkbox-bordered-medium-input-width: 14px;
$--checkbox-bordered-small-input-height: 12px;
$--checkbox-bordered-small-input-width: 12px;
$--checkbox-bordered-mini-input-height: 12px;
$--checkbox-bordered-mini-input-width: 12px;
$--checkbox-button-font-size: $--font-size-base;
$--checkbox-button-checked-fill: $--color-primary;
$--checkbox-button-checked-color: $--color-white;
......@@ -133,9 +147,10 @@ $--checkbox-button-checked-border-color: $--color-primary;
/* Radio
-------------------------- */
$--radio-font-size: 14px;
$--radio-color: $--color-text-primary;
$--radio-input-height: 18px;
$--radio-input-width: 18px;
$--radio-font-weight: $--font-weight-primary;
$--radio-color: $--color-text-regular;
$--radio-input-height: 14px;
$--radio-input-width: 14px;
$--radio-input-border-radius: $--border-radius-circle;
$--radio-input-fill: $--color-white;
$--radio-input-border: $--border-base;
......@@ -146,20 +161,33 @@ $--radio-disabled-input-border-color: $--disabled-border-base;
$--radio-disabled-input-fill: $--disabled-fill-base;
$--radio-disabled-icon-color: $--disabled-fill-base;
$--radio-disabled-checked-input-fill: $--disabled-border-base;
$--radio-disabled-checked-input-border-color: $--disabled-border-base;
$--radio-disabled-checked-icon-color: $--color-white;
$--radio-disabled-checked-input-fill: $--disabled-fill-base;
$--radio-disabled-checked-icon-color: $--color-text-placeholder;
$--radio-checked-text-color: $--color-primary;
$--radio-checked-input-border-color: $--color-primary;
$--radio-checked-input-fill: $--color-white;
$--radio-checked-icon-color: $--color-primary;
$--radio-input-border-color-hover: $--color-primary;
$--radio-bordered-padding: 10px 20px 10px 10px;
$--radio-bordered-medium-padding: 8px 20px 8px 10px;
$--radio-bordered-small-padding: 6px 20px 6px 10px;
$--radio-bordered-mini-padding: 4px 20px 4px 10px;
$--radio-bordered-medium-input-height: 14px;
$--radio-bordered-medium-input-width: 14px;
$--radio-bordered-small-input-height: 12px;
$--radio-bordered-small-input-width: 12px;
$--radio-bordered-mini-input-height: 12px;
$--radio-bordered-mini-input-width: 12px;
$--radio-button-font-size: $--font-size-base;
$--radio-button-checked-fill: $--color-primary;
$--radio-button-checked-color: $--color-white;
$--radio-button-checked-border-color: $--color-primary;
$--radio-button-disabled-checked-fill: $--border-color-extra-light;
/* Select
-------------------------- */
......@@ -343,7 +371,7 @@ $--tab-vertical-header-count-fill: $--color-text-secondary;
/* Button
-------------------------- */
$--button-font-size: 14px;
$--button-font-weight: 500;
$--button-font-weight: $--font-weight-primary;
$--button-border-radius: $--border-radius-base;
$--button-padding-vertical: 12px;
$--button-padding-horizontal: 18px;
......
packages/theme-chalk/src/date-picker/date-table.scss
View file @ 512543e3
@import "../common/var";
@import "../mixins/mixins";
@include b(date-table) {
font-size: 12px;
......
packages/theme-chalk/src/date-picker/picker.scss
View file @ 512543e3
@import "../mixins/mixins";
@import "../common/var";
@import "../common/transition";
......
packages/theme-chalk/src/form.scss
View file @ 512543e3
@import "mixins/mixins";
@import "mixins/utils";
@import "common/var";
@include b(form) {
......
packages/theme-chalk/src/menu.scss
View file @ 512543e3
@import "mixins/mixins";
@import "mixins/utils";
@import "common/var";
@mixin menu-item {
......
packages/theme-chalk/src/radio-button.scss
View file @ 512543e3
......@@ -13,6 +13,7 @@
vertical-align: middle;
background: $--button-default-fill;
border: $--border-base;
font-weight: $--button-font-weight;
border-left: 0;
color: $--button-default-color;
-webkit-appearance: none;
......@@ -64,6 +65,9 @@
border-color: $--button-disabled-border;
box-shadow: none;
}
&:checked + .el-radio-button__inner {
background-color: $--radio-button-disabled-checked-fill;
}
}
}
......@@ -77,7 +81,10 @@
&:focus {
outline: none;
.el-radio-button__inner { /*获得焦点时 样式提醒*/
box-shadow: 0 0 1px 1px $--radio-button-checked-border-color !important;
box-shadow: 0 0 1px 1px $--radio-button-checked-border-color;
}
&.is-disabled .el-radio-button__inner {
box-shadow: none;
}
}
&:last-child {
......
packages/theme-chalk/src/radio-group.scss
View file @ 512543e3
......@@ -3,11 +3,6 @@
@include b(radio-group) {
display: inline-block;
font-size: 0;
line-height: 1;
vertical-align: middle;
& .el-radio {
font-size: $--radio-font-size;
}
}
packages/theme-chalk/src/radio.scss
View file @ 512543e3
......@@ -5,21 +5,86 @@
@include b(radio) {
color: $--radio-color;
font-weight: $--radio-font-weight;
line-height: 1;
position: relative;
cursor: pointer;
display: inline-block;
white-space: nowrap;
@include utils-user-select(none);
@include when(bordered) {
padding: $--radio-bordered-padding;
border-radius: $--border-radius-base;
border: $--border-base;
&.is-checked {
border-color: $--color-primary;
}
&.is-disabled {
cursor: not-allowed;
border-color: $--border-color-lighter;
}
& + .el-radio.is-bordered {
margin-left: 10px;
}
}
@include m(medium) {
&.is-bordered {
padding: $--radio-bordered-medium-padding;
border-radius: $--button-medium-border-radius;
.el-radio__label {
font-size: $--button-medium-font-size;
}
.el-radio__inner {
height: $--radio-bordered-medium-input-height;
width: $--radio-bordered-medium-input-width;
}
}
}
@include m(small) {
&.is-bordered {
padding: $--radio-bordered-small-padding;
border-radius: $--button-small-border-radius;
.el-radio__label {
font-size: $--button-small-font-size;
}
.el-radio__inner {
height: $--radio-bordered-small-input-height;
width: $--radio-bordered-small-input-width;
}
}
}
@include m(mini) {
&.is-bordered {
padding: $--radio-bordered-mini-padding;
border-radius: $--button-mini-border-radius;
.el-radio__label {
font-size: $--button-mini-font-size;
}
.el-radio__inner {
height: $--radio-bordered-mini-input-height;
width: $--radio-bordered-mini-input-width;
}
}
}
&:focus { /*获得焦点时 样式提醒*/
outline: none;
.el-radio__inner {
box-shadow: 0 0 1px 1px $--radio-input-border-color-hover;
border-color: $--color-primary;
}
.is-disabled .el-radio__inner {
border-color: $--border-color-base;
}
}
& + .el-radio {
margin-left: 15px;
margin-left: 30px;
}
@include e(input) {
......@@ -56,8 +121,8 @@
}
}
}
& + .el-radio__label {
color: $--disabled-color-base;
& + span.el-radio__label {
color: $--color-text-placeholder;
cursor: not-allowed;
}
}
......@@ -71,6 +136,10 @@
transform: translate(-50%, -50%) scale(1);
}
}
& + .el-radio__label {
color: $--radio-checked-text-color;
}
}
@include when(focus) {
......@@ -83,7 +152,7 @@
border: $--radio-input-border;
border-radius: $--radio-input-border-radius;
width: $--radio-input-width;
height: $--radio-input-width;
height: $--radio-input-height;
background-color: $--radio-input-fill;
position: relative;
cursor: pointer;
......@@ -95,8 +164,8 @@
}
&::after {
width: 6px;
height: 6px;
width: 4px;
height: 4px;
border-radius: $--radio-input-border-radius;
background-color: $--color-white;
content: "";
......@@ -122,6 +191,6 @@
@include e(label) {
font-size: $--radio-font-size;
padding-left: 5px;
padding-left: 10px;
}
}
test/unit/specs/radio.spec.js
View file @ 512543e3
......@@ -150,7 +150,7 @@ describe('Radio', () => {
}
}, true);
let radio2 = vm.$refs.radio2;
expect(vm.$el.querySelectorAll('.is-disabled').length).to.be.equal(3);
expect(vm.$el.querySelectorAll('label.is-disabled').length).to.be.equal(3);
expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.exist;
radio2.$el.click();
vm.$nextTick(_ => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment