es-doc: add card, carousel translation (#8091)

* Complete french translation 🇫🇷

* card.md Spanish version

* carousel.md spanish version
pull/8308/head
Gonzalo2310 2017-11-08 07:22:51 +01:00 committed by 杨奕
parent 5fc56bccc7
commit 287b823938
3 changed files with 70 additions and 63 deletions

View File

@ -47,13 +47,14 @@
}
</style>
## Card
Integrate information in a card container.
Muestra información dentro de un contenedor `card`
### Basic usage
### Uso Basico
Card includes title, content and operations.
`Card` incluye titulo, contenido y operaciones.
:::demo Card se compone de cabecera y cuerpo. La cabecera es opcional y la colocación de su contenido depende de un slot con nombre.
:::demo Card is made up of `header` and `body`. `header` is optional, and its content distribution depends on a named slot.
```html
<el-card class="box-card">
<div slot="header" class="clearfix">
@ -90,9 +91,9 @@ Card includes title, content and operations.
```
:::
### Simple card
### Card simple
The header part can be omitted.
La parte de la cabecera puede omitirse.
:::demo
```html
@ -118,11 +119,12 @@ The header part can be omitted.
```
:::
### With images
### Con imágenes
Display richer content by adding some configs.
Muestre un contenido más rico añadiendo algunas configuraciones.
:::demo El atributo `body-style` define el estilo CSS del `body` personalizado. Este ejemplo también utiliza `el-col` para el layout.
:::demo The `body-style` attribute defines CSS style of custom `body`. This example also uses `el-col` for layout.
```html
<el-row>
<el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
@ -183,8 +185,8 @@ export default {
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| header | Title of the card. Also accepts a DOM passed by `slot#header` | string| — | — |
| body-style | CSS style of body | object| — | { padding: '20px' } |
### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ---------- | ---------------------------------------- | ------ | ----------------- | ------------------- |
| header | Titulo del card. También acepta DOM pasado por `slot#header` | string | — | — |
| body-style | Estilo CSS del cuerpo | object | — | { padding: '20px' } |

View File

