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

Docs translation (tabs, time-picker, tooltip)

pull/8192/head
Juan Flores 2017-11-14 16:38:17 -06:00 committed by 杨奕
parent 8e66ceb7a4
commit a82018fca3
3 changed files with 121 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
examples/docs/es/tabs.md
View File

@ -90,15 +90,15 @@
}
</script>
## Tabs
## Tabulación
Divide data collections which are related yet belong to different types.
Divide collecciones de datos que están relacionados pero pertenecen a diferentes tipos.
### Basic usage
### Uso básico
Basic and concise tabs.
Tabulación básica y concisa
:::demo Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the `value` attribute.
:::demo de Tabulación provee funcionalidad de tarjeta selectiva. Por defecto, la primer pestaña es seleccionada como activa, y es posible activar cualquier pestaña estableciendo el atributo de `value`.
```html
<template>
@ -126,11 +126,11 @@ Basic and concise tabs.
```
:::
### Card Style
### Estilo de Tarjeta
Tabs styled as cards.
Pestañas diseñadas como tarjetas.
:::demo Set `type` to `card` can get a card-styled tab.
:::demo Establecer `type` a `card` para obtener una pestaña diseñada como tarjeta.
```html
<template>
@ -158,11 +158,11 @@ Tabs styled as cards.
```
:::
### Border card
### Tarjeta con Bordes
Border card tabs.
Pestañas de tarjeta con bordes.
:::demo Set `type` to `border-card`.
:::demo Establecer `type` a `border-card`.
```html
<el-tabs type="border-card">
@ -175,11 +175,11 @@ Border card tabs.
:::
### Tab position
### Posición de tabulación
You can use `tab-position` attribute to set the tab's position.
Es posible usar el atributo `tab-position` para establecer la posición de la tabulación.
:::demo You can choose from four directions: `tabPosition="left|right|top|bottom"`
:::demo Es posible escoger entre cuatro direcciones: `tabPosition="left|right|top|bottom"`
```html
<template>
@ -209,9 +209,9 @@ You can use `tab-position` attribute to set the tab's position.
```
:::
### Custom Tab
### Pestaña Personalizada
You can use named slot to customize the tab label content.
Es posible usar slots nombrados para personalizar el contenido de la etiqueta de la pestaña.
:::demo
```html
@ -227,9 +227,9 @@ You can use named slot to customize the tab label content.
```
:::
### Add & close tab
### Agregar y cerrar pestaña
Only card type Tabs support addable & closeable.
Solo las pestañas de tipo tarjeta soportan adición y cierre.
:::demo
```html
@ -295,7 +295,7 @@ Only card type Tabs support addable & closeable.
```
:::
### Customized trigger button of new tab
### Botón disparador personalizado de la nueva pestaña
:::demo
```html
@ -367,28 +367,28 @@ Only card type Tabs support addable & closeable.
```
:::
### Tabs Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos de Pestañas
| Atributo | Descripción | Tipo | Valores Aceptados | Default |
|---------- |-------- |---------- |------------- |-------- |
| type | type of Tab | string | card/border-card | — |
| closable | whether Tab is closable | boolean | — | false |
| addable | whether Tab is addable | boolean | — | false |
| editable | whether Tab is addable and closable | boolean | — | false |
| value | name of the selected tab | string | — | name of first tab |
| tab-position | position of tabs | string | top/right/bottom/left | top |
| type | tipo de Pestaña | string | card/border-card | — |
| closable | si la Pestaña es cerrable | boolean | — | false |
| addable | si la Pestaña es añadible | boolean | — | false |
| editable | si la Pestaña es añadible y cerrable | boolean | — | false |
| value | nombre de la pestaña seleccionada | string | — | nombre de la primer pestaña |
| tab-position | posición de tabulación | string | top/right/bottom/left | top |
### Tabs Events
| Event Name | Description | Parameters |
### Eventos de Pestañas
| Nombre de Evento | Descripción | Parámetros |
|---------- |-------- |---------- |
| tab-click | triggers when a tab is clicked | clicked tab |
| tab-remove | triggers when tab-remove button is clicked | name of the removed tab |
| tab-add | triggers when tab-add button is clicked | — |
| edit | triggers when tab-add button or tab-remove is clicked | (targetName, action) |
| tab-click | se lanza cuando se hace click a una pestaña | pestaña clickeada |
| tab-remove | se lanza cuando se hace click al botón tab-remove | nombre de la pestaña removida |
| tab-add | se lanza cuando se hace click al botón tab-add | — |
| edit | se lanza cuando los botones de tab-add y/o tab-remove son clickeados | (targetName, action) |
### Tab-pane Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Attributos del Tab-pane
| Atributo | Descripción | Tipo | Valores Aceptados | Default |
|---------- |-------- |---------- |------------- |-------- |
| label | title of the tab | string | — | — |
| disabled | whether Tab is disabled | boolean | — | false |
| name | identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1' |
| label | título de la pestaña | string | — | — |
| disabled | si la Tabulación está deshabilitada | boolean | — | false |
| name | identificador correspondiente al activeName de la Tabulación, representando el alias del tab-pane | string | — | número ordinal del tab-pane en la secuencia, p.ej el primer tab-pane de pestañas es '1' |
| closable | whether Tab is closable | boolean | — | false |

98
examples/docs/es/time-picker.md
View File

@ -6,15 +6,15 @@
}
</style>
## TimePicker
## Selector de Tiempo
Use Time Picker for time input.
Usar el Selector de Tiempo para entradas de tiempo.
### Fixed time picker
### Selector de tiempo fijo
Provide a list of fixed time for users to choose.
Provee una lista de tiempo fijo para que los usuarios escogan.
:::demo Use `el-time-select` label, then assign start time, end time and time step with `start`, `end` and `step`.
:::demo Usar el tag `el-time-select`, se pueden asignar tiempo de inicio, tiempo de finalización y salto de tiempo con `start`, `end` y `step`.
```html
<el-time-select
v-model="value1"
@ -38,11 +38,11 @@ Provide a list of fixed time for users to choose.
```
:::
### Arbitrary time picker
### Selector de tiempo arbitrario
Can pick an arbitrary time.
Un tiempo arbitrario puede ser escogido.
:::demo Use `el-time-picker` label, and you can limit the time range by specifying `selectableRange`. By default, you can scroll the mouse wheel to pick time, alternatively you can use the control arrows when the `arrow-control` attribute is set.
:::demo Al usar el tag `el-time-picker`, es posible limitar el rango de tiempo al especificar `selectableRange`. Por defecto, es posible hacer scroll con la rueda del mouse para escoger el tiempo, alternativamente se pueden utilizar las flechas de control cuando el atributo `arrow-control` esté establecido.
```html
<template>
@ -76,9 +76,9 @@ Can pick an arbitrary time.
```
:::
### Fixed time range
### Rango de tiempo fijo
If start time is picked at first, then the end time will change accordingly.
Si se escoge el tiempo de inicio al principio, el tiempo de finalización cambiará respectivamente.
:::demo
```html
@ -117,11 +117,11 @@ If start time is picked at first, then the end time will change accordingly.
```
:::
### Arbitrary time range
### Rango de tiempo arbitrario
Can pick an arbitrary time range.
Es posible escoger un rango de tiempo arbitrario.
:::demo We can pick a time range by adding an `is-range` attribute. Also, `arrow-control` is supported in range mode.
:::demo Es posible seleccionar un rango de tiempo al añadir el atributo `is-range`. También, `arrow-control` es soportado en modo de rango.
```html
<template>
<el-time-picker
@ -170,47 +170,47 @@ Can pick an arbitrary time range.
}
</script>
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos
| Atributo | Descripción | Tipo | Valores Aceptados | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| readonly | whether DatePicker is read only | boolean | — | false |
| disabled | whether DatePicker is disabled | boolean | — | false |
| editable | whether the input is editable | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true |
| size | size of Input | string | medium / small / mini | — |
| placeholder | placeholder in non-range mode | string | — | — |
| start-placeholder | placeholder for the start time in range mode | string | — | — |
| end-placeholder | placeholder for the end time in range mode | string | — | — |
| is-range | whether to pick a time range, only works with `<el-time-picker>` | boolean | — | false |
| arrow-control | whether to pick time using arrow buttons, only works with `<el-time-picker>` | boolean | — | false |
| value | value of the picker | Date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
| align | alignment | left / center / right | left |
| popper-class | custom class name for TimePicker's dropdown | string | — | — |
| picker-options | additional options, check the table below | object | — | {} |
| range-separator | range separator | string | - | '-' |
| default-value | optional, default date of the calendar | Date for TimePicker, string for TimeSelect | anything accepted by `new Date()` for TimePicker, selectable value for TimeSelect | — |
| value-format | optional, only for TimePicker, format of bounded value | string | hour `HH`, minute `mm`, second `ss` | — |
| name | same as `name` in native input | string | — | — |
| readonly | saber si el Selector de Fecha está en modo de sólo lectura | boolean | — | false |
| disabled | saber si el Selector de Fecha se encuentra deshabilitado | boolean | — | false |
| editable | saber si el input puede ser editado | boolean | — | true |
| clearable | saber si mostrar el botón de borrado | boolean | — | true |
| size | tamaño del input | string | medium / small / mini | — |
| placeholder | placeholder en un modo fuera de rango | string | — | — |
| start-placeholder | placeholder para el tiempo de inicio en modo de rango | string | — | — |
| end-placeholder | placeholder para el tiempo de finalización en modo de rango | string | — | — |
| is-range | saber si es posible escoger un rango de tiempo, solo funciona con `<el-time-picker>` | boolean | — | false |
| arrow-control | saber si es posible escoger el tiempo usando los botones de flecha, solo funciona con `<el-time-picker>` | boolean | — | false |
| value | valor del selector | Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
| align | alineación | left / center / right | left |
| popper-class | nombre de clase personalizada para el dropdown del Selector de Tiempo | string | — | — |
| picker-options | opciones adicionales, revisar la tabla posterior | object | — | {} |
| range-separator | separador de rango | string | - | '-' |
| default-value | opcional, fecha por defecto del calendario | Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo | cualquier cosa aceptada por `new Date()` para el Selector de Tiempo, Selector de Tiempo, valor seleccionable para el Seleccionador de Tiempo | — |
| value-format | opcional, solo para Selector de Tiempo, formato de valor limitado | string | hour `HH`, minute `mm`, second `ss` | — |
| name | así como `name` en input nativo | string | — | — |
### Time Select Options
| Attribute | Description | Type | Accepted Values | Default |
### Opciones para Seleccionador de Tiempo
| Atributo | Descripción | Tipo | Valores Aceptados | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| start | start time | string | — | 09:00 |
| end | end time | string | — | 18:00 |
| step | time step | string | — | 00:30 |
| minTime | minimum time, any time before this time will be disabled | string | — | 00:00 |
| maxTime | maximum time, any time after this time will be disabled | string | — | — |
| start | tiempo de inicio | string | — | 09:00 |
| end | tiempo de finalización | string | — | 18:00 |
| step | salto de tiempo | string | — | 00:30 |
| minTime | tiempo mínimo, cualquier tiempo antes de éste será deshabilitado | string | — | 00:00 |
| maxTime | tiempo máximo, cualquier tiempo después de éste será deshabilitado | string | — | — |
### Time Picker Options
| Attribute | Description | Type | Accepted Values | Default |
### Opciones para Selector de Tiempo
| Atributo | Descripción | Tipo | Valores Aceptados | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| selectableRange | available time range, e.g.`'18:30:00 - 20:30:00'`or`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — |
| format | format of the picker | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
| selectableRange | rango de tiempo disponible p.ej. `'18:30:00 - 20:30:00'`ó`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — |
| format | formato para el selector | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
### Events
| Event Name | Description | Parameters |
### Eventos
| Nombre de Evento | Descripción | Parámetros |
|---------|--------|---------|
| change | triggers when user confirms the value | component's bounded value |
| blur | triggers when Input blurs | (event: Event) |
| focus | triggers when Input focuses | (event: Event) |
| change | se lanza cuando el usuario confirma el valor | valor limitado del componente |
| blur | se lanza cuando el input se difumina | (event: Event) |
| focus | se lanza cuando el input se enfoca | (event: Event) |

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

