mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-11-30 11:17:38 +08:00
Tag and Typography (#8632)
* Revision of documentation in Spanish * Tag and typography
This commit is contained in:
parent
6123ee70a3
commit
7e08026c46
@ -18,14 +18,14 @@
|
||||
handleClose(tag) {
|
||||
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
|
||||
},
|
||||
|
||||
|
||||
showInput() {
|
||||
this.inputVisible = true;
|
||||
this.$nextTick(_ => {
|
||||
this.$refs.saveTagInput.$refs.input.focus();
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
handleInputConfirm() {
|
||||
let inputValue = this.inputValue;
|
||||
if (inputValue) {
|
||||
@ -59,11 +59,11 @@
|
||||
|
||||
## 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
|
||||
<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
|
||||
<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
|
||||
```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
|
||||
<el-tag>Default</el-tag>
|
||||
@ -198,18 +198,18 @@ Besides default size, Tag component provides three additional sizes for you to c
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| type | theme | string | success/info/warning/danger | — |
|
||||
| closable | whether Tag can be removed | boolean | — | false |
|
||||
| disable-transitions | whether to disable animations | boolean | — | false |
|
||||
| hit | whether Tag has a highlighted border | boolean | — | false |
|
||||
| color | background color of the Tag | string | — | — |
|
||||
| size | tag size | string | medium / small / mini | — |
|
||||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------------- | ----------------------------------- | ------- | --------------------------- | ----------- |
|
||||
| type | tema | string | success/info/warning/danger | — |
|
||||
| closable | si el Tag puede ser removido | boolean | — | false |
|
||||
| disable-transitions | si se deshabilitan las animaciones | boolean | — | false |
|
||||
| hit | si el Tag tiene un borde resaltado | boolean | — | false |
|
||||
| color | color de fondo del Tag | string | — | — |
|
||||
| size | tamaño del Tag | string | medium / small / mini | — |
|
||||
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| close | triggers when Tag is removed | — |
|
||||
### Eventos
|
||||
| Nombre | Descripción | Parametros |
|
||||
| ------ | ------------------------------------ | ---------- |
|
||||
| close | se disoara cuando el Tag es removido | — |
|
@ -13,7 +13,7 @@
|
||||
display: inline-block;
|
||||
margin-right: 17px;
|
||||
border-radius: 4px;
|
||||
|
||||
|
||||
.name {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@ -72,11 +72,11 @@
|
||||
}
|
||||
</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">
|
||||
和畅惠风
|
||||
@ -91,7 +91,7 @@ We create a font convention to ensure the best presentation across different pla
|
||||
<div class="name">Microsoft YaHei</div>
|
||||
</div>
|
||||
|
||||
### English / Numberic Font
|
||||
### Inglés / Fuente Numérica
|
||||
|
||||
<div class="demo-typo-box typo-Helvetica-neue">
|
||||
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 Convention
|
||||
### Convención de fuentes
|
||||
|
||||
<table class="demo-typo-size">
|
||||
<tbody>
|
||||
|
Loading…
Reference in New Issue
Block a user