mirror of https://github.com/ElemeFE/element
Tag and Typography (#8632)
* Revision of documentation in Spanish * Tag and typographypull/8725/head
parent
6123ee70a3
commit
7e08026c46
|
@ -18,14 +18,14 @@
|
||||||
handleClose(tag) {
|
handleClose(tag) {
|
||||||
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
|
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
|
||||||
},
|
},
|
||||||
|
|
||||||
showInput() {
|
showInput() {
|
||||||
this.inputVisible = true;
|
this.inputVisible = true;
|
||||||
this.$nextTick(_ => {
|
this.$nextTick(_ => {
|
||||||
this.$refs.saveTagInput.$refs.input.focus();
|
this.$refs.saveTagInput.$refs.input.focus();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
handleInputConfirm() {
|
handleInputConfirm() {
|
||||||
let inputValue = this.inputValue;
|
let inputValue = this.inputValue;
|
||||||
if (inputValue) {
|
if (inputValue) {
|
||||||
|
@ -59,11 +59,11 @@
|
||||||
|
|
||||||
## Tag
|
## Tag
|
||||||
|
|
||||||
Used for marking and selection.
|
Se utiliza para marcar y seleccionar.
|
||||||
|
|
||||||
### Basic usage
|
### Uso básico
|
||||||
|
|
||||||
::: demo Use the `type` attribute to define Tag's type. In addition, the `color` attribute can be used to set the background color of the Tag.
|
::: demo Utilice el atributo `type` para definir el tipo de etiqueta. Además, el atributo `color` se puede utilizar para establecer el color de fondo de la etiqueta.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<el-tag>Tag One</el-tag>
|
<el-tag>Tag One</el-tag>
|
||||||
|
@ -74,9 +74,9 @@ Used for marking and selection.
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
### Removable Tag
|
### Etiqueta removible
|
||||||
|
|
||||||
:::demo `closable` attribute can be used to define a removable tag. It accepts a `Boolean`. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the `disable-transitions` attribute, which accepts a `Boolean`, to `true`. `close` event triggers when Tag is removed.
|
:::demo el atributo `closable` puede usarse para definir una etiqueta removible. Acepta un `Boolean`. De forma predeterminada, la eliminación de la etiqueta tiene una animación que se desvanece. Si no quiere usarlo, puede configurar el atributo `disable-transitions` , que acepta `Boolean`, como `true`. Se dispara el evento `close` cuando la etiqueta es removida.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<el-tag
|
<el-tag
|
||||||
|
@ -105,9 +105,9 @@ Used for marking and selection.
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
### Edit Dynamically
|
### Editar dinámicamente
|
||||||
|
|
||||||
You can use the `close` event to add and remove tag dynamically.
|
Puede utilizar el evento `close` para añadir y eliminar etiquetas dinámicamente.
|
||||||
|
|
||||||
:::demo
|
:::demo
|
||||||
```html
|
```html
|
||||||
|
@ -184,11 +184,11 @@ You can use the `close` event to add and remove tag dynamically.
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
### Sizes
|
### Tamaños
|
||||||
|
|
||||||
Besides default size, Tag component provides three additional sizes for you to choose among different scenarios.
|
Además del tamaño predeterminado, el componente Tag proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios.
|
||||||
|
|
||||||
:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
|
:::demo Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `small` o `mini`.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<el-tag>Default</el-tag>
|
<el-tag>Default</el-tag>
|
||||||
|
@ -198,18 +198,18 @@ Besides default size, Tag component provides three additional sizes for you to c
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
### Attributes
|
### Atributos
|
||||||
| Attribute | Description | Type | Accepted Values | Default |
|
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
| ------------------- | ----------------------------------- | ------- | --------------------------- | ----------- |
|
||||||
| type | theme | string | success/info/warning/danger | — |
|
| type | tema | string | success/info/warning/danger | — |
|
||||||
| closable | whether Tag can be removed | boolean | — | false |
|
| closable | si el Tag puede ser removido | boolean | — | false |
|
||||||
| disable-transitions | whether to disable animations | boolean | — | false |
|
| disable-transitions | si se deshabilitan las animaciones | boolean | — | false |
|
||||||
| hit | whether Tag has a highlighted border | boolean | — | false |
|
| hit | si el Tag tiene un borde resaltado | boolean | — | false |
|
||||||
| color | background color of the Tag | string | — | — |
|
| color | color de fondo del Tag | string | — | — |
|
||||||
| size | tag size | string | medium / small / mini | — |
|
| size | tamaño del Tag | string | medium / small / mini | — |
|
||||||
|
|
||||||
|
|
||||||
### Events
|
### Eventos
|
||||||
| Event Name | Description | Parameters |
|
| Nombre | Descripción | Parametros |
|
||||||
|---------- |-------- |---------- |
|
| ------ | ------------------------------------ | ---------- |
|
||||||
| close | triggers when Tag is removed | — |
|
| close | se disoara cuando el Tag es removido | — |
|
|
@ -13,7 +13,7 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: 17px;
|
margin-right: 17px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
@ -72,11 +72,11 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
## Typography
|
## Tipografía
|
||||||
|
|
||||||
We create a font convention to ensure the best presentation across different platforms.
|
Creamos una convención de fuentes para asegurar la mejor presentación en diferentes plataformas.
|
||||||
|
|
||||||
### Chinese Font
|
### Fuente en chino
|
||||||
|
|
||||||
<div class="demo-typo-box typo-PingFang">
|
<div class="demo-typo-box typo-PingFang">
|
||||||
和畅惠风
|
和畅惠风
|
||||||
|
@ -91,7 +91,7 @@ We create a font convention to ensure the best presentation across different pla
|
||||||
<div class="name">Microsoft YaHei</div>
|
<div class="name">Microsoft YaHei</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
### English / Numberic Font
|
### Inglés / Fuente Numérica
|
||||||
|
|
||||||
<div class="demo-typo-box typo-Helvetica-neue">
|
<div class="demo-typo-box typo-Helvetica-neue">
|
||||||
RGag
|
RGag
|
||||||
|
@ -112,7 +112,7 @@ We create a font convention to ensure the best presentation across different pla
|
||||||
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
|
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
|
||||||
```
|
```
|
||||||
|
|
||||||
### Font Convention
|
### Convención de fuentes
|
||||||
|
|
||||||
<table class="demo-typo-size">
|
<table class="demo-typo-size">
|
||||||
<tbody>
|
<tbody>
|
||||||
|
|
Loading…
Reference in New Issue