mirror of https://github.com/ElemeFE/element
Chore: configure es docs
Leopoldthecoder
杨奕
parent
53fa204128
commit
dca4b7afd2
14
README.md
14
README.md
|
|
@ -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.
|
||||
|
||||
## 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)
|
||||
- [kevin](http://thekevin.cn/)
|
||||
- [曾小涛](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)
|
||||
- [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
|
||||
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="">
|
||||
|
|
|
|||
|
|
@ -7,9 +7,14 @@ const slugify = require('transliteration').slugify;
|
|||
const key = require('./algolia-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 => {
|
||||
const indexName = lang === 'zh-CN' ? 'element-zh' : 'element-en';
|
||||
['zh-CN', 'en-US', 'es'].forEach(lang => {
|
||||
const indexName = langs[lang];
|
||||
const index = client.initIndex(indexName);
|
||||
index.clearIndex(err => {
|
||||
if (err) return;
|
||||
|
|
|
|||
|
|
@ -249,30 +249,25 @@
|
|||
this.suggestJump();
|
||||
}
|
||||
setTimeout(() => {
|
||||
const notified = localStorage.getItem('ES_NOTIFIED');
|
||||
if (!notified && this.lang !== 'zh-CN') {
|
||||
const h = this.$createElement;
|
||||
const notified = localStorage.getItem('ES_NOTIFIED_2');
|
||||
if (!notified && this.lang !== 'es') {
|
||||
const title = this.lang === 'zh-CN'
|
||||
? '帮助我们完成西班牙语文档'
|
||||
: 'Help us with Spanish docs';
|
||||
const messages = this.lang === 'zh-CN'
|
||||
? ['点击', '这里', '查看详情']
|
||||
: ['Click ', 'here', ' to learn more'];
|
||||
? '西班牙语文档正式上线'
|
||||
: 'Spanish docs now available';
|
||||
const message = this.lang === 'zh-CN'
|
||||
? '点击这里进行切换'
|
||||
: 'Click here to switch';
|
||||
const self = this;
|
||||
this.$notify({
|
||||
title,
|
||||
duration: 0,
|
||||
message: h('span', [
|
||||
messages[0],
|
||||
h('a', {
|
||||
attrs: {
|
||||
target: '_blank',
|
||||
href: 'https://github.com/ElemeFE/element/issues/8074'
|
||||
}
|
||||
}, messages[1]),
|
||||
messages[2]
|
||||
]),
|
||||
message,
|
||||
onClick() {
|
||||
self.$router.push('/es');
|
||||
localStorage.setItem('ES_NOTIFIED_2', 1);
|
||||
},
|
||||
onClose() {
|
||||
localStorage.setItem('ES_NOTIFIED', 1);
|
||||
localStorage.setItem('ES_NOTIFIED_2', 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -223,17 +223,37 @@
|
|||
.container {
|
||||
padding: 0 12px;
|
||||
}
|
||||
.nav-item a,
|
||||
.nav-lang {
|
||||
.nav-item {
|
||||
a {
|
||||
font-size: 12px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&.lang-item {
|
||||
height: 100%;
|
||||
|
||||
.nav-lang {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-dropdown {
|
||||
padding: 0;
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.nav-gap {
|
||||
padding: 0 8px;
|
||||
}
|
||||
.nav-versions {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -287,19 +307,19 @@
|
|||
</li>
|
||||
|
||||
<!-- 版本选择器 -->
|
||||
<li class="nav-item" v-show="isComponentPage">
|
||||
<li class="nav-item nav-versions" v-show="isComponentPage">
|
||||
<el-dropdown
|
||||
trigger="click"
|
||||
class="nav-dropdown"
|
||||
:class="{ 'is-active': dropdownVisible }">
|
||||
:class="{ 'is-active': verDropdownVisible }">
|
||||
<span>
|
||||
{{ langConfig.dropdown }}{{ version }}
|
||||
{{ version }}
|
||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu
|
||||
slot="dropdown"
|
||||
class="nav-dropdown-list"
|
||||
@input="handleDropdownToggle">
|
||||
@input="handleVerDropdownToggle">
|
||||
<el-dropdown-item
|
||||
v-for="item in Object.keys(versions)"
|
||||
:key="item"
|
||||
|
|
@ -310,21 +330,28 @@
|
|||
</el-dropdown>
|
||||
</li>
|
||||
|
||||
<!-- lang -->
|
||||
<!-- 语言选择器 -->
|
||||
<li class="nav-item lang-item">
|
||||
<span
|
||||
class="nav-lang"
|
||||
:class="{ 'active': lang === 'zh-CN' }"
|
||||
@click="switchLang('zh-CN')">
|
||||
中文
|
||||
</span>
|
||||
<span class="nav-lang-spe"> / </span>
|
||||
<span
|
||||
class="nav-lang"
|
||||
:class="{ 'active': lang === 'en-US' }"
|
||||
@click="switchLang('en-US')">
|
||||
En
|
||||
<el-dropdown
|
||||
trigger="click"
|
||||
class="nav-dropdown nav-lang"
|
||||
:class="{ 'is-active': langDropdownVisible }">
|
||||
<span>
|
||||
{{ displayedLang }}
|
||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</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>
|
||||
|
||||
<!--theme picker-->
|
||||
|
|
@ -348,7 +375,13 @@
|
|||
active: '',
|
||||
versions: [],
|
||||
version,
|
||||
dropdownVisible: true
|
||||
verDropdownVisible: true,
|
||||
langDropdownVisible: true,
|
||||
langs: {
|
||||
'zh-CN': '中文',
|
||||
'en-US': 'English',
|
||||
'es': 'Español'
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -361,6 +394,9 @@
|
|||
lang() {
|
||||
return this.$route.path.split('/')[1] || 'zh-CN';
|
||||
},
|
||||
displayedLang() {
|
||||
return this.langs[this.lang] || '中文';
|
||||
},
|
||||
langConfig() {
|
||||
return compoLang.filter(config => config.lang === this.lang)[0]['header'];
|
||||
},
|
||||
|
|
@ -381,8 +417,12 @@
|
|||
this.$router.push(this.$route.path.replace(this.lang, targetLang));
|
||||
},
|
||||
|
||||
handleDropdownToggle(visible) {
|
||||
this.dropdownVisible = visible;
|
||||
handleVerDropdownToggle(visible) {
|
||||
this.verDropdownVisible = visible;
|
||||
},
|
||||
|
||||
handleLangDropdownToggle(visible) {
|
||||
this.langDropdownVisible = visible;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
|
||||
.el-autocomplete-suggestion__list {
|
||||
position: static !important;
|
||||
padding-bottom: 31px;
|
||||
padding-bottom: 28px;
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
@ -87,14 +87,14 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
background-color: #dfe4ed;
|
||||
background-color: #e4e7ed;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
text-align: right;
|
||||
|
||||
&:hover {
|
||||
background-color: #dfe4ed;
|
||||
background-color: #e4e7ed;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -120,7 +120,24 @@
|
|||
return {
|
||||
index: null,
|
||||
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() {
|
||||
return this.lang === 'zh-CN' ? '搜索文档' : 'Search';
|
||||
return this.lang ? this.langs[this.lang].search : '';
|
||||
},
|
||||
|
||||
emptyText() {
|
||||
return this.lang === 'zh-CN' ? '无匹配结果' : 'No results';
|
||||
return this.lang ? this.langs[this.lang].empty : '';
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -147,7 +164,7 @@
|
|||
methods: {
|
||||
initIndex() {
|
||||
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) {
|
||||
|
|
|
|||
|
|
@ -38,37 +38,37 @@
|
|||
background-color: #ff4949;
|
||||
}
|
||||
.bg-info {
|
||||
background-color: #878D99;
|
||||
background-color: #909399;
|
||||
}
|
||||
|
||||
.bg-text-primary {
|
||||
background-color: #2d2f33;
|
||||
background-color: #303133;
|
||||
}
|
||||
.bg-text-regular {
|
||||
background-color: #5a5e66;
|
||||
background-color: #303133;
|
||||
}
|
||||
.bg-text-secondary {
|
||||
background-color: #878d99;
|
||||
background-color: #909399;
|
||||
}
|
||||
.bg-text-placeholder {
|
||||
background-color: #b4bccc;
|
||||
background-color: #c0c4cc;
|
||||
}
|
||||
|
||||
.bg-border-base {
|
||||
background-color: #d8dce5;
|
||||
background-color: #dcdfe6;
|
||||
}
|
||||
.bg-border-light {
|
||||
background-color: #dfe4ed;
|
||||
background-color: #e4e7ed;
|
||||
}
|
||||
.bg-border-lighter {
|
||||
background-color: #e6ebf5;
|
||||
background-color: #ebeef5;
|
||||
}
|
||||
.bg-border-extra-light {
|
||||
background-color: #edf2fc;
|
||||
background-color: #f2f6fc;
|
||||
}
|
||||
|
||||
[class*=" bg-border-"] {
|
||||
color: #5a5e66;
|
||||
color: #303133;
|
||||
}
|
||||
</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>
|
||||
</el-col>
|
||||
<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 :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 :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-row>
|
||||
|
||||
|
|
@ -111,18 +111,18 @@ Neutral colors are for text, background and border colors. You can use different
|
|||
<el-row :gutter="12">
|
||||
<el-col :span="6">
|
||||
<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-regular">Regular Text<div class="value">#5A5E66</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-placeholder">Placeholder Text<div class="value">#B4BCCC</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">#303133</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">#C0C4CC</div></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<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-light">Light Border<div class="value">#DFE4ED</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-extra-light">Extra Light Border<div class="value">#EDF2FC</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">#E4E7ED</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">#F2F6FC</div></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -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-success: #67c23a !default;
|
||||
$--color-warning: #eb9e05 !default;
|
||||
$--color-danger: #fa5555 !default;
|
||||
$--color-info: #878d99 !default;
|
||||
$--color-warning: #e6a23c !default;
|
||||
$--color-danger: #f56c6c !default;
|
||||
$--color-info: #909399 !default;
|
||||
|
||||
...
|
||||
```
|
||||
|
|
|
|||
|
|
@ -231,6 +231,8 @@
|
|||
}
|
||||
}
|
||||
.demo-dynamic {
|
||||
width: 500px;
|
||||
|
||||
.el-input {
|
||||
margin-right: 10px;
|
||||
width: 270px;
|
||||
|
|
|
|||
|
|
@ -208,6 +208,8 @@ Currently Element ships with the following languages:
|
|||
<li>Arabic (ar)</li>
|
||||
<li>Hebrew (he)</li>
|
||||
<li>Lithuanian (lt)</li>
|
||||
<li>Kazakh (kz)</li>
|
||||
<li>Hungarian (hu)</li>
|
||||
</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.
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<style>
|
||||
.demo-icon .source > i {
|
||||
color: #8492a6;
|
||||
color: #606266;
|
||||
margin: 0 20px;
|
||||
font-size: 1.5em;
|
||||
vertical-align: middle;
|
||||
|
|
@ -46,18 +46,24 @@
|
|||
|
||||
@utils-vertical-center;
|
||||
|
||||
& span {
|
||||
span {
|
||||
display: inline-block;
|
||||
line-height: normal;
|
||||
vertical-align: middle;
|
||||
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
|
||||
color: #99a9bf;
|
||||
}
|
||||
& i {
|
||||
i {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-size: 32px;
|
||||
margin-bottom: 15px;
|
||||
color: #8492a6;
|
||||
color: #606266;
|
||||
}
|
||||
.icon-name {
|
||||
display: inline-block;
|
||||
padding: 0 3px;
|
||||
height: 1em;
|
||||
color: #606266;
|
||||
}
|
||||
&:hover {
|
||||
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">
|
||||
<span>
|
||||
<i :class="'el-icon-' + name"></i>
|
||||
{{'el-icon-' + name}}
|
||||
<span class="icon-name">{{'el-icon-' + name}}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -275,7 +275,7 @@ Vertical NavMenu could be collapsed.
|
|||
| 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 |
|
||||
| text-color | text color of Menu (hex format) | string | — | #303133 |
|
||||
| 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 | — | — |
|
||||
|
|
|
|||
|
|
@ -38,37 +38,37 @@
|
|||
background-color: #ff4949;
|
||||
}
|
||||
.bg-info {
|
||||
background-color: #878D99;
|
||||
background-color: #909399;
|
||||
}
|
||||
|
||||
.bg-text-primary {
|
||||
background-color: #2d2f33;
|
||||
background-color: #303133;
|
||||
}
|
||||
.bg-text-regular {
|
||||
background-color: #5a5e66;
|
||||
background-color: #303133;
|
||||
}
|
||||
.bg-text-secondary {
|
||||
background-color: #878d99;
|
||||
background-color: #909399;
|
||||
}
|
||||
.bg-text-placeholder {
|
||||
background-color: #b4bccc;
|
||||
background-color: #c0c4cc;
|
||||
}
|
||||
|
||||
.bg-border-base {
|
||||
background-color: #d8dce5;
|
||||
background-color: #dcdfe6;
|
||||
}
|
||||
.bg-border-light {
|
||||
background-color: #dfe4ed;
|
||||
background-color: #e4e7ed;
|
||||
}
|
||||
.bg-border-lighter {
|
||||
background-color: #e6ebf5;
|
||||
background-color: #ebeef5;
|
||||
}
|
||||
.bg-border-extra-light {
|
||||
background-color: #edf2fc;
|
||||
background-color: #f2f6fc;
|
||||
}
|
||||
|
||||
[class*=" bg-border-"] {
|
||||
color: #5a5e66;
|
||||
color: #303133;
|
||||
}
|
||||
</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>
|
||||
</el-col>
|
||||
<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 :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 :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-row>
|
||||
|
||||
|
|
@ -111,18 +111,18 @@ Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes col
|
|||
<el-row :gutter="12">
|
||||
<el-col :span="6">
|
||||
<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-regular">Texto regular<div class="value">#5A5E66</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-placeholder">Texto de placeholder<div class="value">#B4BCCC</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">#303133</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">#C0C4CC</div></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<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-light">Borde ligero<div class="value">#DFE4ED</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-extra-light">Borde extra claro<div class="value">#EDF2FC</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">#E4E7ED</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">#F2F6FC</div></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -14,9 +14,9 @@ Este sitio, le permitirá obtener una vista previa del tema con un nuevo color e
|
|||
$--color-primary: teal;
|
||||
|
||||
/* 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:
|
||||
|
|
@ -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-success: #67c23a !default;
|
||||
$--color-warning: #eb9e05 !default;
|
||||
$--color-danger: #fa5555 !default;
|
||||
$--color-info: #878d99 !default;
|
||||
$--color-warning: #e6a23c !default;
|
||||
$--color-danger: #f56c6c !default;
|
||||
$--color-info: #909399 !default;
|
||||
|
||||
...
|
||||
```
|
||||
|
|
|
|||
|
|
@ -243,8 +243,6 @@ Si un diálogo está anidado en otro diálogo, se requiere append-to-body.
|
|||
```
|
||||
:::
|
||||
|
||||
:::
|
||||
|
||||
### Contenido centrado
|
||||
El contenido de Diálogo se puede centrar.
|
||||
|
||||
|
|
|
|||
|
|
@ -169,7 +169,7 @@
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.demo-form.demo-en-US {
|
||||
.demo-form.demo-es {
|
||||
.el-select .el-input {
|
||||
width: 360px;
|
||||
}
|
||||
|
|
@ -231,6 +231,8 @@
|
|||
}
|
||||
}
|
||||
.demo-dynamic {
|
||||
width: 500px;
|
||||
|
||||
.el-input {
|
||||
margin-right: 10px;
|
||||
width: 270px;
|
||||
|
|
|
|||
|
|
@ -207,6 +207,9 @@ Actualmente Element está disponible en los siguientes idiomas:
|
|||
<li>Slovenian (sl)</li>
|
||||
<li>Arabic (ar)</li>
|
||||
<li>Hebrew (he)</li>
|
||||
<li>Lithuanian (lt)</li>
|
||||
<li>Kazakh (kz)</li>
|
||||
<li>Hungarian (hu)</li>
|
||||
</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.
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<style>
|
||||
.demo-icon .source > i {
|
||||
color: #8492a6;
|
||||
color: #606266;
|
||||
margin: 0 20px;
|
||||
font-size: 1.5em;
|
||||
vertical-align: middle;
|
||||
|
|
@ -46,18 +46,24 @@
|
|||
|
||||
@utils-vertical-center;
|
||||
|
||||
& span {
|
||||
span {
|
||||
display: inline-block;
|
||||
line-height: normal;
|
||||
vertical-align: middle;
|
||||
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
|
||||
color: #99a9bf;
|
||||
}
|
||||
& i {
|
||||
i {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-size: 32px;
|
||||
margin-bottom: 15px;
|
||||
color: #8492a6;
|
||||
color: #606266;
|
||||
}
|
||||
.icon-name {
|
||||
display: inline-block;
|
||||
padding: 0 3px;
|
||||
height: 1em;
|
||||
color: #606266;
|
||||
}
|
||||
&:hover {
|
||||
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">
|
||||
<span>
|
||||
<i :class="'el-icon-' + name"></i>
|
||||
{{'el-icon-' + name}}
|
||||
<span class="icon-name">{{'el-icon-' + name}}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.demo-input.demo-en-US {
|
||||
.demo-input.demo-es {
|
||||
.el-select .el-input {
|
||||
width: 130px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ Rápido y facilmente crea un layout básico con 24 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
|
||||
<el-row>
|
||||
<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.
|
||||
|
||||
:::**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
|
||||
<el-row :gutter="20">
|
||||
<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.
|
||||
|
||||
:::**Demo**
|
||||
:::demo
|
||||
```html
|
||||
<el-row :gutter="20">
|
||||
<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.
|
||||
|
||||
:::**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
|
||||
<el-row :gutter="20">
|
||||
|
|
@ -248,7 +248,7 @@ Puedes especificar offsets para las 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
|
||||
<el-row type="flex" class="row-bg">
|
||||
<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.
|
||||
|
||||
:::**Demo**
|
||||
:::demo
|
||||
```html
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ Menú que provee la navegación para tu sitio.
|
|||
|
||||
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
|
||||
<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.
|
||||
|
||||
:::**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
|
||||
<el-row class="tac">
|
||||
|
|
@ -209,7 +209,7 @@ NavMenu vertical con sub-menús.
|
|||
|
||||
NavMenu vertical puede ser colapsado.
|
||||
|
||||
:::**Demo**
|
||||
:::demo
|
||||
```html
|
||||
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
|
||||
<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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| default-active | índice del menu-item activo | string | — | — |
|
||||
| default-openeds | arreglo que contiene las llaves del sub-menus activo | Array | — | — |
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ Si tiene que mostrar muchos datos en una página, utilice la paginación.
|
|||
|
||||
### 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
|
||||
<div class="block">
|
||||
<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.
|
||||
|
||||
:::**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
|
||||
<el-pagination
|
||||
small
|
||||
|
|
@ -90,7 +90,7 @@ Usa una paginación pequeña en caso de espacio limitado.
|
|||
|
||||
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
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
:::**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
|
||||
<el-popover
|
||||
|
|
@ -140,7 +140,7 @@ Similar a un Tooltip, Popover está construido con `Vue-popper`. Así que para a
|
|||
### Información 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
|
||||
<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`.
|
||||
|
||||
:::**Demo**
|
||||
:::demo
|
||||
```html
|
||||
<el-popover
|
||||
ref="popover5"
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
:::**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
|
||||
<el-progress :percentage="0"></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)
|
||||
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
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></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
|
||||
|
||||
:::**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
|
||||
<el-progress type="circle" :percentage="0"></el-progress>
|
||||
<el-progress type="circle" :percentage="25"></el-progress>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.demo-tooltip.demo-en-US {
|
||||
.demo-tooltip.demo-es {
|
||||
&:first-of-type .source {
|
||||
.el-button {
|
||||
width: 110px;
|
||||
|
|
|
|||
|
|
@ -32,43 +32,43 @@
|
|||
background-color: #67C23A;
|
||||
}
|
||||
.bg-warning {
|
||||
background-color: #EB9E05;
|
||||
background-color: #E6A23C;
|
||||
}
|
||||
.bg-danger {
|
||||
background-color: #FA5555;
|
||||
background-color: #F56C6C;
|
||||
}
|
||||
.bg-info {
|
||||
background-color: #878D99;
|
||||
background-color: #909399;
|
||||
}
|
||||
|
||||
.bg-text-primary {
|
||||
background-color: #2d2f33;
|
||||
background-color: #303133;
|
||||
}
|
||||
.bg-text-regular {
|
||||
background-color: #5a5e66;
|
||||
background-color: #606266;
|
||||
}
|
||||
.bg-text-secondary {
|
||||
background-color: #878d99;
|
||||
background-color: #909399;
|
||||
}
|
||||
.bg-text-placeholder {
|
||||
background-color: #b4bccc;
|
||||
background-color: #c0c4cc;
|
||||
}
|
||||
|
||||
.bg-border-base {
|
||||
background-color: #d8dce5;
|
||||
background-color: #dcdfe6;
|
||||
}
|
||||
.bg-border-light {
|
||||
background-color: #dfe4ed;
|
||||
background-color: #e4e7ed;
|
||||
}
|
||||
.bg-border-lighter {
|
||||
background-color: #e6ebf5;
|
||||
background-color: #ebeef5;
|
||||
}
|
||||
.bg-border-extra-light {
|
||||
background-color: #edf2fc;
|
||||
background-color: #f2f6fc;
|
||||
}
|
||||
|
||||
[class*=" bg-border-"] {
|
||||
color: #5a5e66;
|
||||
color: #303133;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -95,13 +95,13 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
|
|||
<div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>
|
||||
</el-col>
|
||||
<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 :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 :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-row>
|
||||
|
||||
|
|
@ -112,18 +112,18 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
|
|||
<el-row :gutter="12">
|
||||
<el-col :span="6">
|
||||
<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-regular">常规文字<div class="value">#5A5E66</div></div>
|
||||
<div class="demo-color-box bg-text-secondary">次要文字<div class="value">#878D99</div></div>
|
||||
<div class="demo-color-box bg-text-placeholder">占位文字<div class="value">#B4BCCC</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">#606266</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">#C0C4CC</div></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<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-light">二级边框<div class="value">#DFE4ED</div></div>
|
||||
<div class="demo-color-box bg-border-lighter">三级边框<div class="value">#E6EBF5</div></div>
|
||||
<div class="demo-color-box bg-border-extra-light">四级边框<div class="value">#EDF2FC</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">#E4E7ED</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">#F2F6FC</div></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
|
|||
|
|
@ -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-success: #67c23a !default;
|
||||
$--color-warning: #eb9e05 !default;
|
||||
$--color-danger: #fa5555 !default;
|
||||
$--color-info: #878d99 !default;
|
||||
$--color-warning: #e6a23c !default;
|
||||
$--color-danger: #f56c6c !default;
|
||||
$--color-info: #909399 !default;
|
||||
|
||||
...
|
||||
```
|
||||
|
|
|
|||
|
|
@ -220,6 +220,8 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
|
|||
<li>阿拉伯语（ar）</li>
|
||||
<li>希伯来语（he）</li>
|
||||
<li>立陶宛语（lt）</li>
|
||||
<li>哈萨克斯坦语（kz）</li>
|
||||
<li>匈牙利语（hu）</li>
|
||||
</ul>
|
||||
|
||||
如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。
|
||||
|
|
|
|||
|
|
@ -11,14 +11,7 @@
|
|||
</script>
|
||||
<style>
|
||||
.demo-icon .source > i {
|
||||
color: #5a5e66;
|
||||
margin: 0 20px;
|
||||
font-size: 1.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.demo-icon .source > i {
|
||||
color: #5a5e66;
|
||||
color: #606266;
|
||||
margin: 0 20px;
|
||||
font-size: 1.5em;
|
||||
vertical-align: middle;
|
||||
|
|
@ -64,14 +57,14 @@
|
|||
display: block;
|
||||
font-size: 32px;
|
||||
margin-bottom: 15px;
|
||||
color: #5a5e66;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.icon-name {
|
||||
display: inline-block;
|
||||
padding: 0 3px;
|
||||
height: 1em;
|
||||
color: #5a5e66;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -276,7 +276,7 @@
|
|||
| mode | 模式 | string | horizontal / vertical | vertical |
|
||||
| collapse | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）| boolean | — | false |
|
||||
| background-color | 菜单的背景色（仅支持 hex 格式） | string | — | #ffffff |
|
||||
| text-color | 菜单的文字颜色（仅支持 hex 格式） | string | — | #2d2f33 |
|
||||
| text-color | 菜单的文字颜色（仅支持 hex 格式） | string | — | #303133 |
|
||||
| active-text-color | 当前激活菜单的文字颜色（仅支持 hex 格式） | string | — | #409EFF |
|
||||
| default-active | 当前激活菜单的 index | string | — | — |
|
||||
| default-openeds | 当前打开的sub-menu的 key 数组 | Array | — | — |
|
||||
|
|
|
|||
|
|
@ -106,10 +106,7 @@
|
|||
"9": "Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.",
|
||||
"lang": "en-US",
|
||||
"titleSize": "34",
|
||||
"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)"
|
||||
"paraSize": "18"
|
||||
},
|
||||
"component": {},
|
||||
"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.",
|
||||
"paraHeight": "1.6",
|
||||
"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.",
|
||||
"lang": "es",
|
||||
"titleSize": "34",
|
||||
"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)"
|
||||
"paraSize": "18"
|
||||
},
|
||||
"component": {},
|
||||
"changelog": {
|
||||
"1": "Lista de cambios",
|
||||
"2": "en-US"
|
||||
"2": "es"
|
||||
},
|
||||
"design": {
|
||||
"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.",
|
||||
"paraHeight": "1.6",
|
||||
"placeholder1": "En construcción",
|
||||
"placeholder2": "Por favor espere mientras preparamos los recursos de diseño"
|
||||
"placeholder2": "Se están desarrollando más recursos"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -501,7 +501,7 @@
|
|||
],
|
||||
"es": [
|
||||
{
|
||||
"name": "Changelog-es",
|
||||
"name": "Changelog",
|
||||
"path": "/changelog"
|
||||
},
|
||||
{
|
||||
|
|
@ -517,23 +517,23 @@
|
|||
"children": [
|
||||
{
|
||||
"path": "/installation",
|
||||
"name": "Installation-es"
|
||||
"name": "Installation"
|
||||
},
|
||||
{
|
||||
"path": "/quickstart",
|
||||
"name": "Quick Start-es"
|
||||
"name": "Quick Start"
|
||||
},
|
||||
{
|
||||
"path": "/i18n",
|
||||
"name": "Internationalization-es"
|
||||
"name": "Internationalization"
|
||||
},
|
||||
{
|
||||
"path": "/custom-theme",
|
||||
"name": "Custom Theme-es"
|
||||
"name": "Custom Theme"
|
||||
},
|
||||
{
|
||||
"path": "/transition",
|
||||
"name": "Built-in transition-es"
|
||||
"name": "Built-in transition"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -545,27 +545,27 @@
|
|||
"list": [
|
||||
{
|
||||
"path": "/layout",
|
||||
"title": "Layout-es"
|
||||
"title": "Layout"
|
||||
},
|
||||
{
|
||||
"path": "/container",
|
||||
"title": "Layout Container-es"
|
||||
"title": "Layout Container"
|
||||
},
|
||||
{
|
||||
"path": "/color",
|
||||
"title": "Color-es"
|
||||
"title": "Color"
|
||||
},
|
||||
{
|
||||
"path": "/typography",
|
||||
"title": "Typography-es"
|
||||
"title": "Typography"
|
||||
},
|
||||
{
|
||||
"path": "/icon",
|
||||
"title": "Icon-es"
|
||||
"title": "Icon"
|
||||
},
|
||||
{
|
||||
"path": "/button",
|
||||
"title": "Button-es"
|
||||
"title": "Button"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -574,67 +574,67 @@
|
|||
"list": [
|
||||
{
|
||||
"path": "/radio",
|
||||
"title": "Radio-es"
|
||||
"title": "Radio"
|
||||
},
|
||||
{
|
||||
"path": "/checkbox",
|
||||
"title": "Checkbox-es"
|
||||
"title": "Checkbox"
|
||||
},
|
||||
{
|
||||
"path": "/input",
|
||||
"title": "Input-es"
|
||||
"title": "Input"
|
||||
},
|
||||
{
|
||||
"path": "/input-number",
|
||||
"title": "InputNumber-es"
|
||||
"title": "InputNumber"
|
||||
},
|
||||
{
|
||||
"path": "/select",
|
||||
"title": "Select-es"
|
||||
"title": "Select"
|
||||
},
|
||||
{
|
||||
"path": "/cascader",
|
||||
"title": "Cascader-es"
|
||||
"title": "Cascader"
|
||||
},
|
||||
{
|
||||
"path": "/switch",
|
||||
"title": "Switch-es"
|
||||
"title": "Switch"
|
||||
},
|
||||
{
|
||||
"path": "/slider",
|
||||
"title": "Slider-es"
|
||||
"title": "Slider"
|
||||
},
|
||||
{
|
||||
"path": "/time-picker",
|
||||
"title": "TimePicker-es"
|
||||
"title": "TimePicker"
|
||||
},
|
||||
{
|
||||
"path": "/date-picker",
|
||||
"title": "DatePicker-es"
|
||||
"title": "DatePicker"
|
||||
},
|
||||
{
|
||||
"path": "/datetime-picker",
|
||||
"title": "DateTimePicker-es"
|
||||
"title": "DateTimePicker"
|
||||
},
|
||||
{
|
||||
"path": "/upload",
|
||||
"title": "Upload-es"
|
||||
"title": "Upload"
|
||||
},
|
||||
{
|
||||
"path": "/rate",
|
||||
"title": "Rate-es"
|
||||
"title": "Rate"
|
||||
},
|
||||
{
|
||||
"path": "/color-picker",
|
||||
"title": "ColorPicker-es"
|
||||
"title": "ColorPicker"
|
||||
},
|
||||
{
|
||||
"path": "/transfer",
|
||||
"title": "Transfer-es"
|
||||
"title": "Transfer"
|
||||
},
|
||||
{
|
||||
"path": "/form",
|
||||
"title": "Form-es"
|
||||
"title": "Form"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -643,27 +643,27 @@
|
|||
"list": [
|
||||
{
|
||||
"path": "/table",
|
||||
"title": "Table-es"
|
||||
"title": "Table"
|
||||
},
|
||||
{
|
||||
"path": "/tag",
|
||||
"title": "Tag-es"
|
||||
"title": "Tag"
|
||||
},
|
||||
{
|
||||
"path": "/progress",
|
||||
"title": "Progress-es"
|
||||
"title": "Progress"
|
||||
},
|
||||
{
|
||||
"path": "/tree",
|
||||
"title": "Tree-es"
|
||||
"title": "Tree"
|
||||
},
|
||||
{
|
||||
"path": "/pagination",
|
||||
"title": "Pagination-es"
|
||||
"title": "Pagination"
|
||||
},
|
||||
{
|
||||
"path": "/badge",
|
||||
"title": "Badge-es"
|
||||
"title": "Badge"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -672,23 +672,23 @@
|
|||
"list": [
|
||||
{
|
||||
"path": "/alert",
|
||||
"title": "Alert-es"
|
||||
"title": "Alert"
|
||||
},
|
||||
{
|
||||
"path": "/loading",
|
||||
"title": "Loading-es"
|
||||
"title": "Loading"
|
||||
},
|
||||
{
|
||||
"path": "/message",
|
||||
"title": "Message-es"
|
||||
"title": "Message"
|
||||
},
|
||||
{
|
||||
"path": "/message-box",
|
||||
"title": "MessageBox-es"
|
||||
"title": "MessageBox"
|
||||
},
|
||||
{
|
||||
"path": "/notification",
|
||||
"title": "Notification-es"
|
||||
"title": "Notification"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -697,23 +697,23 @@
|
|||
"list": [
|
||||
{
|
||||
"path": "/menu",
|
||||
"title": "NavMenu-es"
|
||||
"title": "NavMenu"
|
||||
},
|
||||
{
|
||||
"path": "/tabs",
|
||||
"title": "Tabs-es"
|
||||
"title": "Tabs"
|
||||
},
|
||||
{
|
||||
"path": "/breadcrumb",
|
||||
"title": "Breadcrumb-es"
|
||||
"title": "Breadcrumb"
|
||||
},
|
||||
{
|
||||
"path": "/dropdown",
|
||||
"title": "Dropdown-es"
|
||||
"title": "Dropdown"
|
||||
},
|
||||
{
|
||||
"path": "/steps",
|
||||
"title": "Steps-es"
|
||||
"title": "Steps"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -722,27 +722,27 @@
|
|||
"list": [
|
||||
{
|
||||
"path": "/dialog",
|
||||
"title": "Dialog-es"
|
||||
"title": "Dialog"
|
||||
},
|
||||
{
|
||||
"path": "/tooltip",
|
||||
"title": "Tooltip-es"
|
||||
"title": "Tooltip"
|
||||
},
|
||||
{
|
||||
"path": "/popover",
|
||||
"title": "Popover-es"
|
||||
"title": "Popover"
|
||||
},
|
||||
{
|
||||
"path": "/card",
|
||||
"title": "Card-es"
|
||||
"title": "Card"
|
||||
},
|
||||
{
|
||||
"path": "/carousel",
|
||||
"title": "Carousel-es"
|
||||
"title": "Carousel"
|
||||
},
|
||||
{
|
||||
"path": "/collapse",
|
||||
"title": "Collapse-es"
|
||||
"title": "Collapse"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -138,9 +138,9 @@
|
|||
<div class="page-changelog">
|
||||
<div class="heading">
|
||||
<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>
|
||||
Changelog
|
||||
Lista de cambios
|
||||
</div>
|
||||
<ul class="timeline" ref="timeline">
|
||||
</ul>
|
||||
|
|
@ -148,7 +148,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ChangeLog from '../../../CHANGELOG.en-US.md';
|
||||
import ChangeLog from '../../../CHANGELOG.es.md';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -26,57 +26,57 @@
|
|||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<h2>Design Disciplines</h2>
|
||||
<h2>Disciplinas de diseño</h2>
|
||||
<el-row :gutter="14" class="cards">
|
||||
<el-col :xs="12" :sm="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/consistency.png" alt="Consistency">
|
||||
<h4>Consistency</h4>
|
||||
<h4>Consistencia</h4>
|
||||
<span></span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/feedback.png" alt="Feedback">
|
||||
<h4>Feedback</h4>
|
||||
<h4>Comentarios</h4>
|
||||
<span></span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/efficiency.png" alt="Efficiency">
|
||||
<h4>Efficiency</h4>
|
||||
<h4>Eficiencia</h4>
|
||||
<span></span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/controllability.png" alt="Controllability">
|
||||
<h4>Controllability</h4>
|
||||
<h4>Control</h4>
|
||||
<span></span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3>Consistency</h3>
|
||||
<h3>Consistencia</h3>
|
||||
<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>Consistent within interface: </strong>all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</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>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>
|
||||
<h3>Feedback</h3>
|
||||
<h3>Comentarios</h3>
|
||||
<ul>
|
||||
<li><strong>Operation feedback: </strong>enable the users to clearly perceive their operations by style updates and interactive effects.</li>
|
||||
<li><strong>Visual feedback: </strong>reflect current state by updating or rearranging elements of the page.</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>Comentarios visuales: </strong>Refleja el estado actual al actualizar o reorganizar los elementos de la página.</li>
|
||||
</ul>
|
||||
<h3>Efficiency</h3>
|
||||
<h3>Eficiencia</h3>
|
||||
<ul>
|
||||
<li><strong>Simplify the process: </strong>keep operating process simple and intuitive.</li>
|
||||
<li><strong>Definite and clear: </strong>enunciate your intentions clearly so that the users can quickly understand and make decisions.</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>Simplifica el proceso: </strong>Mantiene el proceso operativo simple e intuitivo.</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>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>
|
||||
<h3>Controllability</h3>
|
||||
<h3>Control</h3>
|
||||
<ul>
|
||||
<li><strong>Decision making: </strong>giving advices about operations is acceptable, but do not make decisions for the users.</li>
|
||||
<li><strong>Controlled consequences: </strong>users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</li>
|
||||
<li><strong>Toma de decisiones: </strong>Brindar consejos sobres las operaciones es aceptable, pero no tomar desiciones para los usuarios.</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>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -78,11 +78,11 @@
|
|||
navsData: [
|
||||
{
|
||||
path: '/design',
|
||||
name: 'Design Disciplines'
|
||||
name: 'Disciplinas de diseño'
|
||||
},
|
||||
{
|
||||
path: '/nav',
|
||||
name: 'Navigation'
|
||||
name: 'Navegación'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -237,8 +237,8 @@
|
|||
<div>
|
||||
<div class="banner">
|
||||
<div class="banner-desc">
|
||||
<h1>A Desktop UI Library</h1>
|
||||
<p>Element, a Vue 2.0 based component library for developers, designers and product managers</p>
|
||||
<h1>Un kit de interfaz de usuario para la web</h1>
|
||||
<p>Element, una librería de componentes basada en Vue 2.0 para desarrolladores, diseñadores y jefes de producto</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jumbotron">
|
||||
|
|
@ -264,36 +264,36 @@
|
|||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/guide.png" alt="">
|
||||
<h3>Guide</h3>
|
||||
<p>Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.</p>
|
||||
<h3>Guía</h3>
|
||||
<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
|
||||
active-class="active"
|
||||
to="/en-US/guide/design"
|
||||
exact>View Detail
|
||||
to="/es/guide/design"
|
||||
exact>Ver detalle
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/component.png" alt="">
|
||||
<h3>Component</h3>
|
||||
<p>Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.</p>
|
||||
<h3>Componentes</h3>
|
||||
<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
|
||||
active-class="active"
|
||||
to="/en-US/component/layout"
|
||||
exact>View Detail
|
||||
to="/es/component/layout"
|
||||
exact>Ver detalle
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/resource.png" alt="">
|
||||
<h3>Resource</h3>
|
||||
<p>Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.</p>
|
||||
<h3>Recursos</h3>
|
||||
<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
|
||||
active-class="active"
|
||||
to="/en-US/resource"
|
||||
exact>View Detail
|
||||
to="/es/resource"
|
||||
exact>Ver detalle
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -76,42 +76,42 @@
|
|||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<h2>Navigation</h2>
|
||||
<h2>Navegación</h2>
|
||||
<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 class="block">
|
||||
<h3>Choose the right navigation</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>
|
||||
<h3>Elige la navegación correcta</h3>
|
||||
<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 class="block">
|
||||
<h3>Side Navigation</h3>
|
||||
<h3>Navegación lateral</h3>
|
||||
<el-row :gutter="20">
|
||||
<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 :span="15" class="nav-demos">
|
||||
<img src="~examples/assets/images/navbar_1.png" alt="Level 1 categories" @click="enlarge(846, $event)">
|
||||
<h5>Level 1 categories</h5>
|
||||
<p>Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.</p>
|
||||
<img src="~examples/assets/images/navbar_2.png" alt="Level 2 categories" @click="enlarge(846, $event)">
|
||||
<h5>Level 2 categories</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>
|
||||
<img src="~examples/assets/images/navbar_3.png" alt="Level 3 categories" @click="enlarge(846, $event)">
|
||||
<h5>Level 3 categories</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>
|
||||
<img src="~examples/assets/images/navbar_1.png" alt="Categorías de Nivel 1" @click="enlarge(846, $event)">
|
||||
<h5>Categorías de Nivel 1</h5>
|
||||
<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="Categorías de Nivel 2" @click="enlarge(846, $event)">
|
||||
<h5>Categorías de Nivel 2</h5>
|
||||
<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="Categorías de Nivel 3" @click="enlarge(846, $event)">
|
||||
<h5>Categorías de Nivel 3</h5>
|
||||
<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-row>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h3>Top Navigation</h3>
|
||||
<h3>Navegación superior</h3>
|
||||
<el-row>
|
||||
<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 :span="14" class="nav-demos">
|
||||
<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-row>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -120,41 +120,41 @@
|
|||
</style>
|
||||
<template>
|
||||
<div class="page-container page-resource">
|
||||
<h2>Resource</h2>
|
||||
<div class="resource-placeholder">
|
||||
<img src="~examples/assets/images/resource-placeholder.svg" alt="">
|
||||
<h4>Under construction</h4>
|
||||
<p>Please wait while we prepare the design resources</p>
|
||||
</div>
|
||||
<h2>Recursos</h2>
|
||||
<!--<div class="resource-placeholder">-->
|
||||
<!--<img src="~examples/assets/images/resource-placeholder.svg" alt="">-->
|
||||
<!--<h4>En construcción</h4>-->
|
||||
<!--<p>Se están desarrollando más recursos</p>-->
|
||||
<!--</div>-->
|
||||
|
||||
<!--<p>Under construction.</p>-->
|
||||
<!--<div class="cards">-->
|
||||
<!--<ul class="container">-->
|
||||
<p>Se están desarrollando más recursos</p>
|
||||
<div class="cards">
|
||||
<ul class="container">
|
||||
<!--<li>-->
|
||||
<!--<div class="card">-->
|
||||
<!--<img src="~examples/assets/images/Axure-Components.svg" alt="">-->
|
||||
<!--<h3>Axure Components</h3>-->
|
||||
<!--<p>By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.</p>-->
|
||||
<!--<a href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib">Download</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>-->
|
||||
<!--<h3>Componetes de Axure</h3>-->
|
||||
<!--<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">Descarga</a>-->
|
||||
<!--</div>-->
|
||||
<!--</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>-->
|
||||
<!--<div class="card">-->
|
||||
<!--<img src="~examples/assets/images/Module.svg" alt="">-->
|
||||
<!--<h3>Interaction Design Documentation</h3>-->
|
||||
<!--<p>Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.</p>-->
|
||||
<!--<a href="https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip">Download</a>-->
|
||||
<!--<h3>Documentación de diseño de interacción</h3>-->
|
||||
<!--<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">Descarga</a>-->
|
||||
<!--</div>-->
|
||||
<!--</li>-->
|
||||
<!--</ul>-->
|
||||
<!--</div>-->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@
|
|||
<div class="page-changelog">
|
||||
<div class="heading">
|
||||
<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>
|
||||
<%= 1 >
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -121,15 +121,15 @@
|
|||
<template>
|
||||
<div class="page-container page-resource">
|
||||
<h2><%= 1 ></h2>
|
||||
<div class="resource-placeholder">
|
||||
<img src="~examples/assets/images/resource-placeholder.svg" alt="">
|
||||
<h4><%= placeholder1 ></h4>
|
||||
<p><%= placeholder2 ></p>
|
||||
</div>
|
||||
<!--<div class="resource-placeholder">-->
|
||||
<!--<img src="~examples/assets/images/resource-placeholder.svg" alt="">-->
|
||||
<!--<h4><%= placeholder1 ></h4>-->
|
||||
<!--<p><%= placeholder2 ></p>-->
|
||||
<!--</div>-->
|
||||
|
||||
<!--<p><%= 2 ></p>-->
|
||||
<!--<div class="cards">-->
|
||||
<!--<ul class="container">-->
|
||||
<p><%= placeholder2 ></p>
|
||||
<div class="cards">
|
||||
<ul class="container">
|
||||
<!--<li>-->
|
||||
<!--<div class="card">-->
|
||||
<!--<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>-->
|
||||
<!--</div>-->
|
||||
<!--</li>-->
|
||||
<!--<li>-->
|
||||
<!--<div class="card">-->
|
||||
<!--<img src="~examples/assets/images/Sketch-Template.svg" alt="">-->
|
||||
<!--<h3><%= 6 ></h3>-->
|
||||
<!--<p><%= 7 ></p>-->
|
||||
<!--<a href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch"><%= 5 ></a>-->
|
||||
<!--</div>-->
|
||||
<!--</li>-->
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/Sketch-Template.svg" alt="">
|
||||
<h3><%= 6 ></h3>
|
||||
<p><%= 7 ></p>
|
||||
<a href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"><%= 5 ></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--<li>-->
|
||||
<!--<div class="card">-->
|
||||
<!--<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>-->
|
||||
<!--</div>-->
|
||||
<!--</li>-->
|
||||
<!--</ul>-->
|
||||
<!--</div>-->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ const registerRoute = (navConfig) => {
|
|||
description: page.description,
|
||||
lang
|
||||
},
|
||||
name: 'component-' + (page.title || page.name),
|
||||
name: 'component-' + lang + (page.title || page.name),
|
||||
component: component.default || component
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -198,7 +198,7 @@
|
|||
if (!this.splitButton) { // 自定义
|
||||
this.triggerElm.setAttribute('role', 'button');
|
||||
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() {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
@click.stop="toggleMenu"
|
||||
ref="tags"
|
||||
:style="{ 'max-width': inputWidth - 32 + 'px' }">
|
||||
<div v-if="collapseTags && selected.length">
|
||||
<span v-if="collapseTags && selected.length">
|
||||
<el-tag
|
||||
:closable="!disabled"
|
||||
size="small"
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
disable-transitions>
|
||||
<span class="el-select__tags-text">+ {{ selected.length - 1 }}</span>
|
||||
</el-tag>
|
||||
</div>
|
||||
</span>
|
||||
<transition-group @after-leave="resetInputHeight" v-if="!collapseTags">
|
||||
<el-tag
|
||||
v-for="item in selected"
|
||||
|
|
|
|||
|
|
@ -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-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
|
||||
|
||||
$--color-success: #5cb87a !default;
|
||||
$--color-success: #67c23a !default;
|
||||
$--color-warning: #e6a23c !default;
|
||||
$--color-danger: #fa5555 !default;
|
||||
$--color-info: #878d99 !default;
|
||||
$--color-danger: #f56c6c !default;
|
||||
$--color-info: #909399 !default;
|
||||
|
||||
$--color-success-light: mix($--color-white, $--color-success, 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-info-lighter: mix($--color-white, $--color-info, 90%) !default;
|
||||
|
||||
$--color-text-primary: #2d2f33 !default;
|
||||
$--color-text-regular: #5a5e66 !default;
|
||||
$--color-text-secondary: #878d99 !default;
|
||||
$--color-text-placeholder: #b4bccc !default;
|
||||
$--color-text-primary: #303133 !default;
|
||||
$--color-text-regular: #606266 !default;
|
||||
$--color-text-secondary: #909399 !default;
|
||||
$--color-text-placeholder: #c0c4cc !default;
|
||||
|
||||
/* Link
|
||||
-------------------------- */
|
||||
|
|
@ -58,10 +58,10 @@ $--background-color-base: #f5f7fa !default;
|
|||
-------------------------- */
|
||||
$--border-width-base: 1px !default;
|
||||
$--border-style-base: solid !default;
|
||||
$--border-color-base: #d8dce5 !default;
|
||||
$--border-color-light: #dfe4ed !default;
|
||||
$--border-color-lighter: #e6ebf5 !default;
|
||||
$--border-color-extra-light: #edf2fc !default;
|
||||
$--border-color-base: #dcdfe6 !default;
|
||||
$--border-color-light: #e4e7ed !default;
|
||||
$--border-color-lighter: #ebeef5 !default;
|
||||
$--border-color-extra-light: #f2f6fc !default;
|
||||
$--border-color-hover: $--color-text-placeholder !default;
|
||||
$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
|
||||
$--border-radius-base: 4px !default;
|
||||
|
|
|
|||
Loading…
Reference in New Issue