github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Chore: configure es docs

pull/8784/head
Leopoldthecoder 2017-12-12 12:45:09 +08:00 committed by 杨奕
parent 53fa204128
commit dca4b7afd2
77 changed files with 607 additions and 530 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
CHANGELOG.es-SP.md → CHANGELOG.es.md
View File

14
README.md
View File

@ -79,7 +79,7 @@ We have collected some [frequently asked questions](https://github.com/ElemeFE/e
Please make sure to read the contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md)) before making a pull request. Please make sure to read the contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md)) before making a pull request.
## Special Thanks ## Special Thanks
English documentation is brought to you by SwiftGG Translation Team. Our special thanks go to these fellows: English documentation is brought to you by SwiftGG Translation Team:
- [raychenfj](https://github.com/raychenfj) - [raychenfj](https://github.com/raychenfj)
- [kevin](http://thekevin.cn/) - [kevin](http://thekevin.cn/)
- [曾小涛](https://github.com/zengxiaotao) - [曾小涛](https://github.com/zengxiaotao)
@ -91,6 +91,18 @@ English documentation is brought to you by SwiftGG Translation Team. Our special
- [Changing](https://github.com/sunzhuo11) - [Changing](https://github.com/sunzhuo11)
- [mmoaay](https://github.com/mmoaay) - [mmoaay](https://github.com/mmoaay)
Spanish documentation is made possible by these community developers:
- [adavie1](https://github.com/adavie1)
- [carmencitaqiu](https://github.com/carmencitaqiu)
- [coderdiaz](https://github.com/coderdiaz)
- [fedegar33](https://github.com/fedegar33)
- [Gonzalo2310](https://github.com/Gonzalo2310)
- [lesterbx](https://github.com/lesterbx)
- [ProgramerGuy](https://github.com/ProgramerGuy)
- [SantiagoGdaR](https://github.com/SantiagoGdaR)
- [sigfriedCub1990](https://github.com/sigfriedCub1990)
- [thechosenjuan](https://github.com/thechosenjuan)
## Donation ## Donation
If you find Element useful, you can buy us a cup of coffee If you find Element useful, you can buy us a cup of coffee
<img width="650" src="http://fuss10.elemecdn.com/2/d0/ab1b8e5a1d96bcdcd6092ce0c66ecjpeg.jpeg?t=2017" alt=""> <img width="650" src="http://fuss10.elemecdn.com/2/d0/ab1b8e5a1d96bcdcd6092ce0c66ecjpeg.jpeg?t=2017" alt="">

9
build/bin/gen-indices.js
View File

@ -7,9 +7,14 @@ const slugify = require('transliteration').slugify;
const key = require('./algolia-key'); const key = require('./algolia-key');
const client = algoliasearch('9NLTR1QH8B', key); const client = algoliasearch('9NLTR1QH8B', key);
const langs = {
'zh-CN': 'element-zh',
'en-US': 'element-en',
'es': 'element-es'
};
['zh-CN', 'en-US'].forEach(lang => { ['zh-CN', 'en-US', 'es'].forEach(lang => {
const indexName = lang === 'zh-CN' ? 'element-zh' : 'element-en'; const indexName = langs[lang];
const index = client.initIndex(indexName); const index = client.initIndex(indexName);
index.clearIndex(err => { index.clearIndex(err => {
if (err) return; if (err) return;

33
examples/app.vue
View File

@ -249,30 +249,25 @@
this.suggestJump(); this.suggestJump();
} }
setTimeout(() => { setTimeout(() => {
const notified = localStorage.getItem('ES_NOTIFIED'); const notified = localStorage.getItem('ES_NOTIFIED_2');
if (!notified && this.lang !== 'zh-CN') { if (!notified && this.lang !== 'es') {
const h = this.$createElement;
const title = this.lang === 'zh-CN' const title = this.lang === 'zh-CN'
? '帮助我们完成西班牙语文档' ? '西班牙语文档正式上线'
: 'Help us with Spanish docs'; : 'Spanish docs now available';
const messages = this.lang === 'zh-CN' const message = this.lang === 'zh-CN'
? ['点击', '这里', '查看详情'] ? '点击这里进行切换'
: ['Click ', 'here', ' to learn more']; : 'Click here to switch';
const self = this;
this.$notify({ this.$notify({
title, title,
duration: 0, duration: 0,
message: h('span', [ message,
messages[0], onClick() {
h('a', { self.$router.push('/es');
attrs: { localStorage.setItem('ES_NOTIFIED_2', 1);
target: '_blank', },
href: 'https://github.com/ElemeFE/element/issues/8074'
}
}, messages[1]),
messages[2]
]),
onClose() { onClose() {
localStorage.setItem('ES_NOTIFIED', 1); localStorage.setItem('ES_NOTIFIED_2', 1);
} }
}); });
} }

84
examples/components/header.vue
View File

@ -223,17 +223,37 @@
.container { .container {
padding: 0 12px; padding: 0 12px;
} }
.nav-item a, .nav-item {
.nav-lang { a {
font-size: 12px; font-size: 12px;
vertical-align: top; vertical-align: top;
} }
&.lang-item {
height: 100%;
.nav-lang {
display: flex;
align-items: center;
span {
padding-bottom: 0;
}
}
}
}
.nav-dropdown { .nav-dropdown {
padding: 0; padding: 0;
span {
font-size: 12px;
}
} }
.nav-gap { .nav-gap {
padding: 0 8px; padding: 0 8px;
} }
.nav-versions {
display: none;
}
} }
} }
</style> </style>
@ -287,19 +307,19 @@
</li> </li>
<!-- 版本选择器 --> <!-- 版本选择器 -->
<li class="nav-item" v-show="isComponentPage"> <li class="nav-item nav-versions" v-show="isComponentPage">
<el-dropdown <el-dropdown
trigger="click" trigger="click"
class="nav-dropdown" class="nav-dropdown"
:class="{ 'is-active': dropdownVisible }"> :class="{ 'is-active': verDropdownVisible }">
<span> <span>
{{ langConfig.dropdown }}{{ version }} {{ version }}
<i class="el-icon-arrow-down el-icon--right"></i> <i class="el-icon-arrow-down el-icon--right"></i>
</span> </span>
<el-dropdown-menu <el-dropdown-menu
slot="dropdown" slot="dropdown"
class="nav-dropdown-list" class="nav-dropdown-list"
@input="handleDropdownToggle"> @input="handleVerDropdownToggle">
<el-dropdown-item <el-dropdown-item
v-for="item in Object.keys(versions)" v-for="item in Object.keys(versions)"
:key="item" :key="item"
@ -310,21 +330,28 @@
</el-dropdown> </el-dropdown>
</li> </li>
<!-- lang --> <!-- 语言选择器 -->
<li class="nav-item lang-item"> <li class="nav-item lang-item">
<span <el-dropdown
class="nav-lang" trigger="click"
:class="{ 'active': lang === 'zh-CN' }" class="nav-dropdown nav-lang"
@click="switchLang('zh-CN')"> :class="{ 'is-active': langDropdownVisible }">
中文 <span>
</span> {{ displayedLang }}
<span class="nav-lang-spe"> / </span> <i class="el-icon-arrow-down el-icon--right"></i>
<span
class="nav-lang"
:class="{ 'active': lang === 'en-US' }"
@click="switchLang('en-US')">
En
</span> </span>
<el-dropdown-menu
slot="dropdown"
class="nav-dropdown-list"
@input="handleLangDropdownToggle">
<el-dropdown-item
v-for="(value, key) in langs"
:key="key"
@click.native="switchLang(key)">
{{ value }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</li> </li>
<!--theme picker--> <!--theme picker-->
@ -348,7 +375,13 @@
active: '', active: '',
versions: [], versions: [],
version, version,
dropdownVisible: true verDropdownVisible: true,
langDropdownVisible: true,
langs: {
'zh-CN': '中文',
'en-US': 'English',
'es': 'Español'
}
}; };
}, },
@ -361,6 +394,9 @@
lang() { lang() {
return this.$route.path.split('/')[1] || 'zh-CN'; return this.$route.path.split('/')[1] || 'zh-CN';
}, },
displayedLang() {
return this.langs[this.lang] || '中文';
},
langConfig() { langConfig() {
return compoLang.filter(config => config.lang === this.lang)[0]['header']; return compoLang.filter(config => config.lang === this.lang)[0]['header'];
}, },
@ -381,8 +417,12 @@
this.$router.push(this.$route.path.replace(this.lang, targetLang)); this.$router.push(this.$route.path.replace(this.lang, targetLang));
}, },
handleDropdownToggle(visible) { handleVerDropdownToggle(visible) {
this.dropdownVisible = visible; this.verDropdownVisible = visible;
},
handleLangDropdownToggle(visible) {
this.langDropdownVisible = visible;
} }
}, },

31
examples/components/search.vue
View File

@ -46,7 +46,7 @@
.el-autocomplete-suggestion__list { .el-autocomplete-suggestion__list {
position: static !important; position: static !important;
padding-bottom: 31px; padding-bottom: 28px;
} }
li { li {
@ -87,14 +87,14 @@
left: 0; left: 0;
width: 100%; width: 100%;
padding-right: 20px; padding-right: 20px;
background-color: #dfe4ed; background-color: #e4e7ed;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
text-align: right; text-align: right;
&:hover { &:hover {
background-color: #dfe4ed; background-color: #e4e7ed;
} }
img { img {
@ -120,7 +120,24 @@
return { return {
index: null, index: null,
query: '', query: '',
isEmpty: false isEmpty: false,
langs: {
'zh-CN': {
search: '搜索文档',
empty: '无匹配结果',
index: 'zh'
},
'en-US': {
search: 'Search',
empty: 'No results',
index: 'en'
},
'es': {
search: 'Buscar',
empty: 'No hay datos que coincidan',
index: 'es'
}
}
}; };
}, },
@ -130,11 +147,11 @@
}, },
placeholder() { placeholder() {
return this.lang === 'zh-CN' ? '搜索文档' : 'Search'; return this.lang ? this.langs[this.lang].search : '';
}, },
emptyText() { emptyText() {
return this.lang === 'zh-CN' ? '无匹配结果' : 'No results'; return this.lang ? this.langs[this.lang].empty : '';
} }
}, },
@ -147,7 +164,7 @@
methods: { methods: {
initIndex() { initIndex() {
const client = algoliasearch('9NLTR1QH8B', 'a75cbec97cda75ab7334fed9219ecc57'); const client = algoliasearch('9NLTR1QH8B', 'a75cbec97cda75ab7334fed9219ecc57');
this.index = client.initIndex(`element-${ this.lang === 'zh-CN' ? 'zh' : 'en' }`); this.index = client.initIndex(`element-${ this.lang ? this.langs[this.lang].index : 'zh' }`);
}, },
querySearch(query, cb) { querySearch(query, cb) {

42
examples/docs/en-US/color.md
View File

@ -38,37 +38,37 @@
background-color: #ff4949; background-color: #ff4949;
} }
.bg-info { .bg-info {
background-color: #878D99; background-color: #909399;
} }
.bg-text-primary { .bg-text-primary {
background-color: #2d2f33; background-color: #303133;
} }
.bg-text-regular { .bg-text-regular {
background-color: #5a5e66; background-color: #303133;
} }
.bg-text-secondary { .bg-text-secondary {
background-color: #878d99; background-color: #909399;
} }
.bg-text-placeholder { .bg-text-placeholder {
background-color: #b4bccc; background-color: #c0c4cc;
} }
.bg-border-base { .bg-border-base {
background-color: #d8dce5; background-color: #dcdfe6;
} }
.bg-border-light { .bg-border-light {
background-color: #dfe4ed; background-color: #e4e7ed;
} }
.bg-border-lighter { .bg-border-lighter {
background-color: #e6ebf5; background-color: #ebeef5;
} }
.bg-border-extra-light { .bg-border-extra-light {
background-color: #edf2fc; background-color: #f2f6fc;
} }
[class*=" bg-border-"] { [class*=" bg-border-"] {
color: #5a5e66; color: #303133;
} }
</style> </style>
@ -94,13 +94,13 @@ Besides the main color, you need to use different scene colors in different scen
<div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div> <div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="demo-color-box bg-warning">Warning<div class="value">#EB9E05</div></div> <div class="demo-color-box bg-warning">Warning<div class="value">#E6A23C</div></div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="demo-color-box bg-danger">Danger<div class="value">#FA5555</div></div> <div class="demo-color-box bg-danger">Danger<div class="value">#F56C6C</div></div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="demo-color-box bg-info">Info<div class="value">#878D99</div></div> <div class="demo-color-box bg-info">Info<div class="value">#909399</div></div>
</el-col> </el-col>
</el-row> </el-row>
@ -111,18 +111,18 @@ Neutral colors are for text, background and border colors. You can use different
<el-row :gutter="12"> <el-row :gutter="12">
<el-col :span="6"> <el-col :span="6">
<div class="demo-color-box-group"> <div class="demo-color-box-group">
<div class="demo-color-box bg-text-primary">Primary Text<div class="value">#2D2F33</div></div> <div class="demo-color-box bg-text-primary">Primary Text<div class="value">#303133</div></div>
<div class="demo-color-box bg-text-regular">Regular Text<div class="value">#5A5E66</div></div> <div class="demo-color-box bg-text-regular">Regular Text<div class="value">#303133</div></div>
<div class="demo-color-box bg-text-secondary">Secondary Text<div class="value">#878D99</div></div> <div class="demo-color-box bg-text-secondary">Secondary Text<div class="value">#909399</div></div>
<div class="demo-color-box bg-text-placeholder">Placeholder Text<div class="value">#B4BCCC</div></div> <div class="demo-color-box bg-text-placeholder">Placeholder Text<div class="value">#C0C4CC</div></div>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="demo-color-box-group"> <div class="demo-color-box-group">
<div class="demo-color-box bg-border-base">Base Border<div class="value">#D8DCE5</div></div> <div class="demo-color-box bg-border-base">Base Border<div class="value">#DCDFE6</div></div>
<div class="demo-color-box bg-border-light">Light Border<div class="value">#DFE4ED</div></div> <div class="demo-color-box bg-border-light">Light Border<div class="value">#E4E7ED</div></div>
<div class="demo-color-box bg-border-lighter">Lighter Border<div class="value">#E6EBF5</div></div> <div class="demo-color-box bg-border-lighter">Lighter Border<div class="value">#EBEEF5</div></div>
<div class="demo-color-box bg-border-extra-light">Extra Light Border<div class="value">#EDF2FC</div></div> <div class="demo-color-box bg-border-extra-light">Extra Light Border<div class="value">#F2F6FC</div></div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>

6
examples/docs/en-US/custom-theme.md
View File

@ -73,9 +73,9 @@ $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */ $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
$--color-success: #67c23a !default; $--color-success: #67c23a !default;
$--color-warning: #eb9e05 !default; $--color-warning: #e6a23c !default;
$--color-danger: #fa5555 !default; $--color-danger: #f56c6c !default;
$--color-info: #878d99 !default; $--color-info: #909399 !default;
... ...
``` ```

2
examples/docs/en-US/form.md
View File

@ -231,6 +231,8 @@
} }
} }
.demo-dynamic { .demo-dynamic {
width: 500px;
.el-input { .el-input {
margin-right: 10px; margin-right: 10px;
width: 270px; width: 270px;

2
examples/docs/en-US/i18n.md
View File

@ -208,6 +208,8 @@ Currently Element ships with the following languages:
<li>Arabic (ar)</li> <li>Arabic (ar)</li>
<li>Hebrew (he)</li> <li>Hebrew (he)</li>
<li>Lithuanian (lt)</li> <li>Lithuanian (lt)</li>
<li>Kazakh (kz)</li>
<li>Hungarian (hu)</li>
</ul> </ul>
If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/ElemeFE/element/tree/master/src/locale/lang) and create a pull request. If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/ElemeFE/element/tree/master/src/locale/lang) and create a pull request.

18
examples/docs/en-US/icon.md
View File

@ -12,7 +12,7 @@
<style> <style>
.demo-icon .source > i { .demo-icon .source > i {
color: #8492a6; color: #606266;
margin: 0 20px; margin: 0 20px;
font-size: 1.5em; font-size: 1.5em;
vertical-align: middle; vertical-align: middle;
@ -46,18 +46,24 @@
@utils-vertical-center; @utils-vertical-center;
& span { span {
display: inline-block; display: inline-block;
line-height: normal; line-height: normal;
vertical-align: middle; vertical-align: middle;
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif; font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
color: #99a9bf; color: #99a9bf;
} }
& i { i {
display: block; display: block;
font-size: 24px; font-size: 32px;
margin-bottom: 15px; margin-bottom: 15px;
color: #8492a6; color: #606266;
}
.icon-name {
display: inline-block;
padding: 0 3px;
height: 1em;
color: #606266;
} }
&:hover { &:hover {
color: rgb(92, 182, 255); color: rgb(92, 182, 255);
@ -90,7 +96,7 @@ Just assign the class name to `el-icon-iconName`.
<li v-for="name in icons" :key="name"> <li v-for="name in icons" :key="name">
<span> <span>
<i :class="'el-icon-' + name"></i> <i :class="'el-icon-' + name"></i>
{{'el-icon-' + name}} <span class="icon-name">{{'el-icon-' + name}}</span>
</span> </span>
</li> </li>
</ul> </ul>

2
examples/docs/en-US/menu.md
View File

@ -275,7 +275,7 @@ Vertical NavMenu could be collapsed.
| mode | menu display mode | string | horizontal / vertical | vertical | | mode | menu display mode | string | horizontal / vertical | vertical |
| collapse | whether the menu is collapsed (available only in vertical mode) | boolean | — | false | | collapse | whether the menu is collapsed (available only in vertical mode) | boolean | — | false |
| background-color | background color of Menu (hex format) | string | — | #ffffff | | background-color | background color of Menu (hex format) | string | — | #ffffff |
| text-color | text color of Menu (hex format) | string | — | #2d2f33 | | text-color | text color of Menu (hex format) | string | — | #303133 |
| active-text-color | text color of currently active menu item (hex format) | string | — | #409EFF | | active-text-color | text color of currently active menu item (hex format) | string | — | #409EFF |
| default-active | index of currently active menu | string | — | — | | default-active | index of currently active menu | string | — | — |
| default-openeds | array that contains keys of currently active sub-menus | Array | — | — | | default-openeds | array that contains keys of currently active sub-menus | Array | — | — |

42
examples/docs/es/color.md
View File

@ -38,37 +38,37 @@
background-color: #ff4949; background-color: #ff4949;
} }
.bg-info { .bg-info {
background-color: #878D99; background-color: #909399;
} }
.bg-text-primary { .bg-text-primary {
background-color: #2d2f33; background-color: #303133;
} }
.bg-text-regular { .bg-text-regular {
background-color: #5a5e66; background-color: #303133;
} }
.bg-text-secondary { .bg-text-secondary {
background-color: #878d99; background-color: #909399;
} }
.bg-text-placeholder { .bg-text-placeholder {
background-color: #b4bccc; background-color: #c0c4cc;
} }
.bg-border-base { .bg-border-base {
background-color: #d8dce5; background-color: #dcdfe6;
} }
.bg-border-light { .bg-border-light {
background-color: #dfe4ed; background-color: #e4e7ed;
} }
.bg-border-lighter { .bg-border-lighter {
background-color: #e6ebf5; background-color: #ebeef5;
} }
.bg-border-extra-light { .bg-border-extra-light {
background-color: #edf2fc; background-color: #f2f6fc;
} }
[class*=" bg-border-"] { [class*=" bg-border-"] {
color: #5a5e66; color: #303133;
} }
</style> </style>
@ -94,13 +94,13 @@ Además del color principal, se necesitan utilizar distintos colores para difere
<div class="demo-color-box bg-success">Éxito<div class="value">#67C23A</div></div> <div class="demo-color-box bg-success">Éxito<div class="value">#67C23A</div></div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="demo-color-box bg-warning">Precaución<div class="value">#EB9E05</div></div> <div class="demo-color-box bg-warning">Precaución<div class="value">#E6A23C</div></div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="demo-color-box bg-danger">Peligro<div class="value">#FA5555</div></div> <div class="demo-color-box bg-danger">Peligro<div class="value">#F56C6C</div></div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="demo-color-box bg-info">Info<div class="value">#878D99</div></div> <div class="demo-color-box bg-info">Info<div class="value">#909399</div></div>
</el-col> </el-col>
</el-row> </el-row>
@ -111,18 +111,18 @@ Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes col
<el-row :gutter="12"> <el-row :gutter="12">
<el-col :span="6"> <el-col :span="6">
<div class="demo-color-box-group"> <div class="demo-color-box-group">
<div class="demo-color-box bg-text-primary">Texto primario<div class="value">#2D2F33</div></div> <div class="demo-color-box bg-text-primary">Texto primario<div class="value">#303133</div></div>
<div class="demo-color-box bg-text-regular">Texto regular<div class="value">#5A5E66</div></div> <div class="demo-color-box bg-text-regular">Texto regular<div class="value">#303133</div></div>
<div class="demo-color-box bg-text-secondary">Texto secundario<div class="value">#878D99</div></div> <div class="demo-color-box bg-text-secondary">Texto secundario<div class="value">#909399</div></div>
<div class="demo-color-box bg-text-placeholder">Texto de placeholder<div class="value">#B4BCCC</div></div> <div class="demo-color-box bg-text-placeholder">Texto de placeholder<div class="value">#C0C4CC</div></div>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="demo-color-box-group"> <div class="demo-color-box-group">
<div class="demo-color-box bg-border-base">Borde base<div class="value">#D8DCE5</div></div> <div class="demo-color-box bg-border-base">Borde base<div class="value">#DCDFE6</div></div>
<div class="demo-color-box bg-border-light">Borde ligero<div class="value">#DFE4ED</div></div> <div class="demo-color-box bg-border-light">Borde ligero<div class="value">#E4E7ED</div></div>
<div class="demo-color-box bg-border-lighter">Borde claro<div class="value">#E6EBF5</div></div> <div class="demo-color-box bg-border-lighter">Borde claro<div class="value">#EBEEF5</div></div>
<div class="demo-color-box bg-border-extra-light">Borde extra claro<div class="value">#EDF2FC</div></div> <div class="demo-color-box bg-border-extra-light">Borde extra claro<div class="value">#F2F6FC</div></div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>

10
examples/docs/es/custom-theme.md
View File

@ -14,9 +14,9 @@ Este sitio, le permitirá obtener una vista previa del tema con un nuevo color e
$--color-primary: teal; $--color-primary: teal;
/* Ubicación de la fuente, obligatoria */ /* Ubicación de la fuente, obligatoria */
$--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts'; $--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "../node_modules/element-ui/packages/theme-chalk/src/index"; @import "~element-ui/packages/theme-chalk/src/index";
``` ```
Entonces, en el archivo principal del proyecto, importe este archivo de estilos en lugar de los estilos de Element: Entonces, en el archivo principal del proyecto, importe este archivo de estilos en lugar de los estilos de Element:
@ -73,9 +73,9 @@ $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */ $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
$--color-success: #67c23a !default; $--color-success: #67c23a !default;
$--color-warning: #eb9e05 !default; $--color-warning: #e6a23c !default;
$--color-danger: #fa5555 !default; $--color-danger: #f56c6c !default;
$--color-info: #878d99 !default; $--color-info: #909399 !default;
... ...
``` ```

2
examples/docs/es/dialog.md
View File

@ -243,8 +243,6 @@ Si un diálogo está anidado en otro diálogo, se requiere append-to-body.
``` ```
::: :::
:::
### Contenido centrado ### Contenido centrado
El contenido de Diálogo se puede centrar. El contenido de Diálogo se puede centrar.

4
examples/docs/es/form.md
View File

@ -169,7 +169,7 @@
</script> </script>
<style> <style>
.demo-form.demo-en-US { .demo-form.demo-es {
.el-select .el-input { .el-select .el-input {
width: 360px; width: 360px;
} }
@ -231,6 +231,8 @@
} }
} }
.demo-dynamic { .demo-dynamic {
width: 500px;
.el-input { .el-input {
margin-right: 10px; margin-right: 10px;
width: 270px; width: 270px;

3
examples/docs/es/i18n.md
View File

@ -207,6 +207,9 @@ Actualmente Element está disponible en los siguientes idiomas:
<li>Slovenian (sl)</li> <li>Slovenian (sl)</li>
<li>Arabic (ar)</li> <li>Arabic (ar)</li>
<li>Hebrew (he)</li> <li>Hebrew (he)</li>
<li>Lithuanian (lt)</li>
<li>Kazakh (kz)</li>
<li>Hungarian (hu)</li>
</ul> </ul>
Si su idioma de destino no está incluido, puede contribuir: simplemente añada [aqui](https://github.com/ElemeFE/element/tree/master/src/locale/lang) otra configuración de idioma y cree un pull request. Si su idioma de destino no está incluido, puede contribuir: simplemente añada [aqui](https://github.com/ElemeFE/element/tree/master/src/locale/lang) otra configuración de idioma y cree un pull request.

18
examples/docs/es/icon.md
View File

@ -12,7 +12,7 @@
<style> <style>
.demo-icon .source > i { .demo-icon .source > i {
color: #8492a6; color: #606266;
margin: 0 20px; margin: 0 20px;
font-size: 1.5em; font-size: 1.5em;
vertical-align: middle; vertical-align: middle;
@ -46,18 +46,24 @@
@utils-vertical-center; @utils-vertical-center;
& span { span {
display: inline-block; display: inline-block;
line-height: normal; line-height: normal;
vertical-align: middle; vertical-align: middle;
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif; font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
color: #99a9bf; color: #99a9bf;
} }
& i { i {
display: block; display: block;
font-size: 24px; font-size: 32px;
margin-bottom: 15px; margin-bottom: 15px;
color: #8492a6; color: #606266;
}
.icon-name {
display: inline-block;
padding: 0 3px;
height: 1em;
color: #606266;
} }
&:hover { &:hover {
color: rgb(92, 182, 255); color: rgb(92, 182, 255);
@ -90,7 +96,7 @@ Simplemente asigna el nombre de la clase a `el-icon-iconName`.
<li v-for="name in icons" :key="name"> <li v-for="name in icons" :key="name">
<span> <span>
<i :class="'el-icon-' + name"></i> <i :class="'el-icon-' + name"></i>
{{'el-icon-' + name}} <span class="icon-name">{{'el-icon-' + name}}</span>
</span> </span>
</li> </li>
</ul> </ul>

2
examples/docs/es/input.md
View File

@ -72,7 +72,7 @@
</script> </script>
<style> <style>
.demo-input.demo-en-US { .demo-input.demo-es {
.el-select .el-input { .el-select .el-input {
width: 130px; width: 130px;
} }

12
examples/docs/es/layout.md
View File

@ -37,7 +37,7 @@ Rápido y facilmente crea un layout básico con 24 columnas.
Crea un layout básico usando columnas. Crea un layout básico usando columnas.
:::**Demo** Con `row` y `col`, puede facilmente manipular el layout usando el atributo `span`. :::demo Con `row` y `col`, puede facilmente manipular el layout usando el atributo `span`.
```html ```html
<el-row> <el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
@ -101,7 +101,7 @@ Crea un layout básico usando columnas.
El espaciado de columnas está soportado. El espaciado de columnas está soportado.
:::**Demo** Row provee el atributo `gutter` para especificar el espacio entre columnas y su valor por defecto es 0. :::demo Row provee el atributo `gutter` para especificar el espacio entre columnas y su valor por defecto es 0.
```html ```html
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
@ -145,7 +145,7 @@ El espaciado de columnas está soportado.
Crea un complejo layout híbrido combinando el básico de 1/24 columnas. Crea un complejo layout híbrido combinando el básico de 1/24 columnas.
:::**Demo** :::demo
```html ```html
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col> <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
@ -198,7 +198,7 @@ Crea un complejo layout híbrido combinando el básico de 1/24 columnas.
Puedes especificar offsets para las columnas. Puedes especificar offsets para las columnas.
:::**Demo** Puedes especificar el offset para una columna mediante el atributo `offset` de 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">
@ -248,7 +248,7 @@ Puedes especificar offsets para las columnas.
Usa flex layout para un alineamiento flexible de columnas. Usa flex layout para un alineamiento flexible de columnas.
:::**Demo** Puede 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. :::demo Puede 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 ```html
<el-row type="flex" class="row-bg"> <el-row type="flex" class="row-bg">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
@ -311,7 +311,7 @@ Usa flex layout para un alineamiento flexible de columnas.
Tomando el ejemplo de Bootstrap responsive design, existen 5 breakpoints: xs, sm, md, lg y xl. Tomando el ejemplo de Bootstrap responsive design, existen 5 breakpoints: xs, sm, md, lg y xl.
:::**Demo** :::demo
```html ```html
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col> <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>

8
examples/docs/es/menu.md
View File

@ -59,7 +59,7 @@ Menú que provee la navegación para tu sitio.
Top bar NavMenu puede ser usado en distinto escenarios. Top bar NavMenu puede ser usado en distinto escenarios.
:::**Demo** Por defecto el menú es vertical, pero puede hacerlo horizontal asignando a la propiedad `mode` el valor 'horizontal'. Además, puede 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 Por defecto el menú es vertical, pero puede hacerlo horizontal asignando a la propiedad `mode` el valor 'horizontal'. Además, puede 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.
```html ```html
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
@ -113,7 +113,7 @@ Top bar NavMenu puede ser usado en distinto escenarios.
NavMenu vertical con sub-menús. NavMenu vertical con sub-menús.
:::**Demo** Puede 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 Puede 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`.
```html ```html
<el-row class="tac"> <el-row class="tac">
@ -209,7 +209,7 @@ NavMenu vertical con sub-menús.
NavMenu vertical puede ser colapsado. NavMenu vertical puede ser colapsado.
:::**Demo** :::demo
```html ```html
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;"> <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
<el-radio-button :label="false">expand</el-radio-button> <el-radio-button :label="false">expand</el-radio-button>
@ -277,7 +277,7 @@ NavMenu vertical puede ser colapsado.
| mode | modo de presentación del menú | string | horizontal / vertical | vertical | | mode | modo de presentación del menú | string | horizontal / vertical | vertical |
| collapse | si el menú está colapsado (solo en modo vertical) | boolean | — | false | | collapse | si el menú está colapsado (solo en modo vertical) | boolean | — | false |
| background-color | color de fondo del menú (formato hexadecimal) | string | — | #ffffff | | background-color | color de fondo del menú (formato hexadecimal) | string | — | #ffffff |
| text-color | color de texto del menú (formato hexadecimal) | string | — | #2d2f33 | | text-color | color de texto del menú (formato hexadecimal) | string | — | #303133 |
| active-text-color | color de text del menu-item activo (formato hexadecimal) | string | — | #409EFF | | active-text-color | color de text del menu-item activo (formato hexadecimal) | string | — | #409EFF |
| default-active | índice del menu-item activo | string | — | — | | default-active | índice del menu-item activo | string | — | — |
| default-openeds | arreglo que contiene las llaves del sub-menus activo | Array | — | — | | default-openeds | arreglo que contiene las llaves del sub-menus activo | Array | — | — |

6
examples/docs/es/pagination.md
View File

@ -53,7 +53,7 @@ Si tiene que mostrar muchos datos en una página, utilice la paginación.
### Uso básico ### Uso básico
:::**Demo** Asigne en el atributo `layout` los diferentes elementos que quiere utilizar separados por coma. Los elementos de paginación son: `prev` (un botón para navegar a la página anterior), `next` (un botón para navegar a la siguiente página), `pager` (lista de página), `jumper` (un `input` para saltar a una página determinada), `total` (total de elementos), `size` (un `select` para seleccionar el tamaño de la página ) y `->`(todo elemento situado luego de este símbolo será movido a la derecha). :::demo Asigne en el atributo `layout` los diferentes elementos que quiere utilizar separados por coma. Los elementos de paginación son: `prev` (un botón para navegar a la página anterior), `next` (un botón para navegar a la siguiente página), `pager` (lista de página), `jumper` (un `input` para saltar a una página determinada), `total` (total de elementos), `size` (un `select` para seleccionar el tamaño de la página ) y `->`(todo elemento situado luego de este símbolo será movido a la derecha).
```html ```html
<div class="block"> <div class="block">
<span class="demonstration">When you have few pages</span> <span class="demonstration">When you have few pages</span>
@ -76,7 +76,7 @@ Si tiene que mostrar muchos datos en una página, utilice la paginación.
Usa una paginación pequeña en caso de espacio limitado. Usa una paginación pequeña en caso de espacio limitado.
:::**Demo** Solo ponga el atributo `small` como `true` y la Paginación se volverá pequeña. :::demo Solo ponga el atributo `small` como `true` y la Paginación se volverá pequeña.
```html ```html
<el-pagination <el-pagination
small small
@ -90,7 +90,7 @@ Usa una paginación pequeña en caso de espacio limitado.
Agrega más modulos basados en su escenario. Agrega más modulos basados en su escenario.
:::**Demo** Este ejemplo es un completo caso de uso. Utiliza los eventos `size-change` y `current-change` para manejar el tamaño de página y el cambio de página. El atributo `page-sizes` acepta un arreglo de enteros, cada uno representa un diferente valor del atributo `sizes` que es un `select`, ejemplo `[100, 200, 300, 400]` indicará que el `select` tendrá las opciones: 100, 200, 300 o 400 elementos por página. :::demo Este ejemplo es un completo caso de uso. Utiliza los eventos `size-change` y `current-change` para manejar el tamaño de página y el cambio de página. El atributo `page-sizes` acepta un arreglo de enteros, cada uno representa un diferente valor del atributo `sizes` que es un `select`, ejemplo `[100, 200, 300, 400]` indicará que el `select` tendrá las opciones: 100, 200, 300 o 400 elementos por página.
```html ```html
<template> <template>

6
examples/docs/es/popover.md
View File

@ -103,7 +103,7 @@
Similar a un Tooltip, Popover está construido con `Vue-popper`. Así que para atributos duplicados, por favor refiérase a la documentación de Tooltip. Similar a un Tooltip, Popover está construido con `Vue-popper`. Así que para atributos duplicados, por favor refiérase a la documentación de Tooltip.
:::**Demo** Agrega `ref` al popover, luego en el botón usa la directiva `v-popover` para asociar el botón y el popover. El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click` o `focus`. De manera alternativa puede especificar la referencia utilizando un [slot con nombre](https://vuejs.org/v2/guide/components.html#Named-Slots). :::demo Agrega `ref` al popover, luego en el botón usa la directiva `v-popover` para asociar el botón y el popover. El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click` o `focus`. De manera alternativa puede especificar la referencia utilizando un [slot con nombre](https://vuejs.org/v2/guide/components.html#Named-Slots).
```html ```html
<el-popover <el-popover
@ -140,7 +140,7 @@ Similar a un Tooltip, Popover está construido con `Vue-popper`. Así que para a
### Información anidada ### Información anidada
Otros componentes pueden anidarse dentro de popover. A continuación un ejemplo de una tabla anidada. Otros componentes pueden anidarse dentro de popover. A continuación un ejemplo de una tabla anidada.
:::**Demo** Reemplaza el atributo `content` con un `slot`. :::demo Reemplaza el atributo `content` con un `slot`.
```html ```html
<el-popover <el-popover
@ -189,7 +189,7 @@ Otros componentes pueden anidarse dentro de popover. A continuación un ejemplo
Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `dialog`. Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `dialog`.
:::**Demo** :::demo
```html ```html
<el-popover <el-popover
ref="popover5" ref="popover5"

6
examples/docs/es/progress.md
View File

@ -14,7 +14,7 @@ Progreso es usado para mostrar el estado de la operación actual e informar al u
### Barra de progreso lineal (porcentage externo) ### Barra de progreso lineal (porcentage externo)
:::**Demo** Usa el atributo `percentage` para asignar el porcentage. Este es **requerido** y tiene que ser un valor entre `0-100`. :::demo Usa el atributo `percentage` para asignar el porcentage. Este es **requerido** y tiene que ser un valor entre `0-100`.
```html ```html
<el-progress :percentage="0"></el-progress> <el-progress :percentage="0"></el-progress>
<el-progress :percentage="70"></el-progress> <el-progress :percentage="70"></el-progress>
@ -26,7 +26,7 @@ Progreso es usado para mostrar el estado de la operación actual e informar al u
### Barra de progreso lineal (porcentage interno) ### Barra de progreso lineal (porcentage interno)
En este caso el porcentage no toma espacio adicional. En este caso el porcentage no toma espacio adicional.
:::**Demo** El atributo `stroke-width` decide el ancho de la barra de progreso, y usa el atributo `text-inside` para poner la descripción dentro de la misma. :::demo El atributo `stroke-width` decide el ancho de la barra de progreso, y usa el atributo `text-inside` para poner la descripción dentro de la misma.
```html ```html
<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress> <el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress> <el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
@ -37,7 +37,7 @@ En este caso el porcentage no toma espacio adicional.
### Barra de progreso circular ### Barra de progreso circular
:::**Demo** Puede asignar el atributo `type` como `circle` para usar la barra circular de progreso, y usar el atributo `width` para cambiar el tamaño del círculo. :::demo Puede asignar el atributo `type` como `circle` para usar la barra circular de progreso, y usar el atributo `width` para cambiar el tamaño del círculo.
```html ```html
<el-progress type="circle" :percentage="0"></el-progress> <el-progress type="circle" :percentage="0"></el-progress>
<el-progress type="circle" :percentage="25"></el-progress> <el-progress type="circle" :percentage="25"></el-progress>

2
examples/docs/es/tooltip.md
View File

@ -9,7 +9,7 @@
</script> </script>
<style> <style>
.demo-tooltip.demo-en-US { .demo-tooltip.demo-es {
&:first-of-type .source { &:first-of-type .source {
.el-button { .el-button {
width: 110px; width: 110px;

46
examples/docs/zh-CN/color.md
View File

@ -32,43 +32,43 @@
background-color: #67C23A; background-color: #67C23A;
} }
.bg-warning { .bg-warning {
background-color: #EB9E05; background-color: #E6A23C;
} }
.bg-danger { .bg-danger {
background-color: #FA5555; background-color: #F56C6C;
} }
.bg-info { .bg-info {
background-color: #878D99; background-color: #909399;
} }
.bg-text-primary { .bg-text-primary {
background-color: #2d2f33; background-color: #303133;
} }
.bg-text-regular { .bg-text-regular {
background-color: #5a5e66; background-color: #606266;
} }
.bg-text-secondary { .bg-text-secondary {
background-color: #878d99; background-color: #909399;
} }
.bg-text-placeholder { .bg-text-placeholder {
background-color: #b4bccc; background-color: #c0c4cc;
} }
.bg-border-base { .bg-border-base {
background-color: #d8dce5; background-color: #dcdfe6;
} }
.bg-border-light { .bg-border-light {
background-color: #dfe4ed; background-color: #e4e7ed;
} }
.bg-border-lighter { .bg-border-lighter {
background-color: #e6ebf5; background-color: #ebeef5;
} }
.bg-border-extra-light { .bg-border-extra-light {
background-color: #edf2fc; background-color: #f2f6fc;
} }
[class*=" bg-border-"] { [class*=" bg-border-"] {
color: #5a5e66; color: #303133;
} }
</style> </style>
@ -95,13 +95,13 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
<div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div> <div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="demo-color-box bg-warning">Warning<div class="value">#EB9E05</div></div> <div class="demo-color-box bg-warning">Warning<div class="value">#E6A23C</div></div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="demo-color-box bg-danger">Danger<div class="value">#FA5555</div></div> <div class="demo-color-box bg-danger">Danger<div class="value">#F56C6C</div></div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="demo-color-box bg-info">Info<div class="value">#878D99</div></div> <div class="demo-color-box bg-info">Info<div class="value">#909399</div></div>
</el-col> </el-col>
</el-row> </el-row>
@ -112,18 +112,18 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
<el-row :gutter="12"> <el-row :gutter="12">
<el-col :span="6"> <el-col :span="6">
<div class="demo-color-box-group"> <div class="demo-color-box-group">
<div class="demo-color-box bg-text-primary">主要文字<div class="value">#2D2F33</div></div> <div class="demo-color-box bg-text-primary">主要文字<div class="value">#303133</div></div>
<div class="demo-color-box bg-text-regular">常规文字<div class="value">#5A5E66</div></div> <div class="demo-color-box bg-text-regular">常规文字<div class="value">#606266</div></div>
<div class="demo-color-box bg-text-secondary">次要文字<div class="value">#878D99</div></div> <div class="demo-color-box bg-text-secondary">次要文字<div class="value">#909399</div></div>
<div class="demo-color-box bg-text-placeholder">占位文字<div class="value">#B4BCCC</div></div> <div class="demo-color-box bg-text-placeholder">占位文字<div class="value">#C0C4CC</div></div>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="demo-color-box-group"> <div class="demo-color-box-group">
<div class="demo-color-box bg-border-base">一级边框<div class="value">#D8DCE5</div></div> <div class="demo-color-box bg-border-base">一级边框<div class="value">#DCDFE6</div></div>
<div class="demo-color-box bg-border-light">二级边框<div class="value">#DFE4ED</div></div> <div class="demo-color-box bg-border-light">二级边框<div class="value">#E4E7ED</div></div>
<div class="demo-color-box bg-border-lighter">三级边框<div class="value">#E6EBF5</div></div> <div class="demo-color-box bg-border-lighter">三级边框<div class="value">#EBEEF5</div></div>
<div class="demo-color-box bg-border-extra-light">四级边框<div class="value">#EDF2FC</div></div> <div class="demo-color-box bg-border-extra-light">四级边框<div class="value">#F2F6FC</div></div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>

6
examples/docs/zh-CN/custom-theme.md
View File

@ -72,9 +72,9 @@ $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */ $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
$--color-success: #67c23a !default; $--color-success: #67c23a !default;
$--color-warning: #eb9e05 !default; $--color-warning: #e6a23c !default;
$--color-danger: #fa5555 !default; $--color-danger: #f56c6c !default;
$--color-info: #878d99 !default; $--color-info: #909399 !default;
... ...
``` ```

2
examples/docs/zh-CN/i18n.md
View File

@ -220,6 +220,8 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
<li>阿拉伯语（ar）</li> <li>阿拉伯语（ar）</li>
<li>希伯来语（he）</li> <li>希伯来语（he）</li>
<li>立陶宛语（lt）</li> <li>立陶宛语（lt）</li>
<li>哈萨克斯坦语（kz）</li>
<li>匈牙利语（hu）</li>
</ul> </ul>
如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。 如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。

13
examples/docs/zh-CN/icon.md
View File

@ -11,14 +11,7 @@
</script> </script>
<style> <style>
.demo-icon .source > i { .demo-icon .source > i {
color: #5a5e66; color: #606266;
margin: 0 20px;
font-size: 1.5em;
vertical-align: middle;
}
.demo-icon .source > i {
color: #5a5e66;
margin: 0 20px; margin: 0 20px;
font-size: 1.5em; font-size: 1.5em;
vertical-align: middle; vertical-align: middle;
@ -64,14 +57,14 @@
display: block; display: block;
font-size: 32px; font-size: 32px;
margin-bottom: 15px; margin-bottom: 15px;
color: #5a5e66; color: #606266;
} }
.icon-name { .icon-name {
display: inline-block; display: inline-block;
padding: 0 3px; padding: 0 3px;
height: 1em; height: 1em;
color: #5a5e66; color: #606266;
} }
&:hover { &:hover {

2
examples/docs/zh-CN/menu.md
View File

@ -276,7 +276,7 @@
| mode | 模式 | string | horizontal / vertical | vertical | | mode | 模式 | string | horizontal / vertical | vertical |
| collapse | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）| boolean | — | false | | collapse | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）| boolean | — | false |
| background-color | 菜单的背景色（仅支持 hex 格式） | string | — | #ffffff | | background-color | 菜单的背景色（仅支持 hex 格式） | string | — | #ffffff |
| text-color | 菜单的文字颜色（仅支持 hex 格式） | string | — | #2d2f33 | | text-color | 菜单的文字颜色（仅支持 hex 格式） | string | — | #303133 |
| active-text-color | 当前激活菜单的文字颜色（仅支持 hex 格式） | string | — | #409EFF | | active-text-color | 当前激活菜单的文字颜色（仅支持 hex 格式） | string | — | #409EFF |
| default-active | 当前激活菜单的 index | string | — | — | | default-active | 当前激活菜单的 index | string | — | — |
| default-openeds | 当前打开的sub-menu的 key 数组 | Array | — | — | | default-openeds | 当前打开的sub-menu的 key 数组 | Array | — | — |

16
examples/i18n/page.json
View File

@ -106,10 +106,7 @@
"9": "Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.", "9": "Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.",
"lang": "en-US", "lang": "en-US",
"titleSize": "34", "titleSize": "34",
"paraSize": "18", "paraSize": "18"
"theatreParam": "{ maxSpeed: 100 }",
"typingFunc": ".addScene('product designers', 1800, -17, 800)\n .addScene('UI designers', 1800, -12, 800)\n .addScene('UX designers', 1800, -12, 800)\n .addScene('product managers', 1800, -16, 800)\n .addScene('FE developers', 1800, -13, 800)",
"typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n .addScene(2600)\n .addScene('line2:For ', 500)"
}, },
"component": {}, "component": {},
"changelog": { "changelog": {
@ -182,7 +179,7 @@
"9": "Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.", "9": "Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.",
"paraHeight": "1.6", "paraHeight": "1.6",
"placeholder1": "Under construction", "placeholder1": "Under construction",
"placeholder2": "Please wait while we prepare the design resources" "placeholder2": "More resources are being developed"
} }
} }
}, },
@ -201,15 +198,12 @@
"9": "Descarga los recursos de diseño relevantes para dar forma a un prototipo o borrador, aumentando la eficiencia del diseño.", "9": "Descarga los recursos de diseño relevantes para dar forma a un prototipo o borrador, aumentando la eficiencia del diseño.",
"lang": "es", "lang": "es",
"titleSize": "34", "titleSize": "34",
"paraSize": "18", "paraSize": "18"
"theatreParam": "{ maxSpeed: 100 }",
"typingFunc": ".addScene('product designers', 1800, -17, 800)\n .addScene('UI designers', 1800, -12, 800)\n .addScene('UX designers', 1800, -12, 800)\n .addScene('product managers', 1800, -16, 800)\n .addScene('FE developers', 1800, -13, 800)",
"typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n .addScene(2600)\n .addScene('line2:For ', 500)"
}, },
"component": {}, "component": {},
"changelog": { "changelog": {
"1": "Lista de cambios", "1": "Lista de cambios",
"2": "en-US" "2": "es"
}, },
"design": { "design": {
"1": "Disciplinas de diseño", "1": "Disciplinas de diseño",
@ -277,7 +271,7 @@
"9": "Eche un vistazo más de cerca a la documentación de diseño de interacción. Conoce más detalles de cada componente desde una perspectiva microcósmica.", "9": "Eche un vistazo más de cerca a la documentación de diseño de interacción. Conoce más detalles de cada componente desde una perspectiva microcósmica.",
"paraHeight": "1.6", "paraHeight": "1.6",
"placeholder1": "En construcción", "placeholder1": "En construcción",
"placeholder2": "Por favor espere mientras preparamos los recursos de diseño" "placeholder2": "Se están desarrollando más recursos"
} }
} }
} }

100
examples/nav.config.json
View File

@ -501,7 +501,7 @@
], ],
"es": [ "es": [
{ {
"name": "Changelog-es", "name": "Changelog",
"path": "/changelog" "path": "/changelog"
}, },
{ {
@ -517,23 +517,23 @@
"children": [ "children": [
{ {
"path": "/installation", "path": "/installation",
"name": "Installation-es" "name": "Installation"
}, },
{ {
"path": "/quickstart", "path": "/quickstart",
"name": "Quick Start-es" "name": "Quick Start"
}, },
{ {
"path": "/i18n", "path": "/i18n",
"name": "Internationalization-es" "name": "Internationalization"
}, },
{ {
"path": "/custom-theme", "path": "/custom-theme",
"name": "Custom Theme-es" "name": "Custom Theme"
}, },
{ {
"path": "/transition", "path": "/transition",
"name": "Built-in transition-es" "name": "Built-in transition"
} }
] ]
}, },
@ -545,27 +545,27 @@
"list": [ "list": [
{ {
"path": "/layout", "path": "/layout",
"title": "Layout-es" "title": "Layout"
}, },
{ {
"path": "/container", "path": "/container",
"title": "Layout Container-es" "title": "Layout Container"
}, },
{ {
"path": "/color", "path": "/color",
"title": "Color-es" "title": "Color"
}, },
{ {
"path": "/typography", "path": "/typography",
"title": "Typography-es" "title": "Typography"
}, },
{ {
"path": "/icon", "path": "/icon",
"title": "Icon-es" "title": "Icon"
}, },
{ {
"path": "/button", "path": "/button",
"title": "Button-es" "title": "Button"
} }
] ]
}, },
@ -574,67 +574,67 @@
"list": [ "list": [
{ {
"path": "/radio", "path": "/radio",
"title": "Radio-es" "title": "Radio"
}, },
{ {
"path": "/checkbox", "path": "/checkbox",
"title": "Checkbox-es" "title": "Checkbox"
}, },
{ {
"path": "/input", "path": "/input",
"title": "Input-es" "title": "Input"
}, },
{ {
"path": "/input-number", "path": "/input-number",
"title": "InputNumber-es" "title": "InputNumber"
}, },
{ {
"path": "/select", "path": "/select",
"title": "Select-es" "title": "Select"
}, },
{ {
"path": "/cascader", "path": "/cascader",
"title": "Cascader-es" "title": "Cascader"
}, },
{ {
"path": "/switch", "path": "/switch",
"title": "Switch-es" "title": "Switch"
}, },
{ {
"path": "/slider", "path": "/slider",
"title": "Slider-es" "title": "Slider"
}, },
{ {
"path": "/time-picker", "path": "/time-picker",
"title": "TimePicker-es" "title": "TimePicker"
}, },
{ {
"path": "/date-picker", "path": "/date-picker",
"title": "DatePicker-es" "title": "DatePicker"
}, },
{ {
"path": "/datetime-picker", "path": "/datetime-picker",
"title": "DateTimePicker-es" "title": "DateTimePicker"
}, },
{ {
"path": "/upload", "path": "/upload",
"title": "Upload-es" "title": "Upload"
}, },
{ {
"path": "/rate", "path": "/rate",
"title": "Rate-es" "title": "Rate"
}, },
{ {
"path": "/color-picker", "path": "/color-picker",
"title": "ColorPicker-es" "title": "ColorPicker"
}, },
{ {
"path": "/transfer", "path": "/transfer",
"title": "Transfer-es" "title": "Transfer"
}, },
{ {
"path": "/form", "path": "/form",
"title": "Form-es" "title": "Form"
} }
] ]
}, },
@ -643,27 +643,27 @@
"list": [ "list": [
{ {
"path": "/table", "path": "/table",
"title": "Table-es" "title": "Table"
}, },
{ {
"path": "/tag", "path": "/tag",
"title": "Tag-es" "title": "Tag"
}, },
{ {
"path": "/progress", "path": "/progress",
"title": "Progress-es" "title": "Progress"
}, },
{ {
"path": "/tree", "path": "/tree",
"title": "Tree-es" "title": "Tree"
}, },
{ {
"path": "/pagination", "path": "/pagination",
"title": "Pagination-es" "title": "Pagination"
}, },
{ {
"path": "/badge", "path": "/badge",
"title": "Badge-es" "title": "Badge"
} }
] ]
}, },
@ -672,23 +672,23 @@
"list": [ "list": [
{ {
"path": "/alert", "path": "/alert",
"title": "Alert-es" "title": "Alert"
}, },
{ {
"path": "/loading", "path": "/loading",
"title": "Loading-es" "title": "Loading"
}, },
{ {
"path": "/message", "path": "/message",
"title": "Message-es" "title": "Message"
}, },
{ {
"path": "/message-box", "path": "/message-box",
"title": "MessageBox-es" "title": "MessageBox"
}, },
{ {
"path": "/notification", "path": "/notification",
"title": "Notification-es" "title": "Notification"
} }
] ]
}, },
@ -697,23 +697,23 @@
"list": [ "list": [
{ {
"path": "/menu", "path": "/menu",
"title": "NavMenu-es" "title": "NavMenu"
}, },
{ {
"path": "/tabs", "path": "/tabs",
"title": "Tabs-es" "title": "Tabs"
}, },
{ {
"path": "/breadcrumb", "path": "/breadcrumb",
"title": "Breadcrumb-es" "title": "Breadcrumb"
}, },
{ {
"path": "/dropdown", "path": "/dropdown",
"title": "Dropdown-es" "title": "Dropdown"
}, },
{ {
"path": "/steps", "path": "/steps",
"title": "Steps-es" "title": "Steps"
} }
] ]
}, },
@ -722,27 +722,27 @@
"list": [ "list": [
{ {
"path": "/dialog", "path": "/dialog",
"title": "Dialog-es" "title": "Dialog"
}, },
{ {
"path": "/tooltip", "path": "/tooltip",
"title": "Tooltip-es" "title": "Tooltip"
}, },
{ {
"path": "/popover", "path": "/popover",
"title": "Popover-es" "title": "Popover"
}, },
{ {
"path": "/card", "path": "/card",
"title": "Card-es" "title": "Card"
}, },
{ {
"path": "/carousel", "path": "/carousel",
"title": "Carousel-es" "title": "Carousel"
}, },
{ {
"path": "/collapse", "path": "/collapse",
"title": "Collapse-es" "title": "Collapse"
} }
] ]
} }

6
examples/pages/es/changelog.vue
View File

@ -138,9 +138,9 @@
<div class="page-changelog"> <div class="page-changelog">
<div class="heading"> <div class="heading">
<el-button class="fr"> <el-button class="fr">
<a href="https://github.com/ElemeFE/element/releases" target="_blank">Github Releases</a> <a href="https://github.com/ElemeFE/element/releases" target="_blank">GitHub Releases</a>
</el-button> </el-button>
Changelog Lista de cambios
</div> </div>
<ul class="timeline" ref="timeline"> <ul class="timeline" ref="timeline">
</ul> </ul>
@ -148,7 +148,7 @@
</div> </div>
</template> </template>
<script> <script>
import ChangeLog from '../../../CHANGELOG.en-US.md'; import ChangeLog from '../../../CHANGELOG.es.md';
export default { export default {
components: { components: {

36
examples/pages/es/design.vue
View File

@ -26,57 +26,57 @@
</style> </style>
<template> <template>
<div> <div>
<h2>Design Disciplines</h2> <h2>Disciplinas de diseño</h2>
<el-row :gutter="14" class="cards"> <el-row :gutter="14" class="cards">
<el-col :xs="12" :sm="6"> <el-col :xs="12" :sm="6">
<div class="card"> <div class="card">
<img src="~examples/assets/images/consistency.png" alt="Consistency"> <img src="~examples/assets/images/consistency.png" alt="Consistency">
<h4>Consistency</h4> <h4>Consistencia</h4>
<span></span> <span></span>
</div> </div>
</el-col> </el-col>
<el-col :xs="12" :sm="6"> <el-col :xs="12" :sm="6">
<div class="card"> <div class="card">
<img src="~examples/assets/images/feedback.png" alt="Feedback"> <img src="~examples/assets/images/feedback.png" alt="Feedback">
<h4>Feedback</h4> <h4>Comentarios</h4>
<span></span> <span></span>
</div> </div>
</el-col> </el-col>
<el-col :xs="12" :sm="6"> <el-col :xs="12" :sm="6">
<div class="card"> <div class="card">
<img src="~examples/assets/images/efficiency.png" alt="Efficiency"> <img src="~examples/assets/images/efficiency.png" alt="Efficiency">
<h4>Efficiency</h4> <h4>Eficiencia</h4>
<span></span> <span></span>
</div> </div>
</el-col> </el-col>
<el-col :xs="12" :sm="6"> <el-col :xs="12" :sm="6">
<div class="card"> <div class="card">
<img src="~examples/assets/images/controllability.png" alt="Controllability"> <img src="~examples/assets/images/controllability.png" alt="Controllability">
<h4>Controllability</h4> <h4>Control</h4>
<span></span> <span></span>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<h3>Consistency</h3> <h3>Consistencia</h3>
<ul> <ul>
<li><strong>Consistent with real life: </strong>in line with the process and logic of real life, and comply with languages and habits that the users are used to.</li> <li><strong>Consistente con la vida real: </strong>en línea con el proceso y la vida real, y cumple con los idiomas y hábitos a los que los usuarios están acostumbrados.</li>
<li><strong>Consistent within interface: </strong>all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</li> <li><strong>Consistente dentro de la interfaz: </strong>todos los elementos deben ser consistentes, como: estilo de diseño, iconos y texto, posición de los elementos, etc.</li>
</ul> </ul>
<h3>Feedback</h3> <h3>Comentarios</h3>
<ul> <ul>
<li><strong>Operation feedback: </strong>enable the users to clearly perceive their operations by style updates and interactive effects.</li> <li><strong>Comentarios sobre la operación: </strong>Permite a los usuarios percibir claramente las operaciones mediante actualizaciones de estilo y efectos interactivos.</li>
<li><strong>Visual feedback: </strong>reflect current state by updating or rearranging elements of the page.</li> <li><strong>Comentarios visuales: </strong>Refleja el estado actual al actualizar o reorganizar los elementos de la página.</li>
</ul> </ul>
<h3>Efficiency</h3> <h3>Eficiencia</h3>
<ul> <ul>
<li><strong>Simplify the process: </strong>keep operating process simple and intuitive.</li> <li><strong>Simplifica el proceso: </strong>Mantiene el proceso operativo simple e intuitivo.</li>
<li><strong>Definite and clear: </strong>enunciate your intentions clearly so that the users can quickly understand and make decisions.</li> <li><strong>Bien definido y claro: </strong>Expresa las intenciones claramente para que los usuarios puedan comprender y tomar decisiones rápidamente.</li>
<li><strong>Easy to identify: </strong>the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</li> <li><strong>Fácil de identificar: </strong>La interfaz debe ser sencilla, lo que permitirá a los usuarios a identificar y liberarlos de la memorización y recuerdos.</li>
</ul> </ul>
<h3>Controllability</h3> <h3>Control</h3>
<ul> <ul>
<li><strong>Decision making: </strong>giving advices about operations is acceptable, but do not make decisions for the users.</li> <li><strong>Toma de decisiones: </strong>Brindar consejos sobres las operaciones es aceptable, pero no tomar desiciones para los usuarios.</li>
<li><strong>Controlled consequences: </strong>users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</li> <li><strong>Consecuencias controladas: </strong>Los usuarios deben tener la libertad de operar, incluida la cancelación, el aborto o la terminación de las operaciones actuales.</li>
</ul> </ul>
</div> </div>
</template> </template>

4
examples/pages/es/guide.vue
View File

@ -78,11 +78,11 @@
navsData: [ navsData: [
{ {
path: '/design', path: '/design',
name: 'Design Disciplines' name: 'Disciplinas de diseño'
}, },
{ {
path: '/nav', path: '/nav',
name: 'Navigation' name: 'Navegación'
} }
] ]
}; };

28
examples/pages/es/index.vue
View File

@ -237,8 +237,8 @@
<div> <div>
<div class="banner"> <div class="banner">
<div class="banner-desc"> <div class="banner-desc">
<h1>A Desktop UI Library</h1> <h1>Un kit de interfaz de usuario para la web</h1>
<p>Element, a Vue 2.0 based component library for developers, designers and product managers</p> <p>Element, una librería de componentes basada en Vue 2.0 para desarrolladores, diseñadores y jefes de producto</p>
</div> </div>
</div> </div>
<div class="jumbotron"> <div class="jumbotron">
@ -264,36 +264,36 @@
<li> <li>
<div class="card"> <div class="card">
<img src="~examples/assets/images/guide.png" alt=""> <img src="~examples/assets/images/guide.png" alt="">
<h3>Guide</h3> <h3>Guía</h3>
<p>Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.</p> <p>Entender los líneamientos de diseño, ayudando a diseñadores a crear productos que sean lógicos, razonablemente estructurados y fáciles de usar.</p>
<router-link <router-link
active-class="active" active-class="active"
to="/en-US/guide/design" to="/es/guide/design"
exact>View Detail exact>Ver detalle
</router-link> </router-link>
</div> </div>
</li> </li>
<li> <li>
<div class="card"> <div class="card">
<img src="~examples/assets/images/component.png" alt=""> <img src="~examples/assets/images/component.png" alt="">
<h3>Component</h3> <h3>Componentes</h3>
<p>Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.</p> <p>Experimenta la interacción al pasear con los ejemplos de los componentes. Utiliza el código encapsulado para mejorar la eficiencia en el desarrollo.</p>
<router-link <router-link
active-class="active" active-class="active"
to="/en-US/component/layout" to="/es/component/layout"
exact>View Detail exact>Ver detalle
</router-link> </router-link>
</div> </div>
</li> </li>
<li> <li>
<div class="card"> <div class="card">
<img src="~examples/assets/images/resource.png" alt=""> <img src="~examples/assets/images/resource.png" alt="">
<h3>Resource</h3> <h3>Recursos</h3>
<p>Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.</p> <p>Descarga los recursos de diseño relevantes para dar forma a un prototipo o borrador, aumentando la eficiencia del diseño.</p>
<router-link <router-link
active-class="active" active-class="active"
to="/en-US/resource" to="/es/resource"
exact>View Detail exact>Ver detalle
</router-link> </router-link>
</div> </div>
</li> </li>

36
examples/pages/es/nav.vue
View File

@ -76,42 +76,42 @@
</style> </style>
<template> <template>
<div> <div>
<h2>Navigation</h2> <h2>Navegación</h2>
<div class="block"> <div class="block">
<p>Navigation focuses on solving the users' problems of where to go and how to get there. Generally it can be categorized into 'sidebar navigation' and 'top navigation'.</p> <p>La navegación se centra en resolver los problemas de los usuarios sobre donde ir y como llegar ahí. En general, se puede categorizar en 'navegación de barra lateral' y 'navegación superior'.</p>
</div> </div>
<div class="block"> <div class="block">
<h3>Choose the right navigation</h3> <h3>Elige la navegación correcta</h3>
<p>An appropriate navigation gives users a smooth experience, while an inappropriate one leads to confusion. Here are the differences between sidebar navigation and top navigation</p> <p>Una navegación apropiada provee a los usuarios una mejor experiencia, mientras que una inapropiada genera confusión. Esta es la diferencia entre la navegación de la barra lateral y la navegación superior.</p>
</div> </div>
<div class="block"> <div class="block">
<h3>Side Navigation</h3> <h3>Navegación lateral</h3>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="9"> <el-col :span="9">
<p>Fix the navigation at the left edge, thus improves its visibility, making it easier to switch between pages. In this case, the top area of the page holds commonly used tools, e.g. search bar, help button, notice button, etc. Suitable for background management or utility websites.</p> <p>Fija la navegación del lado izquierdo, esto permitirá una mejor visibilidad, lo que facilitará el cambio de pagina. En este caso, el área superior de la pagina contiene herramientas comúnmente utilizadas, por ejemplo, barra de búsqueda, botón de ayuda, botón de aviso, etc. Adecuado para sitios web de gestión.</p>
</el-col> </el-col>
<el-col :span="15" class="nav-demos"> <el-col :span="15" class="nav-demos">
<img src="~examples/assets/images/navbar_1.png" alt="Level 1 categories" @click="enlarge(846, $event)"> <img src="~examples/assets/images/navbar_1.png" alt="Categorías de Nivel 1" @click="enlarge(846, $event)">
<h5>Level 1 categories</h5> <h5>Categorías de Nivel 1</h5>
<p>Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.</p> <p>Adecuado para sitios con una estructura simple con un solo nivel de páginas. No se necesita un 'breadcrumb'.</p>
<img src="~examples/assets/images/navbar_2.png" alt="Level 2 categories" @click="enlarge(846, $event)"> <img src="~examples/assets/images/navbar_2.png" alt="Categorías de Nivel 2" @click="enlarge(846, $event)">
<h5>Level 2 categories</h5> <h5>Categorías de Nivel 2</h5>
<p>Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in combination of second level navigation, making it easier for the users to locate and navigate.</p> <p>La barra lateral muestra hasta dos niveles de navegación. Se recomienda utilizar un 'breadcrumb' en combinación con la navegación de segundo nivel, lo que facilita la localización y navegación de los usuarios.</p>
<img src="~examples/assets/images/navbar_3.png" alt="Level 3 categories" @click="enlarge(846, $event)"> <img src="~examples/assets/images/navbar_3.png" alt="Categorías de Nivel 3" @click="enlarge(846, $event)">
<h5>Level 3 categories</h5> <h5>Categorías de Nivel 3</h5>
<p>Suitable for complicated utility websites. The left sidebar holds first level navigation, and the middle column displays second level navigation or other utility options.</p> <p>Adecuado para sitios web bastante complejos. La barra lateral izquierda contiene navegación de primer nivel, y la columna central muestra navegación de segundo nivel u otras opciones de utilidad.</p>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div class="block"> <div class="block">
<h3>Top Navigation</h3> <h3>Navegación superior</h3>
<el-row> <el-row>
<el-col :span="10"> <el-col :span="10">
<p>Conforms to the normal browsing order from top to bottom, which makes things more natural. The navigation amount and text length are limited to the width of the top.</p> <p>Se ajusta de acuerdo a la exploración normal de arriba a abajo, lo que hace que las cosas sean más naturales. La cantidad de navegación y la longitud del texto están limitadas al ancho de la parte superior.</p>
</el-col> </el-col>
<el-col :span="14" class="nav-demos"> <el-col :span="14" class="nav-demos">
<img src="~examples/assets/images/navbar_0.png" alt="" @click="enlarge(846, $event)"> <img src="~examples/assets/images/navbar_0.png" alt="" @click="enlarge(846, $event)">
<p>Suitable for sites with few navigations and large chunks.</p> <p>Adecuado para sitios con pocas navegaciones y grandes trozos.</p>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>

50
examples/pages/es/resource.vue
View File

@ -120,41 +120,41 @@
</style> </style>
<template> <template>
<div class="page-container page-resource"> <div class="page-container page-resource">
<h2>Resource</h2> <h2>Recursos</h2>
<div class="resource-placeholder"> <!--<div class="resource-placeholder">-->
<img src="~examples/assets/images/resource-placeholder.svg" alt=""> <!--<img src="~examples/assets/images/resource-placeholder.svg" alt="">-->
<h4>Under construction</h4> <!--<h4>En construcción</h4>-->
<p>Please wait while we prepare the design resources</p> <!--<p>Se están desarrollando más recursos</p>-->
</div> <!--</div>-->
<!--<p>Under construction.</p>--> <p>Se están desarrollando más recursos</p>
<!--<div class="cards">--> <div class="cards">
<!--<ul class="container">--> <ul class="container">
<!--<li>--> <!--<li>-->
<!--<div class="card">--> <!--<div class="card">-->
<!--<img src="~examples/assets/images/Axure-Components.svg" alt="">--> <!--<img src="~examples/assets/images/Axure-Components.svg" alt="">-->
<!--<h3>Axure Components</h3>--> <!--<h3>Componetes de Axure</h3>-->
<!--<p>By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.</p>--> <!--<p>Mediante la importación de elementos de interfaz de usuario en Axure, se puede aplicar fácilmente a todos los componentes que proporcionamos durante el diseño de interacción.</p>-->
<!--<a href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib">Download</a>--> <!--<a href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib">Descarga</a>-->
<!--</div>-->
<!--</li>-->
<!--<li>-->
<!--<div class="card">-->
<!--<img src="~examples/assets/images/Sketch-Template.svg" alt="">-->
<!--<h3>Sketch Template</h3>-->
<!--<p>Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.</p>-->
<!--<a href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch">Download</a>-->
<!--</div>--> <!--</div>-->
<!--</li>--> <!--</li>-->
<li>
<div class="card">
<img src="~examples/assets/images/Sketch-Template.svg" alt="">
<h3>Plantilla de Sketch</h3>
<p>Aplica componentes de la plantilla Element para que pueda mejorarla eficiencia del diseño manteniendo un estilo visual unificado.</p>
<a href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch">Descarga</a>
</div>
</li>
<!--<li>--> <!--<li>-->
<!--<div class="card">--> <!--<div class="card">-->
<!--<img src="~examples/assets/images/Module.svg" alt="">--> <!--<img src="~examples/assets/images/Module.svg" alt="">-->
<!--<h3>Interaction Design Documentation</h3>--> <!--<h3>Documentación de diseño de interacción</h3>-->
<!--<p>Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.</p>--> <!--<p>Eche un vistazo más de cerca a la documentación de diseño de interacción. Conoce más detalles de cada componente desde una perspectiva microcósmica.</p>-->
<!--<a href="https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip">Download</a>--> <!--<a href="https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip">Descarga</a>-->
<!--</div>--> <!--</div>-->
<!--</li>--> <!--</li>-->
<!--</ul>--> </ul>
<!--</div>--> </div>
</div> </div>
</template> </template>

2
examples/pages/template/changelog.tpl
View File

@ -138,7 +138,7 @@
<div class="page-changelog"> <div class="page-changelog">
<div class="heading"> <div class="heading">
<el-button class="fr"> <el-button class="fr">
<a href="https://github.com/ElemeFE/element/releases" target="_blank">Github Releases</a> <a href="https://github.com/ElemeFE/element/releases" target="_blank">GitHub Releases</a>
</el-button> </el-button>
<%= 1 > <%= 1 >
</div> </div>

36
examples/pages/template/resource.tpl
View File

@ -121,15 +121,15 @@
<template> <template>
<div class="page-container page-resource"> <div class="page-container page-resource">
<h2><%= 1 ></h2> <h2><%= 1 ></h2>
<div class="resource-placeholder"> <!--<div class="resource-placeholder">-->
<img src="~examples/assets/images/resource-placeholder.svg" alt=""> <!--<img src="~examples/assets/images/resource-placeholder.svg" alt="">-->
<h4><%= placeholder1 ></h4> <!--<h4><%= placeholder1 ></h4>-->
<p><%= placeholder2 ></p> <!--<p><%= placeholder2 ></p>-->
</div> <!--</div>-->
<!--<p><%= 2 ></p>--> <p><%= placeholder2 ></p>
<!--<div class="cards">--> <div class="cards">
<!--<ul class="container">--> <ul class="container">
<!--<li>--> <!--<li>-->
<!--<div class="card">--> <!--<div class="card">-->
<!--<img src="~examples/assets/images/Axure-Components.svg" alt="">--> <!--<img src="~examples/assets/images/Axure-Components.svg" alt="">-->
@ -138,14 +138,14 @@
<!--<a href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib"><%= 5 ></a>--> <!--<a href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib"><%= 5 ></a>-->
<!--</div>--> <!--</div>-->
<!--</li>--> <!--</li>-->
<!--<li>--> <li>
<!--<div class="card">--> <div class="card">
<!--<img src="~examples/assets/images/Sketch-Template.svg" alt="">--> <img src="~examples/assets/images/Sketch-Template.svg" alt="">
<!--<h3><%= 6 ></h3>--> <h3><%= 6 ></h3>
<!--<p><%= 7 ></p>--> <p><%= 7 ></p>
<!--<a href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch"><%= 5 ></a>--> <a href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"><%= 5 ></a>
<!--</div>--> </div>
<!--</li>--> </li>
<!--<li>--> <!--<li>-->
<!--<div class="card">--> <!--<div class="card">-->
<!--<img src="~examples/assets/images/Module.svg" alt="">--> <!--<img src="~examples/assets/images/Module.svg" alt="">-->
@ -154,7 +154,7 @@
<!--<a href="https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip"><%= 5 ></a>--> <!--<a href="https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip"><%= 5 ></a>-->
<!--</div>--> <!--</div>-->
<!--</li>--> <!--</li>-->
<!--</ul>--> </ul>
<!--</div>--> </div>
</div> </div>
</template> </template>

2
examples/route.config.js
View File

@ -83,7 +83,7 @@ const registerRoute = (navConfig) => {
description: page.description, description: page.description,
lang lang
}, },
name: 'component-' + (page.title || page.name), name: 'component-' + lang + (page.title || page.name),
component: component.default || component component: component.default || component
}; };

2
packages/dropdown/src/dropdown.vue
View File

@ -198,7 +198,7 @@
if (!this.splitButton) { // 自定义 if (!this.splitButton) { // 自定义
this.triggerElm.setAttribute('role', 'button'); this.triggerElm.setAttribute('role', 'button');
this.triggerElm.setAttribute('tabindex', '0'); this.triggerElm.setAttribute('tabindex', '0');
this.triggerElm.setAttribute('class', this.triggerElm.getAttribute('class') + ' el-dropdown-selfdefine'); // 控制 this.triggerElm.setAttribute('class', (this.triggerElm.getAttribute('class') || '') + ' el-dropdown-selfdefine'); // 控制
} }
}, },
initEvent() { initEvent() {

4
packages/select/src/select.vue
View File

@ -9,7 +9,7 @@
@click.stop="toggleMenu" @click.stop="toggleMenu"
ref="tags" ref="tags"
:style="{ 'max-width': inputWidth - 32 + 'px' }"> :style="{ 'max-width': inputWidth - 32 + 'px' }">
<div v-if="collapseTags && selected.length"> <span v-if="collapseTags && selected.length">
<el-tag <el-tag
:closable="!disabled" :closable="!disabled"
size="small" size="small"
@ -27,7 +27,7 @@
disable-transitions> disable-transitions>
<span class="el-select__tags-text">+ {{ selected.length - 1 }}</span> <span class="el-select__tags-text">+ {{ selected.length - 1 }}</span>
</el-tag> </el-tag>
</div> </span>
<transition-group @after-leave="resetInputHeight" v-if="!collapseTags"> <transition-group @after-leave="resetInputHeight" v-if="!collapseTags">
<el-tag <el-tag
v-for="item in selected" v-for="item in selected"

22
packages/theme-chalk/src/common/var.scss
View File

@ -25,10 +25,10 @@ $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */ $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */ $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
$--color-success: #5cb87a !default; $--color-success: #67c23a !default;
$--color-warning: #e6a23c !default; $--color-warning: #e6a23c !default;
$--color-danger: #fa5555 !default; $--color-danger: #f56c6c !default;
$--color-info: #878d99 !default; $--color-info: #909399 !default;
$--color-success-light: mix($--color-white, $--color-success, 80%) !default; $--color-success-light: mix($--color-white, $--color-success, 80%) !default;
$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default; $--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
@ -40,10 +40,10 @@ $--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default; $--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default; $--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
$--color-text-primary: #2d2f33 !default; $--color-text-primary: #303133 !default;
$--color-text-regular: #5a5e66 !default; $--color-text-regular: #606266 !default;
$--color-text-secondary: #878d99 !default; $--color-text-secondary: #909399 !default;
$--color-text-placeholder: #b4bccc !default; $--color-text-placeholder: #c0c4cc !default;
/* Link /* Link
-------------------------- */ -------------------------- */
@ -58,10 +58,10 @@ $--background-color-base: #f5f7fa !default;
-------------------------- */ -------------------------- */
$--border-width-base: 1px !default; $--border-width-base: 1px !default;
$--border-style-base: solid !default; $--border-style-base: solid !default;
$--border-color-base: #d8dce5 !default; $--border-color-base: #dcdfe6 !default;
$--border-color-light: #dfe4ed !default; $--border-color-light: #e4e7ed !default;
$--border-color-lighter: #e6ebf5 !default; $--border-color-lighter: #ebeef5 !default;
$--border-color-extra-light: #edf2fc !default; $--border-color-extra-light: #f2f6fc !default;
$--border-color-hover: $--color-text-placeholder !default; $--border-color-hover: $--color-text-placeholder !default;
$--border-base: $--border-width-base $--border-style-base $--border-color-base !default; $--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
$--border-radius-base: 4px !default; $--border-radius-base: 4px !default;