element-plus/website/docs/es/radio.md
Xing.Wu 42239d2d8d
doc(docs): Radio code for composition (#2363)
Co-authored-by: xing.wu <wuxing@bjca.org.cn>
2021-06-30 15:11:12 +08:00

291 lines
8.6 KiB
Markdown

## 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 necesita 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>
<!--
<setup>
import { ref } from 'vue'
export default {
setup() {
const radio = ref('1');
return { radio }
}
}
</setup>
-->
```
:::
### Deshabilitado
El atributo `disabled` es utilizado para deshabilitar un Radio.
:::demo Solo necesita agregar el atributo `disabled`.
```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>
-->
```
:::
### Grupo de elementos Radio
Recomendado para seleccionar opciones que se excluyen mutuamente.
:::demo Combine `el-radio-group` con `el-radio` para mostrar un grupo de Radios. Enlace la variable con `v-model` del elemento `el-radio-group` y asigne el valor del `label` en `el-radio`. Se provee el evento `change` con el valor actual como parámetro.
```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>
-->
```
:::
### Estilo Button
Radio con estilo de botón.
:::demo Solo necesita cambiar el elemento `el-radio` a `el-radio-button`. Se provee el atributo `size`.
```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>
-->
```
:::
### Con bordes
:::demo El atributo `border` agrega un borde al elemento Radio.
```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>
-->
```
:::
### Atributos de Radio
| Atributo | Descripción | Tipo | Valores Aceptado | Por defecto |
| -------- | ---------------------------------------- | ------------------------- | --------------------- | ----------- |
| model-value / v-model | valor enlazado | string / number / boolean | — | — |
| 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 | tamaño 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 | 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 |
| ---------- | ---------------------------------------- | ------- | --------------------- | ------------------- |
| model-value / v-model | valor enlazado | string / number / boolean | — | — |
| size | tamaño de los `radio buttons` o `bordered radios` | string | medium / small / mini | — |
| disabled | si la anidación de radios está deshabilitada | 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 |