A single selection is made in a set of alternatives.
Single selection among multiple options.
### How to use
### Basic usage
As the option is visible by default, there should not be too many options. If too many options, the Select component is recommended.
Creating a radio component is easy, you just need to bind a variable by `v-bind` directive, and it means that the value of bound variable is equals to the value of `label` of which the `radio` you select. The type of `label` is `String` or `Number`.
:::demo
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`.
<el-radiodisabledv-model="radio1"label="selected and disabled">optionB</el-radio>
</template>
...
...
@@ -67,11 +63,9 @@ Creating a radio component is easy, you just need to bind a variable by `v-bind`
### Radio button group
Applicable to scenes selecting from multiple mutex options.
Suitable for choosing from some mutually exclusive options.
Combine `<el-radio-group>` with `<el-radio>` to display a radio group. Bind a variable in `<el-radio-group>` element and set label value in `<el-radio>`. It also provides `change` event to respond to the change of bound value.
:::demo
:::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-groupv-model="radio2">
...
...
@@ -80,52 +74,57 @@ Combine `<el-radio-group>` with `<el-radio>` to display a radio group. Bind a va
<el-radio:label="9">optionC</el-radio>
</el-radio-group>
```
:::
### Button style
Radio with button styles.
You just need to change `<el-radio>` element into `<el-radio-button>` element. Element also provides `size` attribute for the buttons array. There are two options: `large` and `small` if not default.
:::demo
:::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`.
let firstDemo = document.querySelector('.source');
firstDemo.style.padding = '0';
firstDemo.style.display = 'flex';
});
}
}
</script>
<style>
.demo-rate .block {
display: inline-block;
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
flex: 1;
&:last-child {
border-right: none;
}
}
.demo-rate .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
</style>
## Rate
Rate component
Used for rating
### How to use
### Basic usage
:::demo This component separate rate into three different levels and add colors to different rate (there is no color by default). Add colors by attribute `colors`. And using `low-threshold` and `high-threshold` to set thrasholds between different levels
:::demo Rate divides rating scores into three levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them to reflect three levels using the `colors` attribute, and their two thresholds can be defined by `low-threshold` and `high-threshold`.
``` html
<divclass="block">
<spanclass="demonstration">no color by default</span>
<spanclass="demonstration">Default</span>
<el-ratev-model="value1"></el-rate>
</div>
<divclass="block">
<spanclass="demonstration">color for different levels</span>
<spanclass="demonstration">Color for different levels</span>
<el-rate
v-model="value2"
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
</el-rate>
</div>
<script>
exportdefault{
data(){
return{
value1:null,
value2:null
}
}
}
</script>
```
:::
### Help Text
### With text
Using help text to indicate the rate
Using text to indicate rating score
:::demo Add attribute `show-text` to the component to display help text at the right side. The help texts for each rate can be defined by `texts`. `texts` is array, its length should be `max`.
:::demo Add attribute `show-text` to display text at the right of Rate. You can assign texts for different scores using `texts`. `texts` is an array whose length should be equal to the max score `max`.
You can use different icons to distinguish different rate components.
:::demo You can customize the icons for different level by attribute `icon-classes`. Following example also uses `void-icon-class` to set the icon when rate is empty.
:::demo You can customize icons for three different levels using `icon-classes`. In this example, we also use `void-icon-class` to set the icon if it is unselected.
``` html
<el-rate
...
...
@@ -88,14 +88,23 @@ You can use different icons to distinguish different rate components.
void-icon-class="icon-rate-face-off"
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
</el-rate>
<script>
exportdefault{
data(){
return{
value4:null
}
}
}
</script>
```
:::
### Read-only
Only display the rate and allow to set half star.
Read-only Rate is for displaying rating score. Half star is supported.
:::demo Use attribute `disabled` to make the component read-only. Meanwhile, add `show-text` to display the rate value at the right side. Additionally, you can use attribute `text-template` to create a template, it contains a string `{value}`, and `{value}` will be converted to rate value.
:::demo Use attribute `disabled` to make the component read-only. Add `show-text` to display the rating score at the right side. Additionally, you can use attribute `text-template` to provide a text template. It must contain `{value}`, and `{value}` will be replaced with the rating score.
``` html
<el-rate
...
...
@@ -103,31 +112,40 @@ Only display the rate and allow to set half star.
| allow-half | Allow set half star or not | boolean | — | false |
| low-threshold | Threshold value for low and medium level，this is value itself will be in low level | number | — | 2 |
| high-threshold | Threshold value for medium and high level，this is value itself will be in high level | number | — | 4 |
| colors | Color array for icon, it should contain 3 colors, each one for a level | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
| void-color | Color of unselected icon | string | — | #C6D1DE |
| disabled-void-color | Color of unselected read-only icon | string | — | #EFF2F7 |
| icon-classes | Array of class names of icon, it should contain 3 elements，each of them is associated with a rate level | array | — | ['el-icon-star-on', 'el-icon-star-on',<br>'el-icon-star-on'] |
| void-icon-class | The class name of unselected icon | string | — | el-icon-star-off |
| disabled-void-icon-class | The class name of unselected read-only icon | string | — | el-icon-star-on |
| show-text | Display help text or not | boolean | — | false |
| text-color | Color of help text | string | — | 1F2D3D |
| texts | Help text array | array | — | ['Bad', 'Disappoint', 'Normal', 'Satisfy', 'Surprise'] |
| text-template | Help text template when the component is read-only| string | — | {value} |
| low-threshold | threshold value between low and medium level. The value itself will be included in low level | number | — | 2 |
| high-threshold | threshold value between medium and high level. The value itself will be included in high level | number | — | 4 |
| colors | color array for icons. It should have 3 elements, each of which corresponds with a score level | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
| void-color | color of unselected icons | string | — | #C6D1DE |
| disabled-void-color | color of unselected read-only icons | string | — | #EFF2F7 |
| icon-classes | array of class names of icons. It should have 3 elements, each of which corresponds with a score level | array | — | ['el-icon-star-on', 'el-icon-star-on',<br>'el-icon-star-on'] |
| void-icon-class | class name of unselected icons | string | — | el-icon-star-off |
| disabled-void-icon-class | class name of unselected read-only icons | string | — | el-icon-star-on |
