Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tag and Typography #8632

Merged
merged 2 commits into from
Dec 4, 2017
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Tag and typography
  • Loading branch information
Gonzalo2310 committed Dec 3, 2017
commit 9c86b28392c2113ba5a49c41d1e7fc7773a7569f
54 changes: 27 additions & 27 deletions examples/docs/es/tag.md
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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>
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand All @@ -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 | — |


### Events
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| close | triggers when Tag is removed | — |
### 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 | — |


### Eventos
| Nombre | Descripción | Parametros |
| ------ | ------------------------------------ | ---------- |
| close | se disoara cuando el Tag es removido | — |
12 changes: 6 additions & 6 deletions examples/docs/es/typography.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
display: inline-block;
margin-right: 17px;
border-radius: 4px;

.name {
position: absolute;
bottom: 0;
Expand Down Expand Up @@ -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">
和畅惠风
Expand All @@ -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
Expand All @@ -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>
Expand Down