We recommend our users to lock Element's version when using CDN. Please refer to [unpkg.com](https://unpkg.com) for more information.
Recomendamos a nuestros usuarios congelar la versión de Elemet cuando usas un CDN. Por favor, refiérase a [unpkg.com](https://unpkg.com) para más información.
:::
### Hello world
### Hello world
If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
Si estás usando un CDN, una página con Hello-World es fácil con Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
```html
```html
<!DOCTYPE html>
<!DOCTYPE html>
...
@@ -54,4 +54,5 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt
...
@@ -54,4 +54,5 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt
</script>
</script>
</html>
</html>
```
```
If you are using npm and wish to apply webpack, please continue to the next page: Quick Start.
Si estás usando npm y deseas combinarlo con webpack, por favor continúa a la siguiente página: Quick Start
@@ -194,11 +194,11 @@ Form a more complex hybrid layout by combining the basic 1/24 columns.
...
@@ -194,11 +194,11 @@ Form a more complex hybrid layout by combining the basic 1/24 columns.
```
```
:::
:::
### Column offset
### Offset de columnas
You can specify column offsets.
Puedes especificar offsets para las columnas.
::: demo You can specify the number of column offset by setting the value of `offset` attribute of Col.
:::**Demo** Puedes especificar el offset para una columna mediante el atributo `offset` de Col.
```html
```html
<el-row:gutter="20">
<el-row:gutter="20">
...
@@ -244,11 +244,11 @@ You can specify column offsets.
...
@@ -244,11 +244,11 @@ You can specify column offsets.
```
```
:::
:::
### Alignment
### Alineación
Use the flex layout to make flexible alignment of columns.
Usa flex layout para un alineamiento flexible de columnas.
::: demo You can enable flex layout by setting `type` attribute to 'flex', and define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around.
:::**Demo** Puedes habilitar flex layout asignando el atributo `type` a 'flex', y definir el layout de elementos hijos asignando el atributo `justify` con los valores start, center, end, space-between o space-around.
@@ -341,48 +341,48 @@ Taking example by Bootstrap's responsive design, five breakpoints are preset: xs
...
@@ -341,48 +341,48 @@ Taking example by Bootstrap's responsive design, five breakpoints are preset: xs
```
```
:::
:::
### Utility classes for hiding elements
### Clases útiles para ocultar elementos
Additionally, Element provides a series of classes for hiding elements under certain conditions. These classes can be added to any DOM elements or custom components. You need to import the following CSS file to use these classes:
Adicionalmente, Element provee una serie de clases para ocultar elementos dadas ciertas condiciones. Estas clases pueden se agregadas a cualquier elemento del DOM o un elemento propio. Necesitas importar el siguiente archivo CSS para usar estas clases:
```js
```js
import'element-ui/lib/theme-chalk/display.css';
import'element-ui/lib/theme-chalk/display.css';
```
```
The classes are:
Las clases son:
-`hidden-xs-only` - hide when on extra small viewports only
-`hidden-xs-only` - oculto en viewports extra pequenhos solamente
-`hidden-sm-only` - hide when on small viewports and down
-`hidden-sm-only` - oculto en viewports pequenhos solamente
-`hidden-sm-and-down` - hide when on small viewports and down
-`hidden-sm-and-down` - oculto en viewports pequenhos y menores
-`hidden-sm-and-up` - hide when on small viewports and up
-`hidden-sm-and-up` - oculto en viewports pequenhos y superiores
-`hidden-md-only` - hide when on medium viewports only
-`hidden-md-only` - oculto en viewports medios solamente
-`hidden-md-and-down` - hide when on medium viewports and down
-`hidden-md-and-down` - oculto en viewports medios y menores
-`hidden-md-and-up` - hide when on medium viewports and up
-`hidden-md-and-up` - oculto en viewports medios y mayores
-`hidden-lg-only` - hide when on large viewports only
-`hidden-lg-only` - ocultos en viewports grandes solamente
-`hidden-lg-and-down` - hide when on large viewports and down
-`hidden-lg-and-down` - ocultos en viewports grandes y menores
-`hidden-lg-and-up` - hide when on large viewports and up
-`hidden-lg-and-up` - ocultos en viewports grandes y superiores
-`hidden-xl-only` - hide when on extra large viewports only
-`hidden-xl-only` - oculto en viewports extra grandes solamente
Top bar NavMenu can be used in a variety of scenarios.
Top bar NavMenu puede ser usado en distinto escenarios.
:::**Demo** Por defecto el menú es vertical, pero puedes hacerlo horizontal asignando a la propiedad `mode` el valor 'horizontal'. Además, puedes utilizar el componente de submenú para crear un menú de segundo nivel. Menú provee `background-color`, `text-color` y `active-text-color` para customizar los colores.
::: demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. Menu provides `background-color`, `text-color` and `active-text-color` to customize the colors.
@@ -110,9 +111,10 @@ Top bar NavMenu can be used in a variety of scenarios.
...
@@ -110,9 +111,10 @@ Top bar NavMenu can be used in a variety of scenarios.
### Side bar
### Side bar
Vertical NavMenu with sub-menus.
NavMenu vertical con sub-menús.
:::**Demo** Puedes utilizar el componente el-menu-item-group para crear un grupo de menú, y el nombre del grupo estará determinado por la propiedad `title` o la propiedad `slot`.
::: demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.
```html
```html
<el-rowclass="tac">
<el-rowclass="tac">
<el-col:span="12">
<el-col:span="12">
...
@@ -205,9 +207,9 @@ Vertical NavMenu with sub-menus.
...
@@ -205,9 +207,9 @@ Vertical NavMenu with sub-menus.
