mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 01:41:20 +08:00
0949006f74
* docs(radio): Update the documentation of the radio component * docs(radio): Update code format
285 lines
7.5 KiB
Markdown
285 lines
7.5 KiB
Markdown
## Radio
|
|
|
|
Boutons de sélection entre plusieurs options.
|
|
|
|
### Usage
|
|
|
|
Radio ne devrait pas avoir trop d'options. Dans ce cas utilisez plutôt Select.
|
|
|
|
:::demo Créer un composant Radio est facile, vous avez juste besoin de lier les `v-model` des options. Chacun équivaut à la valeur de `label` du radio correspondant. Le type de `label` est `String`, `Number` ou `Boolean`.
|
|
```html
|
|
<template>
|
|
<el-radio v-model="radio" label="1">Option A</el-radio>
|
|
<el-radio v-model="radio" label="2">Option B</el-radio>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
radio: '1'
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
import { defineComponent, ref } from 'vue'
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
return {
|
|
radio: ref('1'),
|
|
}
|
|
}
|
|
})
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### Désactivé
|
|
|
|
L'attribut `disabled` désactive le radio.
|
|
|
|
:::demo Ajoutez simplement l'attribut `disabled` au radio.
|
|
```html
|
|
<template>
|
|
<el-radio disabled v-model="radio" label="disabled">Option A</el-radio>
|
|
<el-radio disabled v-model="radio" label="selected and disabled">Option B</el-radio>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
radio: 'selected and disabled'
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
import { defineComponent, ref } from 'vue'
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
return {
|
|
radio: ref('selected and disabled'),
|
|
}
|
|
}
|
|
})
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### Groupe de boutons radio
|
|
|
|
Utile pour choisir entre plusieurs groupes d'options mutuellement exclusives.
|
|
|
|
:::demo Combinez `el-radio-group` avec `el-radio` pour afficher un groupe de radios. Liez une variable au `v-model` de `el-radio-group` et configurez le label dans `el-radio`. Cet élément fournit aussi l'évènement `change` qui a en paramètre la valeur courante.
|
|
|
|
```html
|
|
<el-radio-group v-model="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>
|
|
export default {
|
|
data () {
|
|
return {
|
|
radio: 3
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
import { defineComponent, ref } from 'vue'
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
return {
|
|
radio: ref(3),
|
|
}
|
|
}
|
|
})
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### Style bouton
|
|
|
|
Des radios affichés comme des boutons standards.
|
|
|
|
:::demo Changez simplement `el-radio` pour `el-radio-button`. L'attribut `size` permet de régler la taille.
|
|
```html
|
|
<template>
|
|
<div>
|
|
<el-radio-group v-model="radio1">
|
|
<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="radio2" 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="radio3" size="small">
|
|
<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="radio4" 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>
|
|
export default {
|
|
data () {
|
|
return {
|
|
radio1: 'New York',
|
|
radio2: 'New York',
|
|
radio3: 'New York',
|
|
radio4: 'New York'
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
import { defineComponent, ref } from 'vue'
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
return {
|
|
radio1: ref('New York'),
|
|
radio2: ref('New York'),
|
|
radio3: ref('New York'),
|
|
radio4: ref('New York'),
|
|
}
|
|
}
|
|
})
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### Avec bordures
|
|
|
|
:::demo L'attribut `border` ajoute une bordure aux radios.
|
|
```html
|
|
<template>
|
|
<div>
|
|
<el-radio v-model="radio1" label="1" border>Option A</el-radio>
|
|
<el-radio v-model="radio1" label="2" border>Option B</el-radio>
|
|
</div>
|
|
<div style="margin-top: 20px">
|
|
<el-radio v-model="radio2" label="1" border size="medium">Option A</el-radio>
|
|
<el-radio v-model="radio2" label="2" border size="medium">Option B</el-radio>
|
|
</div>
|
|
<div style="margin-top: 20px">
|
|
<el-radio-group v-model="radio3" 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="radio4" 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 {
|
|
radio1: '1',
|
|
radio2: '1',
|
|
radio3: '1',
|
|
radio4: '1'
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
<!--
|
|
<setup>
|
|
import { defineComponent, ref } from 'vue'
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
return {
|
|
radio1: ref('1'),
|
|
radio2: ref('1'),
|
|
radio3: ref('1'),
|
|
radio4: ref('1'),
|
|
}
|
|
}
|
|
})
|
|
</setup>
|
|
-->
|
|
```
|
|
:::
|
|
|
|
### Attributs de Radio
|
|
|
|
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
|
| ---- | ---- | ---- | ---- | ---- |
|
|
| model-value / v-model | La valeur liée. | string / number / boolean | — | — |
|
|
| label | La valeur du radio. | string / number / boolean | — | — |
|
|
| disabled | Si le radio est désactivé. | boolean | — | false |
|
|
| border | Si une bordure doit être affichée autour du radio. | boolean | — | false |
|
|
| size | Taille du radio, ne marche que si `border` est `true`. | string | medium / small / mini | — |
|
|
| name | Attribut 'name' natif. | string | — | — |
|
|
|
|
### Évènements de Radio
|
|
|
|
| Nom | Description | Paramètres |
|
|
| --- | --- | --- |
|
|
| change | Se déclenche quand la valeur change. | La valeur du label. |
|
|
|
|
### Attributs de Radio-group
|
|
|
|
| Attribut | Description | Type | Valeurs acceptées | Défaut
|
|
| ---- | ---- | ---- | ---- | ---- |
|
|
| model-value / v-model | La valeur liée. | string / number / boolean | — | — |
|
|
| size | Taille des radios. | string | medium / small / mini | —
|
|
| disabled | Si les radios sont désactivés. | boolean | — | false
|
|
| text-color | Couleur du texte quand le bouton est actif. | string | — | #ffffff |
|
|
| fill | Bordure et couleur de fond quand le bouton est actif. | string | — | #409EFF |
|
|
|
|
### Évènements de Radio-group
|
|
|
|
| Nom | Description | Paramètres |
|
|
| --- | --- | --- |
|
|
| change | Se déclenche quand la valeur change. | La valeur du label. |
|
|
|
|
### Attributs Radio-button
|
|
|
|
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
|
| ---- | ---- | ---- | ---- | ---- |
|
|
| label | Valeur du radio. | string / number | — | — |
|
|
| disabled | Si le radio est désactivé. | boolean | — | false |
|
|
| name | Attribut 'name' natif. | string | — | — |
|