diff --git a/.eslintrc b/.eslintrc index ba8a1b188..efb7c4f79 100644 --- a/.eslintrc +++ b/.eslintrc @@ -6,7 +6,7 @@ "expect": true, "sinon": true }, - "plugins": ['vue'], + "plugins": ['vue','json'], "extends": 'elemefe', "parserOptions": { "ecmaFeatures": { diff --git a/.github/CONTRIBUTING.en-US.md b/.github/CONTRIBUTING.en-US.md index e527744db..080f03954 100644 --- a/.github/CONTRIBUTING.en-US.md +++ b/.github/CONTRIBUTING.en-US.md @@ -8,7 +8,7 @@ We are excited that you are interested in contributing to Element. Before submit ## Issue Guidelines -- Issues are exclusively for bug reports, feature requests and design-related topics. Other questions may be closed directly. If any questions come up when you are using Element, please hit [Gitter](https://gitter.im/ElemeFE/element) for help. +- Issues are exclusively for bug reports, feature requests and design-related topics. Other questions may be closed directly. If any questions come up when you are using Element, please hit [Gitter](https://gitter.im/element-en/Lobby) for help. - Before submitting an issue, please check if similar problems have already been issued. diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index df777aff6..497b52d20 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -1,5 +1,15 @@ ## Changelog +### 2.0.4 + +*2017-11-10* + +- Improved accessibility for Cascader, Dropdown, Message, Notification, Popover, Tooltip and Tree +- Fixed Container resize when the width of viewport decreases, #8042 +- Fixed Tree's `updateKeyChildren` incorrectly deleting child nodes, #8100 +- Fixed bordered CheckboxButton's height when nested in a Form, #8100 +- Fixed Menu's parsing error for custom colors, #8153 (by @zhouyixiang) + ### 2.0.3 *2017-11-03* diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index d713059db..1e21c98a4 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -1,5 +1,15 @@ ## 更新日志 +### 2.0.4 + +*2017-11-10* + +- 提升 Cascader、Dropdown、Message、Notification、Popover、Tooltip、Tree 的可访问性 +- 修复当视口变窄时 Container 无法同步更新其宽度的问题，#8042 +- 修复 Tree 的 `updateKeyChildren` 在删除子节点时的行为错误，#8100 +- 修复带有边框的 CheckboxButton 在 Form 中高度错误的问题，#8100 +- 修复 Menu 在解析自定义颜色时的错误，#8153（by @zhouyixiang） + ### 2.0.3 *2017-11-03* diff --git a/FAQ.md b/FAQ.md index 3f1bbfb8c..ab54450a8 100644 --- a/FAQ.md +++ b/FAQ.md @@ -36,27 +36,6 @@ 请阅读 Vue 文档 [Render Function](http://vuejs.org/v2/guide/render-function.html) 的相关内容。注意，使用 JSX 来写 Render Function 的话，需要安装 `babel-plugin-transform-vue-jsx`，并参照其[文档](https://github.com/vuejs/babel-plugin-transform-vue-jsx)进行配置。 -
-如何使用第三方图标库？ - -只要修改第三方图标库的前缀（具体方法参阅第三方库的文档），并编写相应的 CSS，即可在 Element 中像使用内置图标一样使用第三方图标。例如，将第三方库的前缀改为 `el-icon-my`，然后在其 CSS 文件中添加： -```css -[class^="el-icon-my"], [class*=" el-icon-my"] { - font-family:"your-font-family" !important; - - /* 以下内容参照第三方图标库本身的规则 */ - font-size: inherit; - font-style:normal; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -``` -具体使用时，和 Element 内置的图标用法一样。比如在 `el-input` 中： -```html - -``` -
-
所有组件的任意属性都支持 `.sync` 修饰符吗？ @@ -129,27 +108,6 @@ The parameter `row` is the data object of corresponding row. Please refer to [Render Function](http://vuejs.org/v2/guide/render-function.html) in Vue's documentation. In addition, if you are writing render functions with JSX, `babel-plugin-transform-vue-jsx` is required. See [here](https://github.com/vuejs/babel-plugin-transform-vue-jsx) for its configurations.
-
-How do I use third-party icon font library with Element? - -You just need to modify the class name prefix of the third-party library (see their docs for how to do it), and write some CSS, then you can use them just like you use Element built-in icons. For example, change the prefix to `el-icon-my`, and then add the following to its CSS: -```css -[class^="el-icon-my"], [class*=" el-icon-my"] { - font-family:"your-font-family" !important; - - /* The following is based on original CSS rules of third-party library */ - font-size: inherit; - font-style:normal; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -``` -Now you can use them as you do with built-in icons. For example, in `el-input`: -```html - -``` -
-
Can I use `.sync` modifier on every attribute? diff --git a/examples/app.vue b/examples/app.vue index 784c0b888..035034755 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -191,7 +191,6 @@ const lang = location.hash.replace('#', '').split('/')[1] || 'zh-CN'; const localize = lang => { - console.log(lang); switch (lang) { case 'zh-CN': use(zhLocale); @@ -232,6 +231,7 @@ const preferGithub = localStorage.getItem('PREFER_GITHUB'); if (href.indexOf('element-cn') > -1 || preferGithub) return; setTimeout(() => { + if (this.lang !== 'zh-CN') return; this.$confirm('建议大陆用户访问部署在国内的站点，是否跳转？', '提示') .then(() => { location.href = location.href.replace('element.', 'element-cn.'); @@ -249,12 +249,12 @@ this.suggestJump(); } setTimeout(() => { - const notified = localStorage.getItem('RELEASE_NOTIFIED'); - if (!notified) { + const notified = localStorage.getItem('ES_NOTIFIED'); + if (!notified && this.lang !== 'zh-CN') { const h = this.$createElement; const title = this.lang === 'zh-CN' - ? '2.0 正式发布' - : '2.0 available now'; + ? '帮助我们完成西班牙语文档' + : 'Help us with Spanish docs'; const messages = this.lang === 'zh-CN' ? ['点击', '这里', '查看详情'] : ['Click ', 'here', ' to learn more']; @@ -266,13 +266,13 @@ h('a', { attrs: { target: '_blank', - href: `https://github.com/ElemeFE/element/issues/${ this.lang === 'zh-CN' ? '7755' : '7756' }` + href: 'https://github.com/ElemeFE/element/issues/8074' } }, messages[1]), messages[2] ]), onClose() { - localStorage.setItem('RELEASE_NOTIFIED', 1); + localStorage.setItem('ES_NOTIFIED', 1); } }); } diff --git a/examples/docs/en-US/select.md b/examples/docs/en-US/select.md index 79e85c45b..abff1c601 100644 --- a/examples/docs/en-US/select.md +++ b/examples/docs/en-US/select.md @@ -101,6 +101,7 @@ value8: '', value9: [], value10: [], + value11: [], loading: false, states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"] }; @@ -320,7 +321,7 @@ You can clear Select using a clear icon. Multiple select uses tags to display selected options. -:::demo Set `multiple` attribute for `el-select` to enable multiple mode. In this case, the value of `v-model` will be an array of selected options. +:::demo Set `multiple` attribute for `el-select` to enable multiple mode. In this case, the value of `v-model` will be an array of selected options. By default the selected options will be displayed as Tags. You can collapse them to a text by using `collapse-tags` attribute. ```html -## Container -Container components for scaffolding basic structure of the page: +## Contenedor +Componentes contenedores para iniciar una estructura básica de un sitio: -``: wrapper container. When nested with a `` or ``, all its child elements will be vertically arranged. Otherwise horizontally. +``: Contenedor. Cuando este elemento se anida con un `` o ``, todos los elementos secundarios se organizan verticalmente. +De lo contrario, de forma horizontal. -``: container for headers. +``: Contenedor para cabeceras. -``: container for side sections (usually a side nav). +``: Contenedor para secciones laterales (generalmente, una barra lateral). -``: container for main sections. +``: Contenedor para sección principal. -``: container for footers. +``: Contenedor para pie de página. :::tip -These components use flex for layout, so please make sure your browser supports it. Besides, ``'s direct child elements have to be one or more of the latter four components. And father element of the latter four components must be a ``. +Estos componentes utilizan flex para el diseño, así que asegúrate que el navegador lo soporte. Además, los elementos directos de `` tienen que +ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un ``. ::: -### Common layouts +### Diseños comunes ::: demo ```html - Header - Main + Cabecera + Principal - Header - Main - Footer + Cabecera + Principal + Pie de página - Aside - Main + Barra lateral + Principal - Header + Cabecera - Aside - Main + Barra lateral + Principal - Header + Cabecera - Aside + Barra lateral - Main - Footer + Principal + Pie de página - Aside + Barra lateral - Header - Main + Cabecera + Principal - Aside + Barra lateral - Header - Main - Footer + Cabecera + Principal + Pie de página @@ -168,7 +170,7 @@ These components use flex for layout, so please make sure your browser supports ``` ::: -### Example +### Ejemplo ::: demo ```html @@ -278,22 +280,22 @@ These components use flex for layout, so please make sure your browser supports ``` ::: -### Container Attributes -| Attribute | Description | Type | Accepted Values | Default | +### Atributos de contenedor +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | |---------- |-------------- |---------- |-------------------------------- |-------- | -| direction | layout direction for child elements | string | horizontal / vertical | vertical when nested with `el-header` or `el-footer`; horizontal otherwise | +| direction | dirección de diseño para elementos secundarios | string | horizontal / vertical | vertical cuando el elemento está anidado con `el-header`, de lo contrario, horizontal | -### Header Attributes -| Attribute | Description | Type | Accepted Values | Default | +### Atributos de cabecera +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | |---------- |-------------- |---------- |-------------------------------- |-------- | -| height | height of the header | string | — | 60px | +| height | altura de la cabecera | string | — | 60px | -### Aside Attributes -| Attribute | Description | Type | Accepted Values | Default | +### Atributos de barra lateral +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | |---------- |-------------- |---------- |-------------------------------- |-------- | -| width | width of the side section | string | — | 300px | +| width | ancho de la barra lateral | string | — | 300px | -### Footer Attributes -| Attribute | Description | Type | Accepted Values | Default | +### Atributos de pie de página +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | |---------- |-------------- |---------- |-------------------------------- |-------- | -| height | height of the footer | string | — | 60px | \ No newline at end of file +| height | altura del pie de página | string | — | 60px | \ No newline at end of file diff --git a/examples/docs/es/custom-theme.md b/examples/docs/es/custom-theme.md index 5fb6bdd59..07b918480 100644 --- a/examples/docs/es/custom-theme.md +++ b/examples/docs/es/custom-theme.md @@ -1,25 +1,25 @@ -## Custom theme -Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea. We provide three ways to change the style variables. +## Tema personalizado +Element utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesitas remplazar estilos a gran escala, por ejemplo, cambiar el color del tema de azul a naranja o verde, quizás reemplazarlos uno a uno no sea lo más adecuado, por ello, te proporcionamos 3 maneras de modificar los estilos. -### Changing theme color -If you just want to change the theme color of Element, the [theme preview website](https://elementui.github.io/theme-chalk-preview/#/en-US) is recommended. The theme color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects. +### Cambiando el color del tema +Si lo que buscas es cambiar el color del tema de Element, se recomienda utilizar el [sitio de visualización de temas](https://elementui.github.io/theme-chalk-preview/#/en-US). Element utiliza un color azul brillante y amigable como tema principal. Al cambiarlo, puede hacer que Element este más conectado visualmente a proyectos específicos. -The above website enables you to preview theme of a new theme color in real-time, and it can generate a complete style package based on the new theme color for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section). +Este sitio, te permitirá obtener una vista previa del tema con un nuevo color en tiempo real, y, además, obtener un paquete de estilos completo basado en el nuevo color para su descarga (para importar estos nuevos estilos, consulta la sección ‘Importar un tema personalizado’ o ‘Importar un tema de componente bajo demanda' que se encuentran dentro de esta sección). -### Update SCSS variables in your project -`theme-chalk` is written in SCSS. If your project also uses SCSS, you can directly change Element style variables. Create a new style file, e.g. `element-variables.scss`: +### Actualizando variables SCSS en tu proyecto +`theme-chalk` esta escrito en SCSS. Si tu proyecto también utiliza SCSS, puedes cambiar las variables de estilos de Element. Para ello, solo necesitas crear un nuevo archivo de estilos, por ejemplo, `element-variables.scss`: ```html -/* theme color */ +/* Color del tema */ $--color-primary: teal; -/* icon font path, required */ +/* Ubicación de la fuente, obligatoria */ $--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts'; @import "../node_modules/element-ui/packages/theme-chalk/src/index"; ``` -Then in the entry file of your project, import this style file instead of Element's built CSS: +Entonces, en el archivo principal del proyecto, importa este archivo de estilos en lugar de los estilos de Element: ```JS import Vue from 'vue' import Element from 'element-ui' @@ -29,29 +29,29 @@ Vue.use(Element) ``` :::tip -Note that it is required to override icon font path to the relative path of Element's font files. +Nota es necesario sobreescribir la ruta de la fuente por una ruta relativa de las fuentes de Element. ::: -### CLI theme tool -If you project doesn't use SCSS, you can customize themes with our CLI theme tool: +### CLI para generar temas +Si tu proyecto no utiliza SCSS, puedes personalizar el tema a través de esta herramienta: -#### Install -First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them. +#### Instalación +Primero, debes instalar el generador de temas ya sea de forma global o local. Se recomienda instalarlo de forma local, ya que de esta manera, cuando otros clonen tu proyecto, npm automáticamente los instalará para ellos. ```shell npm i element-theme -g ``` -Then install the chalk theme from npm or GitHub. +Ahora, instala el tema `chalk` desde npm o Github. ```shell -# from npm +# desde npm npm i element-theme-chalk -D -# from GitHub +# desde GitHub npm i https://github.com/ElementUI/theme-chalk -D ``` -#### Initialize variable file -After successfully installing the above packages, a command named `et` is available in CLI (if the packages are installed locally, use `node_modules/.bin/et` instead). Run `-i` to initialize the variable file which outputs to `element-variables.scss` by default. And you can specify its output directory as you will. +#### Inicializar archivo de variables +Después de haber instalado correctamente los paquetes, el comando `et` estará disponible en tu CLI (si instalaste el paquete de manera local, utilizá `node_modules/.bin/et` en su lugar). Ejecuta `-i` para inicializar un archivo de variables, puedes especificar un nombre distinto, pero por defecto, el archivo se llama `element-variables.scss`. También puedes especificar un directorio distinto. ```shell et -i [custom output file] @@ -59,7 +59,7 @@ et -i [custom output file] > ✔ Generator variables file ``` -In `element-variables.scss` you can find all the variables we used to style Element and they are defined in SCSS format. Here's a snippet: +En el archivo `element-variables.scss` podrás encontrar todas las variables que utiliza Element para definir los estilos y estos están definidos en SCSS. Aquí un ejemplo: ```css $--color-primary: #409EFF !default; $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */ @@ -80,14 +80,14 @@ $--color-info: #878d99 !default; ... ``` -#### Modify variables -Just edit `element-variables.scss`, e.g. changing the theme color to red: +#### Modificando variables +Solo debes modificar el archivo `element-variables.scss`, por ejemplo, para cambiar el color del tema a rojo: ```CSS $--color-primary: red; ``` -#### Build theme -After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`. And if you customized the variable file's output, you need to add a parameter `-c` and variable file's name: +#### Construyendo el tema +Después de haber modificado el archivo de variables, utilizaremos el comando `et` para construir nuestro tema. Puedes activar el modo `watch` agregando el parámetro `-w`. Y, si deseas personalizar el nombre del archivo, debes agregar el parámetro `-c` seguido del nombre. ```shell et @@ -95,8 +95,8 @@ et > ✔ build element theme ``` -#### Import custom theme -By default the build theme file is placed inside `./theme`. You can specify its output directory with parameter `-o`. Importing your own theme is just like importing the default theme, only this time you import the file you just built: +#### Importar un tema personalizado +Por defecto, el archivo de tema construido es colocado dentro de `./theme`. Tu puedes especificar un directorio distinto utilizando el parámetro `-o`. Importar tu propio tema es igual a como si importarás el tema por defecto, únicamente tienes que importar el archivo que se construyó: ```javascript import '../theme/index.css' @@ -106,8 +106,8 @@ import Vue from 'vue' Vue.use(ElementUI) ``` -#### Import component theme on demand -If you are using `babel-plugin-component` for on-demand import, just modify `.babelrc` and specify `styleLibraryName` to the path where your custom theme is located relative to `.babelrc`. Note that `~` is required: +#### Importar un tema de componente bajo demanda +Si estas utilizando `babel-plugin-component` para importar bajo demanda, solo debes modificar el archivo `.babelrc` y especificar en la propiedad `styleLibraryName` la ruta en donde se encuentra localizado tu tema personalizado relativo a `.babelrc`. Nota el carácter `~` es obligatorio: ```json { "plugins": [["component", [ @@ -119,4 +119,4 @@ If you are using `babel-plugin-component` for on-demand import, just modify `.ba } ``` -If you are unfamiliar with `babel-plugin-component`, please refer to Quick Start. For more details, check out the [project repository](https://github.com/ElementUI/element-theme) of `element-theme`. \ No newline at end of file +Si no estas familiarizado con `babel-plugin-component`, por favor dirígete a la documentación sobre Como Iniciar. Para más detalles, consulta el [repositorio del proyecto](https://github.com/ElementUI/element-theme) de `element-theme`. \ No newline at end of file diff --git a/examples/docs/es/installation.md b/examples/docs/es/installation.md index a381d3972..bc96d89c9 100644 --- a/examples/docs/es/installation.md +++ b/examples/docs/es/installation.md @@ -1,14 +1,14 @@ -## Installation +## Instalación ### npm -Installing with npm is recommended and it works seamlessly with [webpack](https://webpack.js.org/). +Instalar mediante npm es la forma recomendada ya que se integra facilmente con [webpack](https://webpack.js.org/). ```shell npm i element-ui -S ``` -### CDN -Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/) , and import JavaScript and CSS file in your page. +### CDN +Obten la última versión desde [unpkg.com/element-ui](https://unpkg.com/element-ui/) , e importa el JavaScript y los archivos CSS en tu página. ```html @@ -17,12 +17,12 @@ Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/ ``` -:::tip -We recommend our users to lock Element's version when using CDN. Please refer to [unpkg.com](https://unpkg.com) for more information. -::: +##Tip +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 -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 @@ -54,4 +54,5 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt ``` -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 + diff --git a/examples/docs/es/layout.md b/examples/docs/es/layout.md index e234c6061..02c1c9081 100644 --- a/examples/docs/es/layout.md +++ b/examples/docs/es/layout.md @@ -31,13 +31,13 @@ ## Layout -Quickly and easily create layouts with the basic 24-column. +Rápido y facilmente crea un layout básico con 24 columnas. -### Basic layout +### Layout básico -Create basic grid layout using columns. +Crea un layout básico usando columnas. -::: demo With `row` and `col`, we can easily manipulate the layout using the `span` attribute. +:::**Demo** Con `row` y `col`, podemos facilmente manipular el layout usando el atributo `span`. ```html
@@ -97,11 +97,11 @@ Create basic grid layout using columns. ``` ::: -### Column spacing +### Espaciado de columnas -Column spacing is supported. +El espaciado de columnas está soportado. -::: demo Row provides `gutter` attribute to specify spacings between columns, and its default value is 0. +:::**Demo** Row provee el atributo `gutter` para especificar el espacio entre columnas y su valor por defecto es 0. ```html
@@ -141,11 +141,11 @@ Column spacing is supported. ``` ::: -### Hybrid layout +### Layout híbrido -Form a more complex hybrid layout by combining the basic 1/24 columns. +Crea un complejo layout híbrido combinando el básico de 1/24 columnas. -::: demo +:::**Demo** ```html
@@ -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 @@ -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. ```html
@@ -309,9 +309,9 @@ Use the flex layout to make flexible alignment of columns. ### Responsive Layout -Taking example by Bootstrap's responsive design, five breakpoints are preset: xs, sm, md, lg and xl. +Tomando el ejemplo de Bootstrap responsive design, existen 5 breakpoints: xs, sm, md, lg y xl. -::: demo +:::**Demo** ```html
@@ -341,48 +341,50 @@ 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 import 'element-ui/lib/theme-chalk/display.css'; ``` -The classes are: -- `hidden-xs-only` - hide when on extra small viewports only -- `hidden-sm-only` - hide when on small viewports and down -- `hidden-sm-and-down` - hide when on small viewports and down -- `hidden-sm-and-up` - hide when on small viewports and up -- `hidden-md-only` - hide when on medium viewports only -- `hidden-md-and-down` - hide when on medium viewports and down -- `hidden-md-and-up` - hide when on medium viewports and up -- `hidden-lg-only` - hide when on large viewports only -- `hidden-lg-and-down` - hide when on large viewports and down -- `hidden-lg-and-up` - hide when on large viewports and up -- `hidden-xl-only` - hide when on extra large viewports only +Las clases son: +- `hidden-xs-only` - oculto en viewports extra pequenhos solamente +- `hidden-sm-only` - oculto en viewports pequenhos solamente +- `hidden-sm-and-down` - oculto en viewports pequenhos y menores +- `hidden-sm-and-up` - oculto en viewports pequenhos y superiores +- `hidden-md-only` - oculto en viewports medios solamente +- `hidden-md-and-down` - oculto en viewports medios y menores +- `hidden-md-and-up` - oculto en viewports medios y mayores +- `hidden-lg-only` - ocultos en viewports grandes solamente +- `hidden-lg-and-down` - ocultos en viewports grandes y menores +- `hidden-lg-and-up` - ocultos en viewports grandes y superiores +- `hidden-xl-only` - oculto en viewports extra grandes solamente -### Row Attributes -| Attribute | Description | Type | Accepted Values | Default | +### Atributos Row + +| Atributos | Descripción | Tipo | Valores aceptados | Valor por defecto | |---------- |-------------- |---------- |-------------------------------- |-------- | -| gutter | grid spacing | number | — | 0 | -| type | layout mode, you can use flex, works in modern browsers | string | — | — | -| justify | horizontal alignment of flex layout | string | start/end/center/space-around/space-between | start | -| align | vertical alignment of flex layout | string | top/middle/bottom | top | -| tag | custom element tag | string | * | div | +| gutter | espaciado de la grilla | number | — | 0 | +| type | modo del layout , puedes usar flex, funciona en navegadores modernos| string | — | — | +| justify | alineación horizontal del layout flex | string | start/end/center/space-around/space-between | start | +| align | alineación vertical del layout flex | string | top/middle/bottom | top | +| tag | tag de elemento propio | string | * | div | -### Col Attributes -| Attribute | Description | Type | Accepted Values | Default | +### Atributos Col + +| Atributos | Descripción | Tipo | Valores aceptados | Valor por defecto | |---------- |-------------- |---------- |-------------------------------- |-------- | -| span | number of column the grid spans | number | — | 24 | -| offset | number of spacing on the left side of the grid | number | — | 0 | -| push | number of columns that grid moves to the right | number | — | 0 | -| pull | number of columns that grid moves to the left | number | — | 0 | -| xs | `<768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — | -| sm | `≥768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — | -| md | `≥992px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — | -| lg | `≥1200px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — | -| xl | `≥1920px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — | -| tag | custom element tag | string | * | div | +| span | número de columnas que abarca la cuadrícula | number | — | 24 | +| offset | especific espacio en el lado izquierdo de la grill | number | — | 0 | +| push | número de columnas que la grilla se mueve hacia la derecha | number | — | 0 | +| pull | número de columnas que la grilla se mueve hacia la izquierda | number | — | 0 | +| xs | `<768px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — | +| sm | `≥768px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — | +| md | `≥992px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — | +| lg | `≥1200px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — | +| xl | `≥1920px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — | +| tag | tag de elemento propio | string | * | div | diff --git a/examples/docs/es/loading.md b/examples/docs/es/loading.md index 7fc3d8539..7ffb01311 100644 --- a/examples/docs/es/loading.md +++ b/examples/docs/es/loading.md @@ -49,15 +49,15 @@ } -## Loading +## Cargando -Show animation while loading data. +Se muestra la animación mientras se cargan los datos. -### Loading inside a container +### Cargando dentro de un contenedor -Displays animation in a container (such as a table) while loading data. +Muestra una animación en un contenedor (como en una tabla) mientras se cargan los datos. -:::demo Element provides two ways to invoke Loading: directive and service. For the custom directive `v-loading`, you just need to bind a `boolean` value to it. By default, the loading mask will append to the element where the directive is used. Adding the `body` modifier makes the mask append to the body element. +:::demo Element provee dos maneras para invocar el componente de Cargando: por directiva y por servicio. Para la directiva personalizada `v-loading`, solo necesitas enlazarlo a un valor `Boolean`. Por defecto, la máscara de carga se agregará al elemento donde se usa la directiva. Al agregar el modificador `body`, la máscara se agrega al elemento body. ```html @@ -113,11 +113,11 @@ Displays animation in a container (such as a table) while loading data. ``` ::: -### Customization +### Personalización -You can customize loading text, loading spinner and background color. +Puedes personalizar el texto de carga, spinner de carga y color de fondo. -:::demo Add attribute `element-loading-text` to the element on which `v-loading` is bound, and its value will be displayed under the spinner. Similarly, `element-loading-spinner` and `element-loading-background` are for customizing loading spinner class name and background color. +:::demo Agrega el atributo `element-loading-text` al elemento en el que `v-loading` está vinculado, y su valor se mostrará debajo del spinner. Del mismo modo, `element-loading-spinner` y `element-loading-background` son para personalizar el nombre de la clase del spinner y el color de fondo. ```html @@ -169,11 +169,11 @@ You can customize loading text, loading spinner and background color. ``` ::: -### Full screen loading +### Cargando a pantalla completa -Show a full screen animation while loading data. +Muestra una animación de pantalla completa mientras se cargan los datos -:::demo When used as a directive, a full screen Loading requires the `fullscreen` modifier, and it will be appended to body. In this case, if you wish to disable scrolling on body, you can add another modifier `lock`. When used as a service, Loading will be full screen by default. +:::demo Cuando se utiliza como una directiva, la carga a pantalla completa requiere el modificador `fullscreen`, y este puede ser agregado al `body`. En este caso, si deseas deshabilitas el desplazamiento en `body`, puedes agregar otro modificador `lock`. Cuando se utiliza como un servicio, el componente puede ser mostrado a pantalla completa por defecto. ```html @@ -221,38 +221,40 @@ Show a full screen animation while loading data. ``` ::: -### Service -You can also invoke Loading with a service. Import Loading service: +### Servicio + +Puedes invocar el componente con un servicio. Importa el servicio: + ```javascript import { Loading } from 'element-ui'; ``` -Invoke it: +Invocar: ```javascript Loading.service(options); ``` -The parameter `options` is the configuration of Loading, and its details can be found in the following table. `LoadingService` returns a Loading instance, and you can close it by invoking its `close` method: +El parámetro `options` es la configuración del componente, y estos detalles pueden ser encontrados en la siguiente table. `LoadingService` devuelve una instancia del componente, y tú puedes cerrarlo invocando el método `close`: ```javascript let loadingInstance = Loading.service(options); loadingInstance.close(); ``` -Note that in this case the full screen Loading is singleton. If a new full screen Loading is invoked before an existing one is closed, the existing full screen Loading instance will be returned instead of actually creating another Loading instance: +Tenga en cuenta que, en este caso, el componente a pantalla completa es una instancia única. Si un nuevo componente de pantalla completa es invocado antes de que se cierre la existente, se devolverá la instancia existente en lugar de crear la otra instancia: ```javascript let loadingInstance1 = Loading.service({ fullscreen: true }); let loadingInstance2 = Loading.service({ fullscreen: true }); console.log(loadingInstance1 === loadingInstance2); // true ``` -Calling the `close` method on any one of them can close this full screen Loading. +Llamar al método `close` en cualquiera de estas puede cerrarlo. -If Element is imported entirely, a globally method `$loading` will be registered to Vue.prototype. You can invoke it like this: `this.$loading(options)`, and it also returns a Loading instance. +Si Element es importado completamente, un método global `$loading` puede ser registrado a Vue.prototype. Puedes invocarlo como esto: `this.$loading(options)`, y también devuelve una instancia del componente. ### Options -| Attribute | Description | Type | Accepted Values | Default | +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | |---------- |-------------- |---------- |-------------------------------- |-------- | -| target | the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to `document.querySelector` to get the corresponding DOM node | object/string | — | document.body | -| body | same as the `body` modifier of `v-loading` | boolean | — | false | -| fullscreen | same as the `fullscreen` modifier of `v-loading` | boolean | — | true | -| lock | same as the `lock` modifier of `v-loading` | boolean | — | false | -| text | loading text that displays under the spinner | string | — | — | -| spinner | class name of the custom spinner | string | — | — | -| background | background color of the mask | string | — | — | -| customClass | custom class name for Loading | string | — | — | \ No newline at end of file +| target | el nodo del DOM que el componente debe cubrir. Acepta un objecto DOM o una cadena. Si está es una cadena, este será pasado a `document.querySelector` para obtener el correspondiente nodo del DOM | object/string | — | document.body | +| body | igual que el modificador `body` de `v-loading` | boolean | — | false | +| fullscreen | igual que el modificador `fullscreen` de `v-loading` | boolean | — | true | +| lock | igual que el modificador `lock` de `v-loading` | boolean | — | false | +| text | texto de cargando que se muestra debajo del spinner | string | — | — | +| spinner | nombre de clase del spinner personalizado | string | — | — | +| background | color de fondo de la máscara | string | — | — | +| customClass | nombre de clase personalizada para el componente | string | — | — | \ No newline at end of file diff --git a/examples/docs/es/menu.md b/examples/docs/es/menu.md index 7768a2e56..e9891f51e 100644 --- a/examples/docs/es/menu.md +++ b/examples/docs/es/menu.md @@ -53,13 +53,14 @@ ## NavMenu -Menu that provides navigation for your website. +Menú que provee la navegación para tu sitio. ### Top bar -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. ```html Processing Center @@ -110,9 +111,10 @@ Top bar NavMenu can be used in a variety of scenarios. ### 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 @@ -205,9 +207,9 @@ Vertical NavMenu with sub-menus. ### Collapse -Vertical NavMenu could be collapsed. +NavMenu vertical puede ser colapsado. -::: demo +:::**Demo** ```html expand @@ -269,50 +271,50 @@ Vertical NavMenu could be collapsed. ``` ::: -### Menu Attribute -| Attribute | Description | Type | Accepted Values | Default | +### Atributos Menu +| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto | |---------- |-------- |---------- |------------- |-------- | -| mode | menu display mode | string | horizontal / vertical | vertical | -| collapse | whether the menu is collapsed (available only in vertical mode) | boolean | — | false | -| background-color | background color of Menu (hex format) | string | — | #ffffff | -| text-color | text color of Menu (hex format) | string | — | #2d2f33 | -| active-text-color | text color of currently active menu item (hex format) | string | — | #409EFF | -| default-active | index of currently active menu | string | — | — | -| default-openeds | array that contains keys of currently active sub-menus | Array | — | — | +| mode | modo de presentación del menú | string | horizontal / vertical | vertical | +| collapse | si el menú está colapsado (solo en modo vertical) | boolean | — | false | +| background-color | color de fondo del menú (formato hexadecimal) | string | — | #ffffff | +| text-color | color de texto del menú (formato hexadecimal) | string | — | #2d2f33 | +| active-text-color | color de text del menu-item activo (formato hexadecimal) | string | — | #409EFF | +| default-active | índice del menu-item activo | string | — | — | +| default-openeds | arreglo que contiene las llaves del sub-menus activo | Array | — | — | | unique-opened | whether only one sub-menu can be active | boolean | — | false | -| menu-trigger | how sub-menus are triggered, only works when `mode` is 'horizontal' | string | — | hover | -| router | whether `vue-router` mode is activated. If true, index will be used as 'path' to activate the route action | boolean | — | false | +| menu-trigger | como dispara eventos sub-menus, solo funciona cuando `mode` es 'horizontal' | string | — | hover | +| router | si el modo `vue-router` está activado. Si es verdader, índice será usado como 'path' para activar la ruta | boolean | — | false | -### Menu Methods -| Event Name | Description | Parameters | +### Métodos Menu +| Nombre de evento | Descripción | Parámetros | |---------- |-------- |---------- | -| open | open a specific sub-menu | index: index of the sub-menu to open | -| close | close a specific sub-menu | index: index of the sub-menu to close | +| open | abre un sub-menu específico | index: índice del sub-menu para abrir | +| close | cierra un sub-menu específico | index: índice del sub-menu para cerrar | -### Menu Events -| Event Name | Description | Parameters | +### Eventos Menu +| Nombre de evento | Descripción | Parámetros | |---------- |-------- |---------- | -| select | callback function when menu is activated | index: index of activated menu, indexPath: index path of activated menu | -| open | callback function when sub-menu expands | index: index of expanded sub-menu, indexPath: index path of expanded sub-menu | -| close | callback function when sub-menu collapses | index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu | +| select | callback ejecutado cuando el menú es activado | index: índice del menú activado, indexPath: index path del menú activado | +| open | callback ejecutado cuando sub-menu se expande | index: índice del sub-menu expandido, indexPath: index path del sub-menu expandido | +| close | callback ejecutado cuando sub-menu colapsa | index: índice del sub-menu colapsado, indexPath: index path del menú colapsado | -### Menu-Item Events -| Event Name | Description | Parameters | +### Eventos Menu-Item +| Nombre de evento | Descripción | Parámetros | |---------- |-------- |---------- | -| click | callback function when menu-item is clicked | el: menu-item instance | +| click | callback ejecutado cuando se hace click sobre menu-item | el: instancia de menu-item | -### SubMenu Attribute -| Attribute | Description | Type | Accepted Values | Default | +### Atributos SubMenu +| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto | |---------- |-------- |---------- |------------- |-------- | -| index | unique identification | string | — | — | +| index | identificador único | string | — | — | -### Menu-Item Attribute -| Attribute | Description | Type | Accepted Values | Default | +### Atributos Menu-Item +| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto | |---------- |-------- |---------- |------------- |-------- | -| index | unique identification | string | — | — | -| route | Vue Router object | object | — | — | +| index | identificador único | string | — | — | +| route | Object Vue Router | object | — | — | -### Menu-Group Attribute -| Attribute | Description | Type | Accepted Values | Default | +### Atributos Menu-Group +| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto | |---------- |-------- |---------- |------------- |-------- | -| title | group title | string | — | — | +| title | título del grupo | string | — | — | diff --git a/examples/docs/es/message-box.md b/examples/docs/es/message-box.md index 6b3aeca0d..82565c4e2 100644 --- a/examples/docs/es/message-box.md +++ b/examples/docs/es/message-box.md @@ -123,16 +123,16 @@ ## MessageBox -A set of modal boxes simulating system message box, mainly for alerting information, confirm operations and prompting messages. +Un conjunto de cajas modales simulando un sistema de message box, principalmente para alertar informacion, confirmar operaciones y mostrar mensajes de aviso. :::tip -By design MessageBox provides simulations of system's `alert`, `confirm` and `prompt`，so it's content should be simple. For more complicated contents, please use Dialog. +Por diseño los message box nos proveen de simulaciones de sistemas como los componentes `alert`, `confirm` y `prompt`，entonces su contenido debería ser simple. para contenido mas complejo, por favor utilize el componente Dialog. ::: ### Alert -Alert interrupts user operation until the user confirms. +Alert interrumpe las operaciones realizadas hasta que el usuario confirme la alerta. -:::demo Open an alert by calling the `$alert` method. It simulates the system's `alert`, and cannot be closed by pressing ESC or clicking outside the box. In this example, two parameters `message` and `title` are received. It is worth mentioning that when the box is closed, it returns a `Promise` object for further processing. If you are not sure if your target browsers support `Promise`, you should import a third party polyfill or use callbacks instead like this example. +:::demo Desplegar una alerta utilizando el metodo `$alert`. Simula el sistema `alert`, y no puede ser cerrado al presionar la tecla ESC o al dar click fuera de la caja. En este ejemplo, dos parametros son recibidos `message` y `title`. Vale la pena mencionar que cuando la caja es cerrada, regresa un objeto `Promise` para su procesaimiento posteriormente. Si no estas seguro si el navegador soporta `Promise`, deberias importar una libreria de terceros de polyfill o utilizar callbacks. ```html