@ -57,13 +57,13 @@
## Tooltip
Display prompt information for mouse hover.
Mostrar aviso de información para el hover del mouse.
### Basic usage
### Uso básico
Tooltip has 9 placements.
Tooltip tiene 9 colocaciones.
:::demo Use attribute `content` to set the display content when hover. The attribute `placement` determines the position of the tooltip. Its value is `[orientation]-[alignment]` with four orientations `top`, `left`, `right`, `bottom` and three alignments `start`, `end`, `null`, and the default alignment is null. Take `placement="left-end"` for example, Tooltip will display on the left of the element which you are hovering and the bottom of the tooltip aligns with the bottom of the element.
:::demo Usar el atributo `content` para establecer el contenido que se mostrará al hacer hover. El atributo `placement` determina la posición del tooltip. Su valor es `[orientation]-[alignment]` con cuatro orientaciones `top`, `left`, `right`, `bottom` y tres alineaciones `start`, `end`, `null`, la alineación default es null. Tome `placement="left-end"` como ejemplo, Tooltip será mostrado en la izquierda del elemento en que se esté haciendo hover y el fondo del tooltip se alineará con el fondo del elemento.
```html
<div class="box">
<div class="top">
@ -154,11 +154,11 @@ Tooltip has 9 placements.
:::
### Theme
### Tema
Tooltip has two themes: `dark` and `light`。
Tooltip tiene dos temas: `dark` and `light`.
:::demo Set `effect` to modify theme, and the default value is `dark`.
:::demo Establecer `effect` para modificar el tema, el valor por defecto es `dark`.
```html
<el-tooltip content="Top center" placement="top">
<el-button>Dark</el-button>
@ -169,11 +169,11 @@ Tooltip has two themes: `dark` and `light`。
```
:::
### More Content
### Más Contenido
Display multiple lines of text and set their format.
Despliegue múltiples líneas de texto y establezca su formato.
:::demo Override attribute `content` of `el-tooltip` by adding a slot named `content`.
:::demo Sobre-escribir el atributo `content` del `el-tooltip` al añadir un slot llamado `content`.
```html
<el-tooltip placement="top">
<div slot="content">multiple lines<br/>second line</div>
@ -182,15 +182,15 @@ Display multiple lines of text and set their format.
```
:::
### Advanced usage
### Uso Avanzado
In addition to basic usages, there are some attributes that allow you to customize your own:
Adicional a los usos básicos, existen algunos atributos que permiten la personalización:
`transition` attribute allows you to customize the animation in which the tooltip shows or hides, and the default value is el-fade-in-linear.
el atributo `transition` permite personalizar la animación con la que el Tooltip se muestra o se esconda, el valor por defecto es `is el-fade-in-linear`.
`disabled` attribute allows you to disable `tooltip`. You just need set it to `true`.
el atributo `disabled` permite deshabilitar `tooltip`. Solo es necesario definirlo como `true`.
In fact, Tooltip is an extension based on [Vue-popper](https://github.com/element-component/vue-popper), you can use any attribute that are allowed in Vue-popper.
De hecho, Tooltip es una extension basada en [Vue-popper](https://github.com/element-component/vue-popper), es posible utilizar cualquier atributo permitido en Vue-popper.
:::demo
```html
@ -217,26 +217,27 @@ In fact, Tooltip is an extension based on [Vue-popper](https://github.com/elemen
:::tip
The `router-link` component is not supported in tooltip, please use `vm.$router.push`.
El componente `router-link` no es soportado por Tooltip, favor de usar `vm.$router.push`.
Disabled form elements are not supported for Tooltip, more information can be found at [MDN](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter). You need to wrap the disabled form element with a container element for Tooltip to work.
Elementos de forma deshabilitados no son soportados por Tooltip, más información puede ser encontrada en [MDN](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter).
Es necesario envolver los elementos de forma deshabilitados en un elemento contenedor para que Tooltipo funcione.
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos
| Atributo | Descripción | Tipo | Valores Aceptados | Default |
|----------------|---------|-----------|-------------|--------|
| effect | Tooltip theme | string | dark/light | dark |
| content | display content, can be overridden by `slot#content` | String | — | — |
| placement | position of Tooltip | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| value(v-model) | visibility of Tooltip | boolean | — | false |
| disabled | whether Tooltip is disabled | boolean | — | false |
| offset | offset of the Tooltip | number | — | 0 |
| transition | animation name | string | — | el-fade-in-linear |
| visible-arrow | whether an arrow is displayed. For more information, check [Vue-popper](https://github.com/element-component/vue-popper) page | boolean | — | true |
| popper-options | [popper.js](https://popper.js.org/documentation.html) parameters | Object | refer to [popper.js](https://popper.js.org/documentation.html) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| open-delay | delay of appearance, in millisecond | number | — | 0 |
| manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true` | boolean | — | false |
| popper-class | custom class name for Tooltip's popper | string | — | — |
| enterable | whether the mouse can enter the tooltip | Boolean | — | true |
| hide-after | timeout in milliseconds to hide tooltip | number | — | 0 |
| effect | tema del Tooltip | string | dark/light | dark |
| content | contenido a mostrar, puede ser sobre-escrito por `slot#content` | string | — | — |
| placement | posición del Tooltip | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| value(v-model) | visibilidad del Tooltip | boolean | — | false |
| disabled | saber si el Tooltip se encuentra deshabilitado | boolean | — | false |
| offset | offset del Tooltip | number | — | 0 |
| transition | nombre de animación | string | — | el-fade-in-linear |
| visible-arrow | saber si una flecha es mostrada. Para mayor información, revisar la página de [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
| popper-options | parámetros de [popper.js](https://popper.js.org/documentation.html) | Object | referirse a la documentación de [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| open-delay | retraso de la apariencia, en milisegundos | number | — | 0 |
| manual | saber si el Tooltipo será controlado de forma manual. `mouseenter` y `mouseleave` no tendrán efecto si fue establecido como `true` | boolean | — | false |
| popper-class | nombre de clase personalizada para el popper del Tooltip | string | — | — |
| enterable | saber si el mouse puede entrar al Tooltip | Boolean | — | true |
| hide-after | tiempo a esperar en milisegundos para esconder el Tooltip | number | — | 0 |