Skip to content

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

add api for radio and checkbox

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