github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

add Quickstart, Radio & Rate docs (#8187) 

* Finished translations.

* [FIX] Unsaved translations.

* [ADD] Pagination, popover & progress spanish translations.

* [ADD] Quickstart, radio & rate.

* Update switch.md

* [upload] Spanish Translation

* Fixed typos and translation

* [FIX] Workflow.
pull/8230/head
Rubén Salvador 2017-11-13 04:37:15 -05:00 committed by 杨奕
parent de86b737e3
commit bcf42717ce
3 changed files with 104 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
examples/docs/es/quickstart.md
View File

@ -1,16 +1,16 @@
## Quick start ## Inicio rápido
This part walks you through the process of using Element in a webpack project. Esta sección te guía en el proceso de usar Element con webpack en un proyecto.
### Use Starter Kit ### Usa la plantilla de Kit de inicio
We provide a general [project template](https://github.com/ElementUI/element-starter) for you. For Laravel users, we also have a [template](https://github.com/ElementUI/element-in-laravel-starter). You can download and use them directly. Proveemos una plantilla general [project template](https://github.com/ElementUI/element-starter) para ti. Para los usuarios de Laravel, también tenemos [template](https://github.com/ElementUI/element-in-laravel-starter). Puedes descargarlas y agregarlas directamente también.
If you prefer not to use them, please read the following. Si prefieres no utilizarlas, lee las siguientes secciones de este documento.
### Use vue-cli ### Usando vue-cli
We can also start a project using [vue-cli](https://github.com/vuejs/vue-cli): Podemos empezar un proyecto utilizando [vue-cli](https://github.com/vuejs/vue-cli):
```shell ```shell
> npm i -g vue-cli > npm i -g vue-cli
@ -19,11 +19,11 @@ We can also start a project using [vue-cli](https://github.com/vuejs/vue-cli):
> npm i && npm i element-ui > npm i && npm i element-ui
``` ```
### Import Element ### Importando Element
You can import Element entirely, or just import what you need. Let's start with fully import. Puedes importar Element completamente o solamente importar lo que necesites. Comencemos importando todo.
#### Fully import #### Importando todo
In main.js: In main.js:
```javascript ```javascript
@ -39,19 +39,19 @@ new Vue({
render: h => h(App) render: h => h(App)
}) })
``` ```
The above imports Element entirely. Note that CSS file needs to be imported separately. El código anterior importa Element completamente. Nótese que el archivo CSS necesita ser incluido por separado.
#### On demand #### En demanda
With the help of [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component), we can import components we actually need, making the project smaller than otherwise. Con la ayuda de [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component), podemos importar los componentes que necesitamos, haciendo nuestro proyecto más pequenho que de la otra manera.
First, install babel-plugin-component: Primero, instala babel-plugin-component:
```bash ```bash
npm install babel-plugin-component -D npm install babel-plugin-component -D
``` ```
Then edit .babelrc: Luego edita .babelrc:
```json ```json
{ {
"presets": [ "presets": [
@ -66,7 +66,7 @@ Then edit .babelrc:
} }
``` ```
Next, if you need Button and Select, edit main.js: Luego, si necesitas Button y Select, edita main.js:
```javascript ```javascript
import Vue from 'vue' import Vue from 'vue'
@ -86,7 +86,7 @@ new Vue({
}) })
``` ```
Full example (Component list reference [components.json](https://github.com/ElemeFE/element/blob/master/components.json)) Ejemplo completo (Referencia completa de componentes [components.json](https://github.com/ElemeFE/element/blob/master/components.json))
```javascript ```javascript
import Vue from 'vue' import Vue from 'vue'
@ -233,17 +233,17 @@ Vue.prototype.$notify = Notification
Vue.prototype.$message = Message Vue.prototype.$message = Message
``` ```
### Global config ### Configuración global
When importing Element, you can define a global config object. For now this object has only one property: `size`, which sets the default size for all components: Cuando importas Element, puedes definir un objeto global de configuración. Por ahora este elemento solo contiene una propiedad: `size`, que define el tamanho por defecto de todos los componentes:
Fully import Element： Importando Element completamente：
```JS ```JS
import Vue from 'vue' import Vue from 'vue'
import Element from 'element-ui' import Element from 'element-ui'
Vue.use(Element, { size: 'small' }) Vue.use(Element, { size: 'small' })
``` ```
Partial import Element： Importando Element parcialmente：
```JS ```JS
import Vue from 'vue' import Vue from 'vue'
import { Button } from 'element-ui' import { Button } from 'element-ui'
@ -251,11 +251,10 @@ import { Button } from 'element-ui'
Vue.prototype.$ELEMENT = { size: 'small' } Vue.prototype.$ELEMENT = { size: 'small' }
Vue.use(Button) Vue.use(Button)
``` ```
With the above config, the default size of all components that have size attribute will be 'small'. Con la anterior configuración, el tamanho por defecto de todos los componentes que tienen el atributo `size` será `small`.
### Start coding ### Empieza ya!
Ahora haz incorporado Vue y Element a tu proyecto es tiempo para comenzar a programar. Inicia el modo de desarrollo:
Now you have implemented Vue and Element to your project, and it's time to write your code. Start development mode:
```bash ```bash
# visit localhost:8086 # visit localhost:8086
@ -267,4 +266,4 @@ Build:
```bash ```bash
npm run build npm run build
``` ```
Please refer to each component's documentation to learn how to use them. Por favor, refiérase a la documentación de cada componente para aprender cómo usarlos.

90
examples/docs/es/radio.md
View File

@ -19,14 +19,12 @@
</script> </script>
## Radio ## Radio
Selección única entre múltiples opciones.
Single selection among multiple options. ### Uso básico
El elemento Radio no debe tener muchas opciones. De otra manera, utilice el componente Select.
### Basic usage :::**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`.
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`, `Number` or `Boolean`.
```html ```html
<template> <template>
<el-radio v-model="radio" label="1">Option A</el-radio> <el-radio v-model="radio" label="1">Option A</el-radio>
@ -45,11 +43,11 @@ Radio should not have too many options. Otherwise, use the Select component inst
``` ```
::: :::
### Disabled ### Deshabilitado
`disabled` attribute is used to disable the radio. El atributo `disabled` es utilizado para deshabilitar un Radio.
:::demo You just need to add the `disabled` attribute. :::**Demo** Solo necesitas agregar el atributo `disabled`.
```html ```html
<template> <template>
<el-radio disabled v-model="radio1" label="disabled">Option A</el-radio> <el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>
@ -68,11 +66,11 @@ Radio should not have too many options. Otherwise, use the Select component inst
``` ```
::: :::
### Radio button group ### Grupo de elementos Radio
Suitable for choosing from some mutually exclusive options. Recomendado para seleccionar opciones que se excluyen mutuamente.
:::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. :::**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 ```html
<el-radio-group v-model="radio2"> <el-radio-group v-model="radio2">
@ -93,11 +91,11 @@ Suitable for choosing from some mutually exclusive options.
``` ```
::: :::
### Button style ### Estilo Button
Radio with button styles. Radio con estilo de botón.
:::demo You just need to change `el-radio` element into `el-radio-button` element. We also provide `size` attribute. :::**Demo** Solo necesitas cambiar el elemento `el-radio` a `el-radio-button`. También proveemos el atributo `size`.
```html ```html
<template> <template>
<div> <div>
@ -149,9 +147,9 @@ Radio with button styles.
``` ```
::: :::
### With borders ### Con bordes
:::demo The `border` attribute adds a border to Radios. :::**Demo** El atributo `border` agrega un borde al elemento Radios.
```html ```html
<template> <template>
<div> <div>
@ -191,41 +189,43 @@ Radio with button styles.
``` ```
::: :::
### Radio Attributes ### Atributos de Radio
Attribute | Description | Type | Accepted Values | Default Atributo | Descripción| Tipo |Valores Aceptado| Valores por defecto
---- | ---- | ---- | ---- | ---- ---- | ---- | ---- | ---- | ----
label | the value of Radio | string / number / boolean | — | — label | el valor del Radio | string / number / boolean | — | —
disabled | whether Radio is disabled | boolean | — | false disabled | si el Radio está deshabilitado| boolean | — | false
border | whether to add a border around Radio | boolean | — | false border | agregar borde alrededor del elemento Radio | boolean | — | false
size | size of the Radio, only works when `border` is true | string | medium / small / mini | — size | tamanho del elemento Radio, solo funciona si `border` es verdadero | string | medium / small / mini | —
name | native 'name' attribute | string | — | — name | atributo nativo 'name'| string | — | —
### Radio Events ### Atributos de Radio-button
| Event Name | Description | Parameters | 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 | triggers when the bound value changes | the label value of the chosen radio | | change | se dispara cuando el valor cambia | el valor del `label` del Radio seleccionado |
### Radio-group Attributes
Attribute | Description | Type | Accepted Values | Default ### Eventos de Radio-group
---- | ---- | ---- | ---- | ----
size | the size of radio buttons or bordered radios | string | medium / small / mini | —
disabled | whether the nesting radios are disabled | boolean | — | false
text-color | font color when button is active | string | — | #ffffff |
fill | border and background color when button is active | string | — | #409EFF |
### Radio-group Events | Nombre de evento| Descripción| Parámetros |
| Event Name | Description | Parameters |
| --- | --- | --- | | --- | --- | --- |
| change | triggers when the bound value changes | the label value of the chosen radio | | change | se dispara cuando el valor cambia | el valor del `label` del Radio seleccionado |
### Radio-button Attributes
Attribute | Description | Type | Accepted Values | Default
---- | ---- | ---- | ---- | ----
label | the value of radio | string / number | — | —
disabled | whether radio is disabled | boolean | — | false
name | native 'name' attribute | string | — | —

67
examples/docs/es/rate.md
View File

@ -39,13 +39,14 @@
} }
</script> </script>
## Rate ## Calificación
Used for rating Usado para la calificación
### Basic usage ### Uso básico
:::**Demo** Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo `colors` y sus dos umbrales pueden ser definidos con `low-treshold` y `high-treshold`.
:::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 ``` html
<div class="block"> <div class="block">
@ -73,11 +74,11 @@ Used for rating
``` ```
::: :::
### With text ### Con texto
Using text to indicate rating score Usa texto para indicar la puntuación
:::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`. :::**Demo** Agrega el atributo `show-text` para mostrar texto a la derecha del componente. Puedes asignar textos para las distintas puntuaciones usando `texts`. `texts` es un arreglo cuya longitud debe ser igual a la máxima puntuación `max`.
``` html ``` html
<el-rate <el-rate
@ -98,11 +99,11 @@ Using text to indicate rating score
``` ```
::: :::
### More icons ### Más iconos
You can use different icons to distinguish different rate components. Puedes utilizar iconos para diferenciar cada componente.
:::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. :::**Demo** Puedes customizar iconos para tres niveles diferentes usando `icon-classes`. En este ejemplo también usamos `void-icon-class` para asignar un icono si no está seleccionado.
``` html ``` html
<el-rate <el-rate
@ -124,11 +125,11 @@ You can use different icons to distinguish different rate components.
``` ```
::: :::
### Read-only ### Solo lectura
Read-only Rate is for displaying rating score. Half star is supported. La calificación de solo lectura is para mostrar la puntuación. Soporta media estrella.
:::demo Use attribute `disabled` to make the component read-only. Add `show-score` to display the rating score at the right side. Additionally, you can use attribute `score-template` to provide a score template. It must contain `{value}`, and `{value}` will be replaced with the rating score. :::**Demo** Usa el atributo `disabled` para hacer el componente de solo lectura. Agrega `show-score` para mostrar la puntuación en el lado derecho. Además, puedes usar el atributo `score-template` para proveer una plantilla. Tiene que contener `{value}`, y `{value}` será sustituido por la puntuación.
``` html ``` html
<el-rate <el-rate
@ -151,27 +152,27 @@ Read-only Rate is for displaying rating score. Half star is supported.
``` ```
::: :::
### Attributes ### Atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción| Tipo| Valores aceptado| Valores por defecto|
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| max | max rating score | number | — | 5 | | max | puntuación máxima | number | — | 5 |
| disabled | whether Rate is read-only | boolean | — | false | | disabled | si la calificación es de solo lectura | boolean | — | false |
| allow-half | whether picking half start is allowed | boolean | — | false | | allow-half | si escoger media estrella está permitido | boolean | — | false |
| low-threshold | threshold value between low and medium level. The value itself will be included in low level | number | — | 2 | | low-threshold | valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel bajo | number | — | 2 |
| high-threshold | threshold value between medium and high level. The value itself will be included in high level | number | — | 4 | | high-threshold | valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel alto | number | — | 4 |
| colors | color array for icons. It should have 3 elements, each of which corresponds with a score level | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] | | colors | arreglo de colores para iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
| void-color | color of unselected icons | string | — | #C6D1DE | | void-color | color para iconos no seleccionados | string | — | #C6D1DE |
| disabled-void-color | color of unselected read-only icons | string | — | #EFF2F7 | | disabled-void-color | color para las iconos no seleccionados de solo lectura | 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','el-icon-star-on'] | | icon-classes | arreglo de nombres para clases de iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación | array | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
| void-icon-class | class name of unselected icons | string | — | el-icon-star-off | | void-icon-class | nombre de clase para iconos no seleccionados | string | — | el-icon-star-off |
| disabled-void-icon-class | class name of unselected read-only icons | string | — | el-icon-star-on | | disabled-void-icon-class | nombre de clase para elementos no seleccionados de solo lectura | string | — | el-icon-star-on |
| show-text | whether to display texts | boolean | — | false | | show-text | muestra el texto | boolean | — | false |
| show-score | whether to display current score. show-score and show-text cannot be true at the same time | boolean | — | false | | show-score | muestra puntuación actual. `show-score` y `show-text` no pueden ser verdaderos al mismo tiempo | boolean | — | false |
| text-color | color of texts | string | — | #1F2D3D | | text-color | color del texto | string | — | #1F2D3D |
| texts | text array | array | — | ['极差', '失望', '一般', '满意', '惊喜'] | | texts | arreglo de textos | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |
| score-template | score template | string | — | {value} | | score-template | plantilla de puntuación | string | — | {value} |
### Events ### Events
| Event Name | Description | Parameters | | Nombre del evento | Descripción | Parámetros |
|---------- |-------- |---------- | |---------- |-------- |---------- |
| change | Triggers when rate value is changed | value after changing | | change | Se dispara cuando la puntuación es cambiada | valor luego del cambio |