mirror of https://github.com/ElemeFE/element
es-doc: add card, carousel translation (#8091)
* Complete french translation 🇫🇷
* card.md Spanish version
* carousel.md spanish version
pull/8308/head
parent
5fc56bccc7
commit
287b823938
|
@ -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' } |
|
||||
|
|
|
@ -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 | — | — |
|
||||
|
|
|
@ -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)'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue