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> </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 ```html
<template> <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 ```html
<template> <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 ```html
<el-tabs type="border-card"> <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 ```html
<template> <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 :::demo
```html ```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 :::demo
```html ```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 :::demo
```html ```html
@ -367,28 +367,28 @@ Only card type Tabs support addable & closeable.
``` ```
::: :::
### Tabs Attributes ### Atributos de Pestañas
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores Aceptados | Default |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| type | type of Tab | string | card/border-card | — | | type | tipo de Pestaña | string | card/border-card | — |
| closable | whether Tab is closable | boolean | — | false | | closable | si la Pestaña es cerrable | boolean | — | false |
| addable | whether Tab is addable | boolean | — | false | | addable | si la Pestaña es añadible | boolean | — | false |
| editable | whether Tab is addable and closable | boolean | — | false | | editable | si la Pestaña es añadible y cerrable | boolean | — | false |
| value | name of the selected tab | string | — | name of first tab | | value | nombre de la pestaña seleccionada | string | — | nombre de la primer pestaña |
| tab-position | position of tabs | string | top/right/bottom/left | top | | tab-position | posición de tabulación | string | top/right/bottom/left | top |
### Tabs Events ### Eventos de Pestañas
| Event Name | Description | Parameters | | Nombre de Evento | Descripción | Parámetros |
|---------- |-------- |---------- | |---------- |-------- |---------- |
| tab-click | triggers when a tab is clicked | clicked tab | | tab-click | se lanza cuando se hace click a una pestaña | pestaña clickeada |
| tab-remove | triggers when tab-remove button is clicked | name of the removed tab | | tab-remove | se lanza cuando se hace click al botón tab-remove | nombre de la pestaña removida |
| tab-add | triggers when tab-add button is clicked | — | | tab-add | se lanza cuando se hace click al botón tab-add | — |
| edit | triggers when tab-add button or tab-remove is clicked | (targetName, action) | | edit | se lanza cuando los botones de tab-add y/o tab-remove son clickeados | (targetName, action) |
### Tab-pane Attributes ### Attributos del Tab-pane
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores Aceptados | Default |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| label | title of the tab | string | — | — | | label | título de la pestaña | string | — | — |
| disabled | whether Tab is disabled | boolean | — | false | | disabled | si la Tabulación está deshabilitada | 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' | | 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 | | closable | whether Tab is closable | boolean | — | false |

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

