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

es-docs: add alert, badge, breadcrumb, button translation (#8090) 

* docs/es/alert.md - translation to spanish

* docs/es/alert.md - translation to spanish

* docs/es/badge.md - translation to spanish

* docs/es/breadcrumb.md - translation to spanish

* docs/es/button.md - translation to spanish
pull/8308/head
Santiago García da Rosa 2017-11-08 03:22:06 -03:00 committed by 杨奕
parent 9a79e200d0
commit 5fc56bccc7
4 changed files with 93 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
examples/docs/es/alert.md
View File

@ -19,13 +19,13 @@
## Alert
Displays important alert messages.
Mostrar mensajes de alertas importantes.
### Basic usage
### Uso básico
Alert components are non-overlay elements in the page that does not disappear automatically.
Los componentes de alertas no son elementos overlay de la página y no desaparecen automáticamente.
::: demo Alert provides 4 types of themes defined by `type`, whose default value is `info`.
::: demo Alert provee 4 tipos de temas definidos por `type`, el valor por defecto es `info`.
```html
<template>
@ -49,11 +49,12 @@ Alert components are non-overlay elements in the page that does not disappear au
```
:::
### Customizable close button
### Customización del botón de cerrar
Customize the close button as texts or other symbols.
Customizá el botón de cerrar como texto u otros símbolos.
::: demo Alert permite configurar si es posible cerrarla. El texto del botón de cerrado, así como los callbacks de cerrado son customizables. El atributo `closable` define si el componente puede cerrarse o no. Acepta un `boolean`, que por defecto es `true`. También puedes configurar el atributo `close-text` para reemplazar el símbolo de cerrado que se muestra por defecto. Ten cuidado que el atributo `close-text` debe ser un string. El evento `close` se dispara cuando el componente se cierra.
::: demo Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. `closable` attribute decides if the component can be closed or not. It accepts `boolean`, and the default is `true`. You can set `close-text` attribute to replace the default cross symbol as the close button. Be careful that `close-text` must be a string. `close` event fires when the component is closed.
```html
<template>
@ -86,11 +87,12 @@ Customize the close button as texts or other symbols.
```
:::
### With icon
### Usar iconos
Displaying an icon improves readability.
Mostrar un icono mejora la legibilidad.
::: demo Setear el atributo `show-icon` muestra un icono que corresponde al tipo de Alert que se está mostrando.
::: demo Setting the `show-icon` attribute displays an icon that corresponds with the current Alert type.
```html
<template>
@ -118,9 +120,9 @@ Displaying an icon improves readability.
```
:::
## Centered text
### Texto centrado
Use the `center` attribute to center the text.
Para centrar el texto utilice el atributo `center`.
::: demo
@ -154,11 +156,11 @@ Use the `center` attribute to center the text.
```
:::
### With description
### Con descripción
Description includes a message with more detailed information.
Descripción incluye un mensaje con información más detallada.
::: demo Besides the required `title` attribute, you can add a `description` attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.
::: demo Además del atributo requerido `title`, se puede agregar el atributo `description` para ayudar a describir la alerta con mas detalles. La descripción puede contener solamente un string y va a usar word wrap automáticamente.
```html
<template>
@ -171,9 +173,9 @@ Description includes a message with more detailed information.
```
:::
### With icon and description
### Utilizando icono y descripción
::: demo At last, this is an example with both icon and description.
::: demo Finalmente este es un ejemplo utilizando icono y descripción.
```html
<template>
@ -205,19 +207,19 @@ Description includes a message with more detailed information.
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos
| Atributo | Descrpción | Tipo | Valores válidos | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| **title** | title **REQUIRED** | string | — | — |
| type | component type | string | success/warning/info/error | info |
| description | descriptive text. Can also be passed with the default slot | string | — | — |
| closable | if closable or not | boolean | — | true |
| center | whether to center the text | boolean | — | false |
| close-text | customized close button text | string | — | — |
| show-icon | if a type icon is displayed | boolean | — | false |
| **title** | Título **REQUIRED** | string | — | — |
| type | tipo de componente | string | success/warning/info/error | info |
| description | texto descriptivo. También puede ser pasado con el slot por defecto | string | — | — |
| closable | si se puede cerrar o no | boolean | — | true |
| center | si el texto debe estar centrado | boolean | — | false |
| close-text | texto de cerrado customizado | string | — | — |
| show-icon | si un icono del tipo de alerta se debe mostrar| boolean | — | false |
### Events
| Event Name | Description | Parameters |
### Eventos
| Nombre del evento | Descripción | Parámetros |
|---------- |-------- |---------- |
| close | fires when alert is closed | — |
| close | Se dispara cuando la alerta se cierra | — |

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

@ -1,12 +1,12 @@
## Badge
A number or status mark on buttons and icons.
Marcas en forma de número o estado para botones e iconos.
### Basic usage
### Uso básico
Displays the amount of new messages.
Muestra la cantidad de mensajes nuevos.
:::demo The amount is defined with `value` which accepts `Number` or `String`.
:::demo La cantidad está definida por `value` que acepta `Number` o `String`.
```html
<el-badge :value="12" class="item">
@ -41,11 +41,11 @@ Displays the amount of new messages.
```
:::
### Max value
### Valor máximo
You can customize the max value.
Se puede customizar el valor máximo.
::: demo The max value is defined by property `max` which is a `Number`. Note that it only works when `value` is also a `Number`.
::: demo El valor máximo se define como `max` el cual es un `Number`. Nota: solo funciona si `value` es también un `Number`.
```html
<el-badge :value="200" :max="99" class="item">
@ -64,11 +64,11 @@ You can customize the max value.
```
:::
### Customizations
### Customizaciones
Displays text content other than numbers.
Mostrar texto en vez de números.
:::demo When `value` is a `String`, it can display customized text.
:::demo Cuando `value` es un `String`, puede mostrar texto customizado.
```html
<el-badge value="new" class="item">
@ -87,11 +87,11 @@ Displays text content other than numbers.
```
:::
### Little red dot
### Pequeño punto rojo
Use a red dot to mark content that needs to be noticed.
Puede utilizar un punto rojo para marcar contenido que debe ser notado.
:::demo Use the attribute `is-dot`. It is a `Boolean`.
:::demo Use el atributo `is-dot`. Es un `Boolean`.
```html
<el-badge is-dot class="item">query</el-badge>
@ -129,10 +129,10 @@ Use a red dot to mark content that needs to be noticed.
}
</style>
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Default |
|------------- |---------------- |---------------- |---------------------- |-------- |
| value | display value | string, number | — | — |
| max | maximum value, shows '{max}+' when exceeded. Only works if `value` is a `Number` | number | — | — |
| is-dot | if a little dot is displayed | boolean | — | false |
| value | valor a mostrar | string, number | — | — |
| max | valor máximo, Muestra '{max}+' cuando se excede. Solo funciona si `value` es un `Number` | number | — | — |
| is-dot | si se debe mostrar un pequeño punto | boolean | — | false |
| hidden | hidden badge | boolean | — | false |

26
examples/docs/es/breadcrumb.md
View File

@ -1,11 +1,11 @@
## Breadcrumb
Displays the location of the current page, making it easier to browser back.
Muestra la locación de la página actual, haciendo más fácil el poder ir a la página anterior.
### Basic usage
### Uso básico
:::demo In `el-breadcrumb`, each `el-breadcrumb-item` is a tag that stands for every level starting from homepage. This component has a `String` attribute `separator`, and it determines the separator. Its default value is '/'.
:::demo En `el-breadcrumb`, cada `el-breadcrumb-item` es un tag que representa cada nivel empezando desde la homepage. Este componente tiene un atributo `String` llamado `separator`, el mismo determina el caracter separador. El valor por defecto es '/'.
```html
<el-breadcrumb separator="/">
@ -17,9 +17,9 @@ Displays the location of the current page, making it easier to browser back.
```
:::
### Icon separator
### Icono separador
:::demo Set `separator-class` to use `iconfont` as the separator，it will cover `separator`
:::demo Setea `separator-class` para que utilice `iconfont` como separador，el mismo va a cubrir `separator`
```html
<el-breadcrumb separator-class="el-icon-arrow-right">
@ -31,17 +31,17 @@ Displays the location of the current page, making it easier to browser back.
```
:::
### Breadcrumb Attributes
| Attribute | Description | Type | Accepted Values | Default|
### Breadcrumb atributos
| Atributo | Descripción | Tipo | Valores aceptados | Default|
|---------- |-------------- |---------- |-------------------------------- |-------- |
| separator | separator character | string | — | / |
| separator-class | class name of icon separator | string | — | - |
| separator | caracter separador | string | — | / |
| separator-class | nombre de la clase del icono separador | string | — | - |
### Breadcrumb Item Attributes
| Attribute | Description | Type | Accepted Values | Default|
### Breadcrumb Item atributos
| Atributo | Descripción | Tipo | Valores aceptados | Default|
|---------- |-------------- |---------- |-------------------------------- |-------- |
| to | target route of the link, same as `to` of `vue-router` | string/object | — | — |
| replace | if `true`, the navigation will not leave a history record | boolean | — | false |
| to | ruta del link, lo mismo que `to` de `vue-router` | string/object | — | — |
| replace | si `true`, la navegación no dejara una entrada en la historia | boolean | — | false |

62
examples/docs/es/button.md
View File

@ -22,11 +22,11 @@
## Button
Commonly used button.
Botones comúnmente usados.
### Basic usage
### Uso básico
::: demo Use `type`, `plain` and `round` to define Button's style.
::: demo Use `type`, `plain` y `round` para definir estilos a los botones.
```html
<div>
@ -58,11 +58,11 @@ Commonly used button.
```
:::
### Disabled Button
### Botón deshabilitado
The `disabled` attribute determines if the button is disabled.
El atributo `disabled` determina su un botón esta deshabilitado.
:::demo Use `disabled` attribute to determine whether a button is disabled. It accepts a `Boolean` value.
:::demo Use el atributo `disabled` para determinar si un botón esta deshabilitado. Acepta un valor `Boolean`.
```html
<div>
@ -85,9 +85,9 @@ The `disabled` attribute determines if the button is disabled.
```
:::
### Text Button
### Botón de texto
Buttons without border and background.
Botones sin borde ni fondo.
:::demo
```html
@ -96,11 +96,11 @@ Buttons without border and background.
```
:::
### Icon Button
### Botón icono
Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.
Use iconos para darle mayor significado a Button. Se puede usar simplemente un icono o un icono con texto.
:::demo Use the `icon` attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an `<i>` tag. Custom icons can be used as well.
:::demo Use el atributo `icon` para agregar un icono. Puede encontrar el listado de iconos en el componente de iconos. Agregar iconos a la derecha del texto se puede conseguir con un tag `<i>`. También se pueden usar iconos custom.
```html
<el-button type="primary" icon="el-icon-edit"></el-button>
@ -111,11 +111,11 @@ Use icons to add more meaning to Button. You can use icon alone to save some spa
```
:::
### Button Group
### Grupo de botones
Displayed as a button group, can be used to group a series of similar operations.
Mostrar un grupo de botones puede ser usado para mostrar un grupo de operaciones similares.
:::demo Use tag `<el-button-group>` to group your buttons.
:::demo Use el tag `<el-button-group>` para agrupar sus botones.
```html
<el-button-group>
@ -130,22 +130,22 @@ Displayed as a button group, can be used to group a series of similar operations
```
:::
### Loading Button
### Botón de descarga
Click the button to load data, then the button displays a loading state.
Cuando se hace clic en un botón para descargar datos, el botón muestra un estado de descarga.
:::demo Set `loading` attribute to `true` to display loading state.
:::demo Sete el atributo `loading` a `true` para mostrar el estado de descarga.
```html
<el-button type="primary" :loading="true">Loading</el-button>
```
:::
### Sizes
### Tamaños
Besides default size, Button component provides three additional sizes for you to choose among different scenarios.
Además del tamaño por defecto, el componente Button provee tres tamaños adicionales para utilizar en diferentes escenarios.
:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
:::demo Use el atributo `size` para setear tamaños adicionales con `medium`, `small` or `mini`.
```html
<div>
@ -163,15 +163,15 @@ Besides default size, Button component provides three additional sizes for you t
```
:::
### Attributes
| Attribute | Description | Type | Accepted values | Default |
### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Default |
|---------- |-------- |---------- |------------- |-------- |
| size | button size | string | medium / small / mini | — |
| type | button type | string | primary / success / warning / danger / info / text | — |
| plain | determine whether it's a plain button | boolean | — | false |
| round | determine whether it's a round button | boolean | — | false |
| loading | determine whether it's loading | boolean | — | false |
| disabled | disable the button | boolean | — | false |
| icon | icon class name | string | — | — |
| autofocus | same as native button's `autofocus` | boolean | — | false |
| native-type | same as native button's `type` | string | button / submit / reset | button |
| size | tamaño del botón | string | medium / small / mini | — |
| type | tipo de botón | string | primary / success / warning / danger / info / text | — |
| plain | determinar si es o no un botón plano | boolean | — | false |
| round | determinar si es o no un botón redondo | boolean | — | false |
| loading | determinar si es o no un botón de descarga | boolean | — | false |
| disabled | deshabilitar el botón | boolean | — | false |
| icon | nombre de la clase del icono | string | — | — |
| autofocus | misma funcionalidad que la nativa `autofocus` | boolean | — | false |
| native-type | misma funcionalidad que la nativa `type` | string | button / submit / reset | button |