@ -61,11 +61,12 @@
</style>
## Carousel
Loop a series of images or texts in a limited space
Presentar una serie de imágenes o textos en un espacio limitado
### Basic usage
### Uso básico
::: demo Combina `el-carousel` con `el-carousel-item`, para conseguir el carrusel. El contenido de cada diapositiva es completamente personalizable, y sólo tiene que colocarla dentro de la etiqueta `el-carousel-item` . Por defecto, el carrusel cambia cuando el ratón pasa por encima de un indicador. Fije `trigger` para `click`, si lo que se desea es que el carrusel cambie sólo cuando se haga clic en un indicador.
::: demo Combine `el-carousel` with `el-carousel-item`, and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside `el-carousel-item` tag. By default the carousel switches when mouse hovers over an indicator. Set `trigger` to `click`, and the carousel switches only when an indicator is clicked.
```html
<template>
<div class="block">
@ -106,11 +107,12 @@ Loop a series of images or texts in a limited space
```
:::
### Indicators
### Indicadores
Indicators can be displayed outside the carousel
Los indicadores de paginacion pueden mostrarse fuera del carrusel
::: demo El atributo `indicator-position` determina dónde se encuentran los indicadores de paginación. Por defecto están dentro del carrusel, y el ajuste de `indicator-position` a `outside` los mueve hacia fuera; en cambio `indicator-position` a `none` los oculta.
::: demo The `indicator-position` attribute determines where the indicators are located. By default they are inside the carousel, and setting `indicator-position` to `outside` moves them outside; setting `indicator-position` to `none` hides the indicators.
```html
<template>
<el-carousel indicator-position="outside">
@ -140,11 +142,12 @@ Indicators can be displayed outside the carousel
```
:::
### Arrows
### Flechas
You can define when arrows are displayed
Puede definir cuando se visualizan las flechas
::: demo El atributo `arrow` determina cuándo se visualizan las flechas. Por defecto aparecen cuando el ratón se desplaza sobre el carrusel. Ajuste `arrow` a `always` o `never` para mostrar u ocultar las flechas permanentemente.
::: demo The `arrow` attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting `arrow` to `always` or `never` shows/hides the arrows permanently.
```html
<template>
<el-carousel :interval="5000" arrow="always">
@ -174,11 +177,12 @@ You can define when arrows are displayed
```
:::
### Card mode
### Modo Card
When a page is wide enough but has limited height, you can activate card mode for carousels
Cuando una página es suficientemente ancha pero tiene una altura limitada, puede activar el modo `card` para carrusel.
::: demo Ajuste `type` a `card` para activar el modo tarjeta. Aparte de la apariencia, la mayor diferencia entre el modo tarjeta y el modo común es que al hacer clic en las diapositivas de ambos lados, el carrusel cambia directamente en modo tarjeta.
::: demo Setting `type` to `card` activates the card mode. Apart from the appearance, the biggest difference between card mode and common mode is that clicking the slides at both sides directly switches the carousel in card mode.
```html
<template>
<el-carousel :interval="4000" type="card" height="200px">
@ -208,32 +212,33 @@ When a page is wide enough but has limited height, you can activate card mode fo
```
:::
### Carousel Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| height | height of the carousel | string | — | — |
| initial-index | index of the initially active slide (starting from 0) | number | — | 0 |
| trigger | how indicators are triggered | string | hover/click | hover |
| autoplay | whether automatically loop the slides | boolean | — | true |
| interval | interval of the auto loop, in milliseconds | number | — | 3000 |
| indicator-position | position of the indicators | string | outside/none | — |
| arrow | when arrows are shown | string | always/hover/never | hover |
| type | type of the Carousel | string | card | — |
### Atributos de Carousel
| Atributo | Descripcion | Tipo | Valores aceptados | Por Defecto |
| ------------------ | ---------------------------------------- | ------- | ------------------ | ----------- |
| height | Alto del carrusel | string | — | — |
| initial-index | Indice del slider inicial activo (empieza desde 0) | number | — | 0 |
| trigger | Evento que muestra los indicadores | string | hover/click | hover |
| autoplay | Si se enlazan automáticamente las diapositivas | boolean | — | true |
| interval | Intervalo del auto loop, en milisegundos | number | — | 3000 |
| indicator-position | Posición del indicador de paginación | string | outside/none | — |
| arrow | Cuando se muestran las flechas | string | always/hover/never | hover |
| type | Tipo de carrusel | string | card | — |
### Carousel Events
| Event Name | Description | Parameters |
|---------|---------|---------|
| change | triggers when the active slide switches | index of the new active slide, index of the old active slide |
### Eventos de Carousel
| Nombre evento | Descripción | Parametros |
| ------------- | ---------------------------------------- | ---------------------------------------- |
| change | Se dispara cuando el slider activo cambia | Indice del nuevo slider activo, indice del anterior slider activo. |
### Carousel Methods
| Method | Description | Parameters |
|---------- |-------------- | -- |
| setActiveItem | manually switch slide | index of the slide to be switched to, starting from 0; or the `name` of corresponding `el-carousel-item` |
| prev | switch to the previous slide | — |
| next | switch to the next slide | — |
### Metodos de Carousel
| Metodos | Descripción | Parametros |
| ------------- | -------------------------- | ---------------------------------------- |
| setActiveItem | Cambio manual de slider | indice del slider al que se va a cambiar, empezando por 0; o el `name` del `el-carousel-item` correspondiente |
| prev | Cambia al slider anterior | — |
| next | Cambia al slider siguiente | — |
### Atributos de Carousel-Item
| Atributo | Descripción | Tipo | Valores aceptados | Por Defecto |
| -------- | ---------------------------------------- | ------ | ----------------- | ----------- |
| name | Nombre del item que puede ser usado en `setActiveItem` | string | — | — |
| label | Texto que se mostrara en el indicador de paginacion correspondiente | string | — | — |
### Carousel-Item Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| name | name of the item, can be used in `setActiveItem` | string | — | — |
| label | text content for the corresponding indicator | string | — | — |

View File

@ -16,11 +16,11 @@ export default {
startTime: 'Horaire début',
endDate: 'Date fin',
endTime: 'Horaire fin',
prevYear: 'Previous Year', // to be translated
nextYear: 'Next Year', // to be translated
prevMonth: 'Previous Month', // to be translated
nextMonth: 'Next Month', // to be translated
year: '',
prevYear: 'Année précédente',
nextYear: 'Année suivante',
prevMonth: 'Mois précédent',
nextMonth: 'Mois suivant',
year: 'Année',
month1: 'Janvier',
month2: 'Février',
month3: 'Mars',
@ -81,7 +81,7 @@ export default {
error: 'Erreur'
},
upload: {
deleteTip: 'press delete to remove', // to be translated
deleteTip: 'Cliquer sur supprimer pour retirer le fichier',
delete: 'Supprimer',
preview: 'Aperçu',
continue: 'Continuer'
@ -91,7 +91,7 @@ export default {
confirmFilter: 'Confirmer',
resetFilter: 'Réinitialiser',
clearFilter: 'Tous',
sumText: 'Sum' // to be translated
sumText: 'Somme'
},
tree: {
emptyText: 'Aucune donnée'
@ -99,10 +99,10 @@ export default {
transfer: {
noMatch: 'Aucune correspondance',
noData: 'Aucune donnée',
titles: ['List 1', 'List 2'], // to be translated
filterPlaceholder: 'Enter keyword', // to be translated
noCheckedFormat: '{total} items', // to be translated
hasCheckedFormat: '{checked}/{total} checked' // to be translated
titles: ['Liste 1', 'Liste 2'],
filterPlaceholder: 'Entrer un mot clef',
noCheckedFormat: '{total} elements',
hasCheckedFormat: '{checked}/{total} coché(s)'
}
}
};