@ -6,15 +6,15 @@
} }
</style> </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 ```html
<el-time-select <el-time-select
v-model="value1" 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 ```html
<template> <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 :::demo
```html ```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 ```html
<template> <template>
<el-time-picker <el-time-picker
@ -170,47 +170,47 @@ Can pick an arbitrary time range.
} }
</script> </script>
### Attributes ### Atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores Aceptados | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| readonly | whether DatePicker is read only | boolean | — | false | | readonly | saber si el Selector de Fecha está en modo de sólo lectura | boolean | — | false |
| disabled | whether DatePicker is disabled | boolean | — | false | | disabled | saber si el Selector de Fecha se encuentra deshabilitado | boolean | — | false |
| editable | whether the input is editable | boolean | — | true | | editable | saber si el input puede ser editado | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true | | clearable | saber si mostrar el botón de borrado | boolean | — | true |
| size | size of Input | string | medium / small / mini | — | | size | tamaño del input | string | medium / small / mini | — |
| placeholder | placeholder in non-range mode | string | — | — | | placeholder | placeholder en un modo fuera de rango | string | — | — |
| start-placeholder | placeholder for the start time in range mode | string | — | — | | start-placeholder | placeholder para el tiempo de inicio en modo de rango | string | — | — |
| end-placeholder | placeholder for the end time in range mode | string | — | — | | end-placeholder | placeholder para el tiempo de finalización en modo de rango | string | — | — |
| is-range | whether to pick a time range, only works with `<el-time-picker>` | boolean | — | false | | is-range | saber si es posible escoger un rango de tiempo, solo funciona con `<el-time-picker>` | boolean | — | false |
| arrow-control | whether to pick time using arrow buttons, only works with `<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 | value of the picker | Date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss | | 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 | alignment | left / center / right | left | | align | alineación | left / center / right | left |
| popper-class | custom class name for TimePicker's dropdown | string | — | — | | popper-class | nombre de clase personalizada para el dropdown del Selector de Tiempo | string | — | — |
| picker-options | additional options, check the table below | object | — | {} | | picker-options | opciones adicionales, revisar la tabla posterior | object | — | {} |
| range-separator | range separator | string | - | '-' | | range-separator | separador de rango | 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 | — | | 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 | optional, only for TimePicker, format of bounded value | string | hour `HH`, minute `mm`, second `ss` | — | | value-format | opcional, solo para Selector de Tiempo, formato de valor limitado | string | hour `HH`, minute `mm`, second `ss` | — |
| name | same as `name` in native input | string | — | — | | name | así como `name` en input nativo | string | — | — |
### Time Select Options ### Opciones para Seleccionador de Tiempo
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores Aceptados | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| start | start time | string | — | 09:00 | | start | tiempo de inicio | string | — | 09:00 |
| end | end time | string | — | 18:00 | | end | tiempo de finalización | string | — | 18:00 |
| step | time step | string | — | 00:30 | | step | salto de tiempo | string | — | 00:30 |
| minTime | minimum time, any time before this time will be disabled | string | — | 00:00 | | minTime | tiempo mínimo, cualquier tiempo antes de éste será deshabilitado | string | — | 00:00 |
| maxTime | maximum time, any time after this time will be disabled | string | — | — | | maxTime | tiempo máximo, cualquier tiempo después de éste será deshabilitado | string | — | — |
### Time Picker Options ### Opciones para Selector de Tiempo
| Attribute | Description | Type | Accepted Values | Default | | 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 | — | — | | 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 | format of the picker | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss | | format | formato para el selector | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
### Events ### Eventos
| Event Name | Description | Parameters | | Nombre de Evento | Descripción | Parámetros |
|---------|--------|---------| |---------|--------|---------|
| change | triggers when user confirms the value | component's bounded value | | change | se lanza cuando el usuario confirma el valor | valor limitado del componente |
| blur | triggers when Input blurs | (event: Event) | | blur | se lanza cuando el input se difumina | (event: Event) |
| focus | triggers when Input focuses | (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 ## 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 ```html
<div class="box"> <div class="box">
<div class="top"> <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 ```html
<el-tooltip content="Top center" placement="top"> <el-tooltip content="Top center" placement="top">
<el-button>Dark</el-button> <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 ```html
<el-tooltip placement="top"> <el-tooltip placement="top">
<div slot="content">multiple lines<br/>second line</div> <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 :::demo
```html ```html
@ -217,26 +217,27 @@ In fact, Tooltip is an extension based on [Vue-popper](https://github.com/elemen
:::tip :::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 ### Atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores Aceptados | Default |
|----------------|---------|-----------|-------------|--------| |----------------|---------|-----------|-------------|--------|
| effect | Tooltip theme | string | dark/light | dark | | effect | tema del Tooltip | string | dark/light | dark |
| content | display content, can be overridden by `slot#content` | String | — | — | | content | contenido a mostrar, puede ser sobre-escrito por `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 | | 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) | visibility of Tooltip | boolean | — | false | | value(v-model) | visibilidad del Tooltip | boolean | — | false |
| disabled | whether Tooltip is disabled | boolean | — | false | | disabled | saber si el Tooltip se encuentra deshabilitado | boolean | — | false |
| offset | offset of the Tooltip | number | — | 0 | | offset | offset del Tooltip | number | — | 0 |
| transition | animation name | string | — | el-fade-in-linear | | transition | nombre de animación | 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 | | 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 | [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 }` | | 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 | delay of appearance, in millisecond | number | — | 0 | | open-delay | retraso de la apariencia, en milisegundos | number | — | 0 |
| manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true` | boolean | — | false | | 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 | custom class name for Tooltip's popper | string | — | — | | popper-class | nombre de clase personalizada para el popper del Tooltip | string | — | — |
| enterable | whether the mouse can enter the tooltip | Boolean | — | true | | enterable | saber si el mouse puede entrar al Tooltip | Boolean | — | true |
| hide-after | timeout in milliseconds to hide tooltip | number | — | 0 | | hide-after | tiempo a esperar en milisegundos para esconder el Tooltip | number | — | 0 |