mirror of https://github.com/ElemeFE/element
232 lines
6.7 KiB
Markdown
232 lines
6.7 KiB
Markdown
<script>
|
|
module.exports = {
|
|
data() {
|
|
return {
|
|
radio: '1',
|
|
radio1: 'selected and disabled',
|
|
radio2: 3,
|
|
radio3: 'New York',
|
|
radio4: 'New York',
|
|
radio5: 'New York',
|
|
radio6: 'New York',
|
|
radio7: '1',
|
|
radio8: '1',
|
|
radio9: '1',
|
|
radio10: '1'
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
## Radio
|
|
Selección única entre múltiples opciones.
|
|
|
|
### Uso básico
|
|
El elemento Radio no debe tener muchas opciones. De otra manera, utilice el componente Select.
|
|
|
|
:::**Demo** Crear un elemento Radio es fácil, solo necesitas enlazar(`bind`) una variable a la directiva `v-model` del Radio. Va a ser igual al valor `label` del Radio seleccionado. El tipo de dato de `label` es `String`, `Number` o `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>
|
|
```
|
|
:::
|
|
|
|
### Deshabilitado
|
|
|
|
El atributo `disabled` es utilizado para deshabilitar un Radio.
|
|
|
|
:::**Demo** Solo necesitas agregar el atributo `disabled`.
|
|
```html
|
|
<template>
|
|
<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>
|
|
export default {
|
|
data () {
|
|
return {
|
|
radio1: 'selected and disabled'
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### Grupo de elementos Radio
|
|
|
|
Recomendado para seleccionar opciones que se excluyen mutuamente.
|
|
|
|
:::**Demo** Combina `el-radio-group` con `el-radio` para mostrar un grupo de Radios. Enlaza la variable con `v-model` del elemento `el-radio-group` y asigna el valor del `label` en `el-radio`. También provee el evento `change` con el valor actual como parámetro.
|
|
|
|
```html
|
|
<el-radio-group v-model="radio2">
|
|
<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 {
|
|
radio2: 3
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### Estilo Button
|
|
|
|
Radio con estilo de botón.
|
|
|
|
:::**Demo** Solo necesitas cambiar el elemento `el-radio` a `el-radio-button`. También proveemos el atributo `size`.
|
|
```html
|
|
<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>
|
|
<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 ></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>
|
|
export default {
|
|
data () {
|
|
return {
|
|
radio3: 'New York',
|
|
radio4: 'New York',
|
|
radio5: 'New York',
|
|
radio6: 'New York'
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### Con bordes
|
|
|
|
:::**Demo** El atributo `border` agrega un borde al elemento 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'
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### Atributos de Radio
|
|
|
|
Atributo | Descripción| Tipo |Valores Aceptado| Valores por defecto
|
|
---- | ---- | ---- | ---- | ----
|
|
label | el valor del Radio | string / number / boolean | — | —
|
|
disabled | si el Radio está deshabilitado| boolean | — | false
|
|
border | agregar borde alrededor del elemento Radio | boolean | — | false
|
|
size | tamanho del elemento Radio, solo funciona si `border` es verdadero | string | medium / small / mini | —
|
|
name | atributo nativo 'name'| string | — | —
|
|
|
|
### Atributos de Radio-button
|
|
|
|
Atributo | Descripción| Tipo |Valores Aceptado| Valores por defecto
|
|
---- | ---- | ---- | ---- | ----
|
|
label | el valor del Radio | string / number | — | —
|
|
disabled | si el Radio está deshabilitado | boolean | — | false
|
|
name | atributo nativo 'name' | string | — | —
|
|
|
|
### Atributos de Radio-group
|
|
|
|
Atributo | Descripción| Tipo |Valores Aceptado| Valores por defecto
|
|
---- | ---- | ---- | ---- | ----
|
|
size | tamanho de los `radio buttons` o `bordered radios` | string | medium / small / mini | —
|
|
disabled | si la anidación de radios está desahabilitada| boolean | — | false
|
|
text-color | color de las letras cuando el botón está activo | string | — | #ffffff |
|
|
fill | color del borde y fondo cuando el botón está activo | string | — | #409EFF |
|
|
|
|
### Eventos de Radio
|
|
|
|
| Nombre de evento| Descripción| Parámetros |
|
|
| --- | --- | --- |
|
|
| change | se dispara cuando el valor cambia | el valor del `label` del Radio seleccionado |
|
|
|
|
|
|
### Eventos de Radio-group
|
|
|
|
| Nombre de evento| Descripción| Parámetros |
|
|
| --- | --- | --- |
|
|
| change | se dispara cuando el valor cambia | el valor del `label` del Radio seleccionado |
|
|
|