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

[ADD] Pagination, popover & progress spanish translations.

pull/8219/head
Rubén Salvador García San Juan 2017-11-11 16:06:29 -05:00 committed by 杨奕
parent c0a4fb741a
commit e4bef2f494
3 changed files with 75 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
examples/docs/es/pagination.md
View File

@ -48,13 +48,12 @@
}
</style>
## Pagination
## Paginación
Si tiene que mostrar muchos datos en una página, utiliza la paginación.
If you have too much data to display in one page, use pagination.
### Uso básico
### Basic usage
:::demo Set `layout` with different pagination elements you wish to display separated with a comma. Pagination elements are: `prev` (a button navigating to the previous page), `next` (a button navigating to the next page), `pager` (page list), `jumper` (a jump-to input), `total` (total item count), `size` (a select to determine page size) and `->`(every element after this symbol will be pulled to the right).
:::**Demo** Asigna en el atributo `layout` los diferentes elementos que quieres utilizar separados por coma. Los elementos de paginación son: `prev` (un botón para navegar a la página anterior), `next` (un botón para navegar a la siguiente página), `pager` (lista de página), `jumper` (un `input` para saltar a una página determinada), `total` (total de elementos), `size` (un `select` para seleccionar el tamanho de la página ) y `->`(todo elemento situado luego de este símbolo será halado a la derecha).
```html
<div class="block">
<span class="demonstration">When you have few pages</span>
@ -73,11 +72,11 @@ If you have too much data to display in one page, use pagination.
```
:::
### Small Pagination
### Paginación pequenha
Use small pagination in the case of limited space.
Usa una paginación pequenha en caso de espacio limitado.
:::demo Just set the `small` attribute to `true` and the Pagination becomes smaller.
:::**Demo** Solo pon el atributo `small` como `true` y la Paginación se volverá pequenha.
```html
<el-pagination
small
@ -87,11 +86,11 @@ Use small pagination in the case of limited space.
```
:::
### More elements
### Más elementos
Add more modules based on your scenario.
Agrega más modulos basados en tu escenario.
:::demo This example is a complete use case. It uses `size-change` and `current-change` event to handle page size changes and current page changes. `page-sizes` accepts an array of integers, each of which represents a different page size in the `sizes` select options, e.g. `[100, 200, 300, 400]` indicates that the select will have four options: 100, 200, 300 or 400 items per page.
:::**Demo** Este ejemplo es un completo caso de uso. Este utiliza los eventos `size-change` y `current-change` para manejar el tamanho de página y el cambio de página. El atributo `page-sizes` acepta un arrelgo de enteros, cada uno representa un diferente valor del atributo `sizes` que es un `select`, ejemplo `[100, 200, 300, 400]` indicará que el `select` tendrá las opciones: 100, 200, 300 o 400 elementos por página.
```html
<template>
@ -195,27 +194,27 @@ Add more modules based on your scenario.
}
</script>
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| small | whether to use small pagination | boolean | — | false |
| page-size | item count of each page | number | — | 10 |
| total | total item count | number | — | — |
| page-count | total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required | number | — | — |
| current-page | current page number, supports the .sync modifier | number | — | 1 |
| layout | layout of Pagination, elements separated with a comma | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total' |
| page-sizes | options of item count per page | number[] | — | [10, 20, 30, 40, 50, 100] |
| popper-class | custom class name for the page size Select's dropdown | string | — | — |
| prev-text | text for the prev button | string | — | — |
| next-text | text for the next button | string | — | — |
| small | usar paginación pequenha | boolean | — | false |
| page-size | cantidad de elementos por página | number | — | 10 |
| total | total de elementos | number | — | — |
| page-count | total de páginas. Asigna `total` o `page-count` y las páginas serán mostradas; si necesitas `page-sizes`, `total` es **requerido** | number | — | — |
| current-page | número actual de la página, soporta el modificador .sync | number | — | 1 |
| layout | layout de la paginación, elementos separados por coma | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total' |
| page-sizes | opciones para la cantidad de elementos por página | number[] | — | [10, 20, 30, 40, 50, 100] |
| popper-class | clase propia para el `dropdown` del `select` del número de páginas | string | — | — |
| prev-text | texto para el botón `prev` | string | — | — |
| next-text | texto para el botón `next` | string | — | — |
### Events
| Event Name | Description | Parameters |
### Eventos
| Nombre del evento | Descripción | Parámetros |
|---------|--------|---------|
| size-change | triggers when `page-size` changes | the new `page-size` |
| current-change | triggers when `current-page` changes | the new `current-page` |
| size-change | se dispara cuando `page-size` cambia | nuevo valor de `page-size` |
| current-change | se dispara cuando `current-page` cambia | nuevo valor de `current-page` |
### Slot
| Name | Description |
| Nombre | Descripción |
| --- | --- |
| — | custom content. To use this, you need to declare `slot` in `layout` |
| — | Elemento propio. Para utilizar esto necesitas declarar `slot` en el `layout` |

61
examples/docs/es/popover.md
View File

@ -99,11 +99,11 @@
## Popover
### Basic usage
### Uso básico
Similar to Tooltip, Popover is also built with `Vue-popper`. So for some duplicated attributes, please refer to the documentation of Tooltip.
Similar a un Tooltip, Popover está construido con `Vue-popper`. Así que para atributos duplicados, por favor refiérase a la documentación de Tooltip.
:::demo Add `ref` in your popover, then in your button, use `v-popover` directive to link the button and the popover. The attribute `trigger` is used to define how popover is triggered: `hover`, `click` or `focus`. Alternatively, you can specify reference using a named `slot`.
:::**Demo** Agrega `ref` al popover, luego en el botón usa la directiva `v-popover` para asociar el botón y el popover. El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click` o `focus`. De manera alternatica puedes especificar la referencia utilizando un `[named slot](https://vuejs.org/v2/guide/components.html#Named-Slots).
```html
<el-popover
@ -137,11 +137,10 @@ Similar to Tooltip, Popover is also built with `Vue-popper`. So for some duplica
```
:::
### Nested information
### Información anidada
Otros componentes pueden anidarse dentro de popover. A continuación un ejemplo de una tabla anidada.
Other components can be nested in popover. Following is an example of nested table.
:::demo replace the `content` attribute with a default `slot`.
:::**Demo** Reemplaza el atributo `content` con un `slot`.
```html
<el-popover
@ -186,11 +185,11 @@ Other components can be nested in popover. Following is an example of nested tab
```
:::
### Nested operation
### Operación anidada
Of course, you can nest other operations. It's more light-weight than using a dialog.
Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `dialog`.
:::demo
:::**Demo**
```html
<el-popover
ref="popover5"
@ -216,33 +215,33 @@ Of course, you can nest other operations. It's more light-weight than using a di
}
</script>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| trigger | how the popover is triggered | string | click/focus/hover/manual | click |
| title | popover title | string | — | — |
| content | popover content, can be replaced with a default `slot` | string | — | — |
| width | popover width | string, number | — | Min width 150px |
| placement | popover placement | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| disabled | whether Popover is disabled | boolean | — | false |
| value(v-model) | whether popover is visible | Boolean | — | false |
| trigger | cómo se dispara el popover | string | click/focus/hover/manual | click |
| title | título del popover | string | — | — |
| content | contenido del popover, puede ser sustituido por un `slot` | string | — | — |
| width | ancho del popover | string, number | — | Min width 150px |
| placement | posición del popover en la pantalla | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| disabled | si el popover está deshabilitado | boolean | — | false |
| value(v-model) | si el popover está visible | Boolean | — | false |
| offset | popover offset | number | — | 0 |
| transition | popover transition animation | string | — | el-fade-in-linear |
| visible-arrow | whether a tooltip arrow is displayed or not. For more info, please refer to [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
| popper-options | parameters for [popper.js](https://popper.js.org/documentation.html) | object | please refer to [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | custom class name for popover | string | — | — |
| open-delay | delay of appearance when `trigger` is hover, in milliseconds | number | — | — |
| visible-arrow | si una flecha del tooltip is mostrada o no. Para más información, por favor refiérase a [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
| popper-options | parámetros para [popper.js](https://popper.js.org/documentation.html) | object | por favor, refiérase a [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | clase propia para popover | string | — | — |
| open-delay | retraso de la aparición cuando `trigger` es hover, en milisegundos | number | — | — |
### Slot
| Name | Description |
| Nombre | Descripción |
| --- | --- |
| — | text content of popover |
| reference | HTML element that triggers popover |
| — | texto contenido en popover |
| reference | elemento HTML que dispara el popover |
### Events
| Event Name | Description | 回调参数 |
### Eventos
| Nombre del evento | Descripción | Parámetros |
|---------|--------|---------|
| show | triggers when popover shows | — |
| hide | triggers when popover hides | — |
| show | se dispara cuando se muestra el popover | — |
| hide | se dispara cuando se oculta el popover | — |

36
examples/docs/es/progress.md
View File

@ -9,13 +9,12 @@
}
}
</style>
## Progress
## Progreso
Progreso es usado para mostrar el estado de la operación actual e informar al usuario acerca de ésta.
Progress is used to show the progress of current operation, and inform the user the current status.
### Barra de progreso lineal (porcentage externo)
### Linear progress bar (external percentage)
:::demo Use `percentage` attribute to set the percentage. It's **required** and must be between `0-100`.
:::**Demo** Usa el atributo `percentage` para asignar el porcentage. Este es **requerido** y tiene que ser un valor entre `0-100`.
```html
<el-progress :percentage="0"></el-progress>
<el-progress :percentage="70"></el-progress>
@ -24,11 +23,10 @@ Progress is used to show the progress of current operation, and inform the user
```
:::
### Linear progress bar (internal percentage)
### Barra de progreso lineal (porcentage interno)
En este caso el porcentage no toma espacio adicional.
In this case the percentage takes no additional space.
:::demo `stroke-width` attribute decides the `width` of progress bar, and use `text-inside` attribute to put description inside the progress bar.
:::**Demo** El atributo `stroke-width` decide el ancho de la barra de progreso, y usa el atributo `text-inside` para poner la descripción dentro de la misma.
```html
<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
@ -37,9 +35,9 @@ In this case the percentage takes no additional space.
```
:::
### Circular progress bar
### Barra de progreso circular
:::demo You can specify `type` attribute to `circle` to use circular progress bar, and use `width` attribute to change the size of circle.
:::**Demo** Puedes asignar el atributo `type` como `circle` para usar la barra circular de progreso, y usar el atributo `width` para cambiar el tamanho del círculo.
```html
<el-progress type="circle" :percentage="0"></el-progress>
<el-progress type="circle" :percentage="25"></el-progress>
@ -49,13 +47,13 @@ In this case the percentage takes no additional space.
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Atributo | Descripción | Tipo | Valores aceptado | Valores por defecto |
| --- | ---- | ---- | ---- | ---- |
| **percentage** | percentage, **required** | number | 0-100 | 0 |
| type | the type of progress bar | string | line/circle | line |
| stroke-width | the width of progress bar | number | — | 6 |
| text-inside | whether to place the percentage inside progress bar, only works when `type` is 'line' | boolean | — | false |
| status | the current status of progress bar | string | success/exception | — |
| width | the canvas width of circle progress bar | number | — | 126 |
| show-text | whether to show percentage | boolean | — | true |
| **percentage** | porcenteage, **requerido** | number | 0-100 | 0 |
| type | tipo de barra de progreso | string | line/circle | line |
| stroke-width | ancho de la barra de progreso | number | — | 6 |
| text-inside | mostrar el porcentage dentro de la barra de progreso, solo funciona cuando `type` es 'line' | boolean | — | false |
| status | estado actual de la barra de progreso | string | success/exception | — |
| width | ancho del canvas que contiene la barra de progreso circula | number | — | 126 |
| show-text | mostrar porcentage | boolean | — | true |