Skip to content

E
Element
Commit 3764f1a3 authored by Federico Garcia's avatar Federico Garcia Committed by 杨奕
Browse files
Options

Translated to spanish - checkbox, collapse and color-picker

parent 122fd84c
Show whitespace changes
Inline Side-by-side
Showing with 111 additions and 110 deletions
examples/docs/es/checkbox.md
View file @ 3764f1a3
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
module.exports = { module.exports = {
data() { data() {
return { return {
checkList: ['selected and disabled','Option A'], checkList: ['seleccionado y deshabilitado','Opción A'],
// checkList2: ['Option A'], // checkList2: ['Opción A'],
checked: true, checked: true,
checked1: false, checked1: false,
checked2: true, checked2: true,
...@@ -45,18 +45,18 @@ ...@@ -45,18 +45,18 @@
## Checkbox ## Checkbox
A group of options for multiple choices. Un grupo de opciones para manejar múltiples elecciones.
### Basic usage ### Uso básico
Checkbox can be used alone to switch between two states. Checkbox puede ser usado para alternar entre dos estados.
:::demo Define `v-model`(bind variable) in `el-checkbox`. The default value is a `Boolean` for single `checkbox`, and it becomes `true` when selected. Content inside the `el-checkbox` tag will become the description following the button of the checkbox. :::demo Define `v-model`(enlaza la variable) en `el-checkbox`. El valor por defecto es un `Boolean` para un `checkbox`, y se convierte en `true` cuando este es seleccionado. El contenido dentro del tag `el-checkbox` se convierte en la descripción al costado del botón del checkbox.
```html ```html
<template> <template>
<!-- `checked` should be true or false --> <!-- `checked` debe ser true o false -->
<el-checkbox v-model="checked">Option</el-checkbox> <el-checkbox v-model="checked">Opción</el-checkbox>
</template> </template>
<script> <script>
export default { export default {
...@@ -70,16 +70,16 @@ Checkbox can be used alone to switch between two states. ...@@ -70,16 +70,16 @@ Checkbox can be used alone to switch between two states.
``` ```
::: :::
### Disabled State ### Estado Deshabilitado
Disabled state for checkbox. Estado deshabilitado para el checkbox.
::: demo Set the `disabled` attribute. ::: demo Setear el atributo `disabled`.
```html ```html
<template> <template>
<el-checkbox v-model="checked1" disabled>Option</el-checkbox> <el-checkbox v-model="checked1" disabled>Opción</el-checkbox>
<el-checkbox v-model="checked2" disabled>Option</el-checkbox> <el-checkbox v-model="checked2" disabled>Opción</el-checkbox>
</template> </template>
<script> <script>
export default { export default {
...@@ -94,20 +94,20 @@ Disabled state for checkbox. ...@@ -94,20 +94,20 @@ Disabled state for checkbox.
``` ```
::: :::
### Checkbox group ### Grupo de Checkboxes
It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked. Es usado por multiples checkboxes los cuales están enlazados a un grupo, indica si una opción está seleccionada verificando si esta está marcada.
:::demo `checkbox-group` element can manage multiple checkboxes in one group by using `v-model` which is bound as an `Array`. Inside the `el-checkbox` element, `label` is the value of the checkbox. If no content is nested in that tag, `label` will be rendered as the description following the button of the checkbox. `label` also corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa. :::demo El elemento `checkbox-group` puede manejar multiples checkboxes en un grupo usando `v-model` el cuál está enlazado a un `Array`. Dentro del elemento `el-checkbox`, `label` es el valor del checkbox. Si en ese tag no hay contenido anidado, `label` va a ser mostrado como la descripción al lado del botón del checkbox. `label` también se corresponde con los valores del array. Es seleccionado si el valor especificado existe en el array y viceversa.
```html ```html
<template> <template>
<el-checkbox-group v-model="checkList"> <el-checkbox-group v-model="checkList">
<el-checkbox label="Option A"></el-checkbox> <el-checkbox label="Opción A"></el-checkbox>
<el-checkbox label="Option B"></el-checkbox> <el-checkbox label="Opción B"></el-checkbox>
<el-checkbox label="Option C"></el-checkbox> <el-checkbox label="Opción C"></el-checkbox>
<el-checkbox label="disabled" disabled></el-checkbox> <el-checkbox label="disabled" disabled></el-checkbox>
<el-checkbox label="selected and disabled" disabled></el-checkbox> <el-checkbox label="Seleccionado y deshabilitado" disabled></el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</template> </template>
...@@ -115,7 +115,7 @@ It is used for multiple checkboxes which are bound in one group, and indicates w ...@@ -115,7 +115,7 @@ It is used for multiple checkboxes which are bound in one group, and indicates w
export default { export default {
data () { data () {
return { return {
checkList: ['selected and disabled','Option A'] checkList: ['Seleccionado y deshabilitado','Opción A']
}; };
} }
}; };
...@@ -123,15 +123,15 @@ It is used for multiple checkboxes which are bound in one group, and indicates w ...@@ -123,15 +123,15 @@ It is used for multiple checkboxes which are bound in one group, and indicates w
``` ```
::: :::
### Indeterminate ### Indeterminado
The `indeterminate` property can help you to achieve a 'check all' effect. La propiedad `indeterminate` puede ser usada para generar el efecto de marcar todos (check all).
:::demo :::demo
```html ```html
<template> <template>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Check all</el-checkbox> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Marcar todos</el-checkbox>
<div style="margin: 15px 0;"></div> <div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"> <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox> <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
...@@ -164,9 +164,9 @@ The `indeterminate` property can help you to achieve a 'check all' effect. ...@@ -164,9 +164,9 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
``` ```
::: :::
### Minimum / Maximum items checked ### Cantidad Mínima / Máxima de elementos seleccionados
The `min` and `max` properties can help you to limit the number of checked items. Las propiedades `min` y `max` pueden limitar la cantidad de elementos seleccionados.
:::demo :::demo
...@@ -193,11 +193,11 @@ The `min` and `max` properties can help you to limit the number of checked items ...@@ -193,11 +193,11 @@ The `min` and `max` properties can help you to limit the number of checked items
``` ```
::: :::
### Button style ### Estilo tipo Botón
Checkbox with button styles. Checkbox con estilo tipo Botón.
:::demo You just need to change `el-checkbox` element into `el-checkbox-button` element. We also provide `size` attribute. :::demo Sólo debes cambiar el elemento `el-checkbox` por el elemento `el-checkbox-button`. También proveemos el atributo `size`.
```html ```html
<template> <template>
<div> <div>
...@@ -239,29 +239,29 @@ Checkbox with button styles. ...@@ -239,29 +239,29 @@ Checkbox with button styles.
``` ```
::: :::
### With borders ### Con bordes
:::demo The `border` attribute adds a border to Checkboxes. :::demo El atributo `border` agrega un borde a los Checkboxes.
```html ```html
<template> <template>
<div> <div>
<el-checkbox v-model="checked3" label="Option1" border></el-checkbox> <el-checkbox v-model="checked3" label="Opción1" border></el-checkbox>
<el-checkbox v-model="checked4" label="Option2" border></el-checkbox> <el-checkbox v-model="checked4" label="Opción2" border></el-checkbox>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-checkbox v-model="checked5" label="Option1" border size="medium"></el-checkbox> <el-checkbox v-model="checked5" label="Opción1" border size="medium"></el-checkbox>
<el-checkbox v-model="checked6" label="Option2" border size="medium"></el-checkbox> <el-checkbox v-model="checked6" label="Opción2" border size="medium"></el-checkbox>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup5" size="small"> <el-checkbox-group v-model="checkboxGroup5" size="small">
<el-checkbox label="Option1" border></el-checkbox> <el-checkbox label="Opción1" border></el-checkbox>
<el-checkbox label="Option2" border disabled></el-checkbox> <el-checkbox label="Opción2" border disabled></el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup6" size="mini" disabled> <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
<el-checkbox label="Option1" border></el-checkbox> <el-checkbox label="Opción1" border></el-checkbox>
<el-checkbox label="Option2" border></el-checkbox> <el-checkbox label="Opción2" border></el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
</template> </template>
...@@ -283,45 +283,45 @@ Checkbox with button styles. ...@@ -283,45 +283,45 @@ Checkbox with button styles.
``` ```
::: :::
### Checkbox Attributes ### Atributos de Checkbox
| Attribute | Description | Type | Options | Default| | Atributo | Descripción | Tipo | Opciones | Por defecto|
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| label | value of the Checkbox when used inside a `checkbox-group` | string / number / boolean | — | — | | label | valor del Checkbox si es usado dentro de un tag `checkbox-group` | string / number / boolean | — | — |
| true-label | value of the Checkbox if it's checked | string / number | — | — | | true-label | valor del Checkbox si está marcado | string / number | — | — |
| false-label | value of the Checkbox if it's not checked | string / number | — | — | | false-label | valor del Checkbox si no está marcado | string / number | — | — |
| disabled | whether the Checkbox is disabled | boolean | — | false | | disabled | especifica si el Checkbox está deshabilitado | boolean | — | false |
| border | whether to add a border around Checkbox | boolean | — | false | | border | especifica si agrega un borde alrededor del Checkbox | boolean | — | false |
| size | size of the Checkbox, only works when `border` is true | string | medium / small / mini | — | | size | tamaño del Checkbox, sólo funciona si `border` es true | string | medium / small / mini | — |
| name | native 'name' attribute | string | — | — | | name | atributo 'name' nativo | string | — | — |
| checked | if the Checkbox is checked | boolean | — | false | | checked | especifica si el Checkbox está marcado | boolean | — | false |
| indeterminate | same as `indeterminate` in native checkbox | boolean | — | false | | indeterminate | similar a `indeterminate` en el checkbox nativo | boolean | — | false |
### Checkbox Events ### Eventos de Checkbox
| Event Name | Description | Parameters | | Nombre | Descripción | Parametros |
|---------- |-------- |---------- | |---------- |-------- |---------- |
| change | triggers when the binding value changes | the updated value | | change | se ejecuta cuando el valor enlazado cambia | el valor actualizado |
### Checkbox-group Attributes ### Atributos de Checkbox-group
| Attribute | Description | Type | Options | Default| | Atributo | Descripción | Tipo | Opciones | Por Defecto|
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
|size | size of checkbox buttons or bordered checkboxes | string | medium / small / mini | — | |size | tamaño de los checkboxes de tipo botón o los checkboxes con border | string | medium / small / mini | — |
| disabled | whether the nesting checkboxes are disabled | boolean | — | false | | disabled | especifica si los checkboxes anidados están deshabilitados | boolean | — | false |
| min | minimum number of checkbox checked | number | — | — | | min | cantidad mínima de checkboxes que deben ser marcados | number | — | — |
| max | maximum number of checkbox checked | number | — | — | | max | cantidad máxima de checkboxes que pueden ser marcados | number | — | — |
|text-color | font color when button is active | string | — | #ffffff | |text-color | color de fuente cuando el botón está activo | string | — | #ffffff |
|fill | border and background color when button is active | string | — | #409EFF | |fill | color de border y de fondo cuando el botón está activo | string | — | #409EFF |
### Checkbox-group Events ### Eventos de Checkbox-group
| Event Name | Description | Parameters | | Nombre de Evento | Descripción | Parametros |
|---------- |-------- |---------- | |---------- |-------- |---------- |
| change | triggers when the binding value changes | the updated value | | change | se ejecuta cuando el valor enlazado cambia | el valor actualizado |
### Checkbox-button Attributes ### Atributos de Checkbox-button
| Attribute | Description | Type | Options | Default| | Atributo | Descripción | Tipo | Opciones | Por defecto|
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| label | value of the checkbox when used inside a `checkbox-group` | string / number / boolean | — | — | | label | valor del checkbox cuando es usado dentro de un `checkbox-group` | string / number / boolean | — | — |
| true-label | value of the checkbox if it's checked | string / number | — | — | | true-label | valor del checkbox si este está marcado | string / number | — | — |
| false-label | value of the checkbox if it's not checked | string / number | — | — | | false-label | valor del checkbox si este no está marcado | string / number | — | — |
| disabled | whether the checkbox is disabled | boolean | — | false | | disabled | especifica si el checkbox está deshabilitado | boolean | — | false |
| name | native 'name' attribute | string | — | — | | name | atributo 'name' del checbox nativo | string | — | — |
| checked | if the checkbox is checked | boolean | — | false | | checked | si el checkbox está marcado | boolean | — | false |
examples/docs/es/collapse.md
View file @ 3764f1a3
...@@ -26,11 +26,11 @@ ...@@ -26,11 +26,11 @@
## Collapse ## Collapse
Use Collapse to store contents. Use Collapse para almacenar contenidos.
### Basic usage ### Uso básico
You can expand multiple panels Puedes expandir varios paneles
:::demo :::demo
```html ```html
...@@ -65,11 +65,11 @@ You can expand multiple panels ...@@ -65,11 +65,11 @@ You can expand multiple panels
``` ```
::: :::
### Accordion ### Acordeón
In accordion mode, only one panel can be expanded at once En modo acordeón sólo un panel puede ser expandido a la vez
:::demo Activate accordion mode using the `accordion` attribute. :::demo Activa el modo acordeón usado el atributo `accordion`.
```html ```html
<el-collapse v-model="activeName" accordion> <el-collapse v-model="activeName" accordion>
<el-collapse-item title="Consistency" name="1"> <el-collapse-item title="Consistency" name="1">
...@@ -102,9 +102,9 @@ In accordion mode, only one panel can be expanded at once ...@@ -102,9 +102,9 @@ In accordion mode, only one panel can be expanded at once
``` ```
::: :::
### Custom title ### Título personalizado
Besides using the `title` attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible. Además de usar el atributo `title`, se puede personalizar el título del panel con named slots, esto hace posible agregar contenido personalizado, por ejemplo: iconos.
:::demo :::demo
```html ```html
...@@ -133,19 +133,20 @@ Besides using the `title` attribute, you can customize panel title with named sl ...@@ -133,19 +133,20 @@ Besides using the `title` attribute, you can customize panel title with named sl
``` ```
::: :::
### Collapse Attributes ### Atributos de Collapse
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por Defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| accordion | whether to activate accordion mode | boolean | — | false | | accordion | especifica si activa el modo acordeón | boolean | — | false |
| value | currently active panel | string (accordion mode)/array (non-accordion mode) | — | — | | value | panel activo | string (modo acordeón)/array (No modo acordeón) | — | — |
### Collapse Events ### Eventos de Collapse
| Event Name | Description | Parameters | | Nombre de Evento | Descripción | Parametros |
|---------|---------|---------| |---------|---------|---------|
| change | triggers when active panels change | activeNames: array (non-accordion mode)/string (accordion mode) | | change | se dispara cuando los paneles activos cambian | activeNames: array (No modo acordeón)/string (modo acordeón) |
### Collapse Item Attributes
| Attribute | Description | Type | Accepted Values | Default | ### Atributos de Collapse Item
| Atributo | Descripción | Tipo | Valores aceptados | Por Defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| name | unique identification of the panel | string/number | — | — | | name | identificador único del panel | string/number | — | — |
| title | title of the panel | string | — | — | | title | título del panel | string | — | — |
\ No newline at end of file \ No newline at end of file
examples/docs/es/color-picker.md
View file @ 3764f1a3
...@@ -42,18 +42,18 @@ ...@@ -42,18 +42,18 @@
## ColorPicker ## ColorPicker
ColorPicker is a color selector supporting multiple color formats. ColorPicker es un selector de color que soporta varios formatos de color.
### Basic usage ### Uso básico
:::demo ColorPicker requires a string typed variable to be bound to v-model. :::demo ColorPicker requiere una variable de tipo string para ser enlazada a v-model.
```html ```html
<div class="block"> <div class="block">
<span class="demonstration">With default value</span> <span class="demonstration">Especifica valor por defecto</span>
<el-color-picker v-model="color1"></el-color-picker> <el-color-picker v-model="color1"></el-color-picker>
</div> </div>
<div class="block"> <div class="block">
<span class="demonstration">With no default value</span> <span class="demonstration">No especifica valor por defecto</span>
<el-color-picker v-model="color2"></el-color-picker> <el-color-picker v-model="color2"></el-color-picker>
</div> </div>
...@@ -72,7 +72,7 @@ ColorPicker is a color selector supporting multiple color formats. ...@@ -72,7 +72,7 @@ ColorPicker is a color selector supporting multiple color formats.
### Alpha ### Alpha
:::demo ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the `show-alpha` attribute. :::demo ColorPicker soporta selección de canales alpha. Para activarlo sólo agrega el atributo `show-alpha`.
```html ```html
<el-color-picker v-model="color3" show-alpha></el-color-picker> <el-color-picker v-model="color3" show-alpha></el-color-picker>
...@@ -109,17 +109,17 @@ ColorPicker is a color selector supporting multiple color formats. ...@@ -109,17 +109,17 @@ ColorPicker is a color selector supporting multiple color formats.
``` ```
::: :::
### Attributes ### Atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| disabled | whether to disable the ColorPicker | boolean | — | false | | disabled | especifica si se deshabilita el ColorPicker | boolean | — | false |
| size | size of ColorPicker | string | — | medium / small / mini | | size | tamaño del ColorPicker | string | — | medium / small / mini |
| show-alpha | whether to display the alpha slider | boolean | — | false | | show-alpha | especifica si se muestra el control deslizante para el valor alpha | boolean | — | false |
| color-format | color format of v-model | string | hsl / hsv / hex / rgb | hex (when show-alpha is false)/ rgb (when show-alpha is true) | | color-format | formato de color del v-model | string | hsl / hsv / hex / rgb | hex (si show-alpha es false)/ rgb (si show-alpha es true) |
| popper-class | custom class name for ColorPicker's dropdown | string | — | — | | popper-class | nombre de clase para el dropdown del ColorPicker | string | — | — |
### Events ### Eventos
| Event Name | Description | Parameters | | Nombre de Evento | Descripción | Parametros |
|---------|--------|---------| |---------|--------|---------|
| change | triggers when input value changes | color value | | change | se dispara cuando el valor del input cambia | valor del color |
| active-change | triggers when the current active color changes | active color value | | active-change | se dispara cuando el actual color activo cambia | valor del color activo |
\ No newline at end of file \ No newline at end of file
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