Skip to content

E
Element
Commit 097745f9 authored by Leopoldthecoder's avatar Leopoldthecoder
Browse files
Options

[build] 1.0.0

parent 3b39cb71
Hide whitespace changes
Inline Side-by-side
Showing with 1850 additions and 2 deletions
examples/pages/en-US/changelog.vue 0 → 100644
View file @ 097745f9
<style>
.page-changelog {
padding-bottom: 100px;
.fr {
float: right;
padding: 0;
a {
display: block;
padding: 10px 15px;
color: #475669;
}
&:hover a {
color: #20a0ff;
}
}
.heading {
margin-bottom: 40px;
}
.timeline {
margin: 0 0 0 105px;
padding-left: 25px;
position: relative;
color: #5e6d82;
&:before {
content: '';
width: 1px;
height: 100%;
position: absolute;
left: 0;
top: 10px;
background-color: #eaeefa;
}
> li {
list-style: none;
position: relative;
line-height: 1.8;
&:not(:last-child) {
margin-bottom: 50px;
}
&:first-child {
margin-top: -10px;
h3:before {
left: -33px;
top: 10px;
width: 17px;
height: @width;
background-color: #20a0ff;
border: 0;
}
}
}
ul {
padding-left: 0;
}
li li {
font-size: 14px;
list-style: none;
padding-left: 0;
&:before {
content: '';
circle: 4px #5e6d82;
margin-right: 5px;
display: inline-block;
vertical-align: middle;
}
}
h3 {
margin: 0 0 10px;
&:before {
content: '';
display: block;
position: absolute;
left: -31px;
top: 13px;
circle: 13px transparent;
border: 2px solid #20a0ff;
box-sizing: border-box;
background-color: #fff;
}
a {
opacity: 1;
float: none;
margin-left: 0;
color: inherit;
}
}
h4 {
margin: 50px 0 10px;
}
p {
margin: 0;
}
em {
position: absolute;
left: -127px;
font-style: normal;
top: 6px;
font-size: 14px;
color: #99a9bf;
}
}
}
</style>
<template>
<div class="page-changelog">
<div class="heading">
<el-button class="fr">
<a href="https://github.com/ElemeFE/element/releases" target="_blank">Github Releases</a>
</el-button>
Changelog
</div>
<ul class="timeline" ref="timeline">
</ul>
<change-log ref="changeLog"></change-log>
</div>
</template>
<script>
import ChangeLog from '../../../CHANGELOG.en-US.md';
export default {
components: {
ChangeLog
},
data() {
return {
count: 3
};
},
mounted() {
const changeLog = this.$refs.changeLog;
const changeLogNodes = changeLog.$el.children;
let a = changeLogNodes[1].querySelector('a');
a && a.remove();
let release = changeLogNodes[1].textContent.trim();
let fragments = `<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v${release}" target="_blank">${release}</a></h3>`;
for (let len = changeLogNodes.length, i = 2; i < len; i++) {
let node = changeLogNodes[i];
a = changeLogNodes[i].querySelector('a');
a && a.remove();
if (node.tagName !== 'H3') {
fragments += changeLogNodes[i].outerHTML;
} else {
release = changeLogNodes[i].textContent.trim();
fragments += `</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v${release}" target="_blank">${release}</a></h3>`;
}
}
fragments = fragments.replace(/#(\d+)/g, '<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>');
this.$refs.timeline.innerHTML = `${fragments}</li>`;
changeLog.$el.remove();
}
};
</script>
examples/pages/en-US/component.vue 0 → 100644
View file @ 097745f9
<style>
.page-component {
padding-bottom: 95px;
}
.page-component {
.content {
margin-left: -1px;
> {
h3 {
margin: 45px 0 15px;
}
table {
border-collapse: collapse;
width: 100%;
background-color: #fff;
color: #5e6d82;
font-size: 14px;
margin-bottom: 45px;
strong {
font-weight: normal;
}
th {
text-align: left;
border-top: 1px solid #eaeefb;
background-color: #EFF2F7;
}
td, th {
border-bottom: 1px solid #eaeefb;
padding: 10px;
}
th:first-child, td:first-child {
padding-left: 10px;
}
}
}
}
}
</style>
<template>
<div class="page-container page-component">
<el-row>
<el-col :span="6">
<side-nav :data="navsData[lang]" :base="`/${ lang }/component`"></side-nav>
</el-col>
<el-col :span="18">
<router-view class="content"></router-view>
<footer-nav></footer-nav>
</el-col>
</el-row>
</div>
</template>
<script>
import navsData from '../../nav.config.json';
export default {
data() {
return {
lang: this.$route.meta.lang,
navsData
};
}
};
</script>
examples/pages/en-US/design.vue 0 → 100644
View file @ 097745f9
<style scoped>
.cards {
margin: 30px 0 70px;
}
.card {
background: #fbfcfd;
height: 204px;
text-align: center;
img {
margin: 40px auto 25px;
width: 80px;
height: 80px;
}
h4 {
font-size: 18px;
color: #1f2d3d;
font-weight: normal;
margin: 0;
}
span {
font-size: 14px;
color: #99a9bf;
}
}
</style>
<template>
<div>
<h2>Design Disciplines</h2>
<el-row :gutter="14" class="cards">
<el-col :span="6">
<div class="card">
<img src="~examples/assets/images/consistency.png" alt="Consistency">
<h4>Consistency</h4>
<span></span>
</div>
</el-col>
<el-col :span="6">
<div class="card">
<img src="~examples/assets/images/feedback.png" alt="Feedback">
<h4>Feedback</h4>
<span></span>
</div>
</el-col>
<el-col :span="6">
<div class="card">
<img src="~examples/assets/images/efficiency.png" alt="Efficiency">
<h4>Efficiency</h4>
<span></span>
</div>
</el-col>
<el-col :span="6">
<div class="card">
<img src="~examples/assets/images/controllability.png" alt="Controllability">
<h4>Controllability</h4>
<span></span>
</ul>
</el-col>
</el-row>
<h3>Consistency</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>
</ul>
<h3>Feedback</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>
</ul>
<h3>Efficiency</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>
</ul>
<h3>Controllability</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>
</ul>
</div>
</template>
examples/pages/en-US/guide.vue 0 → 100644
View file @ 097745f9
<style>
.page-guide {
padding: 55px 0 95px;
.content {
padding-left: 25px;
margin-left: -1px;
h2 {
margin-bottom: 10px;
}
h3 {
font-size: 22px;
font-weight: normal;
margin: 0 0 30px;
color: #1f2d3d;
}
p {
line-height: 1.6;
font-size: 14px;
color: #5e6d82;
}
ul {
margin-bottom: 50px;
padding-left: 0;
}
li {
font-size: 14px;
margin-bottom: 10px;
color: #99a9bf;
list-style: none;
&:before {
content: '';
display: inline-block;
width: 4px;
height: @width;
border-radius: 50%;
vertical-align: middle;
background-color: #5e6d82;
margin-right: 5px;
}
strong {
color: #5e6d82;
font-weight: 400;
}
}
}
}
</style>
<template>
<div class="page-container page-guide">
<el-row>
<el-col :span="5">
<side-nav :data="navsData" :base="`/${ lang }/guide`"></side-nav>
</el-col>
<el-col :span="19">
<router-view class="content"></router-view>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
lang: this.$route.meta.lang,
navsData: [
{
path: '/design',
name: 'Design Disciplines'
},
{
path: '/nav',
name: 'Navigation'
}
]
};
}
};
</script>
examples/pages/en-US/index.vue 0 → 100644
View file @ 097745f9
<style scoped>
.actor {
min-height: 65px;
&:after {
content: '';
width: 6px;
height: 50px;
vertical-align: -8px;
margin-left: 5px;
background-color: #fff;
display: inline-block;
animation: blink 400ms infinite alternate;
}
}
.banner {
position: relative;
height: 420px;
color: #fff;
margin-bottom: 130px;
.container {
position: relative;
}
img {
position: absolute;
top: 15px;
right: -10px;
}
}
.banner-sky {
position: absolute;
top: -150px;
bottom: -15px;
width: 100%;
margin-top: -140px;
transform: skewY(-5deg);
transform-origin: center;
background-image: linear-gradient(180deg, #0d1a44 13%, #3c4f91 56%, #5fc1e4 100%);
}
img.banner-stars {
top: -10px;
left: 50%;
transform: translateX(-50%);
}
.banner-desc {
padding-top: 110px;
padding-left: 30px;
font-size: 42px;
position: relative;
z-index: 10;
h2 {
font-size: 50px;
margin: 0;
}
p {
font-size: 14px;
opacity: .8;
width: 420px;
line-height: 1.6;
padding-left: 3px;
}
}
.cards {
margin: 0 auto 110px;
width: 1140px;
.container {
@utils-clearfix;
padding: 0;
margin: 0 -11px;
width: auto;
}
li {
width: 33.33333%;
padding: 0 19px;
box-sizing: border-box;
float: left;
list-style: none;
}
img {
width: 160px;
height: 120px;
}
}
.card {
height: 430px;
width: 100%;
background:#ffffff;
border:1px solid #eaeefb;
border-radius:5px;
box-sizing: border-box;
text-align: center;
position: relative;
transition: all .3s ease-in-out;
bottom: 0;
img {
margin: 66px auto 60px;
}
h3 {
margin: 0;
font-size: 18px;
color: #1f2f3d;
font-weight: normal;
}
p {
font-size: 14px;
color: #99a9bf;
padding: 0 25px;
line-height: 1.6;
}
a {
height: 53px;
line-height: 52px;
font-size: 14px;
color: #20a0ff;
text-align: center;
border: 0;
border-top: 1px solid #eaeefb;
padding: 0;
cursor: pointer;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background-color: #fff;
border-radius: 0 0 5px 5px;
transition: all .3s;
text-decoration: none;
display: block;
&:hover {
background-color: #20a0ff;
color: #fff;
background: #20a0ff;
}
}
&:hover {
bottom: 6px;
box-shadow: 0px 6px 18px 0px rgba(232,237,250,0.50);
}
}
@keyframes blink {
from { opacity: 0; }
to { opacity: 1; }
}
@media (max-width: 1140px) {
.cards {
width: 100%;
}
}
</style>
<template>
<div>
<div class="banner">
<div class="banner-sky"></div>
<img class="banner-stars" src="~examples/assets/images/stars.png" alt="Element">
<div class="container">
<div class="banner-desc">
<h2>A Desktop UI Library</h2>
<div id="line2" class="actor"></div>
<p>Element, a Vue 2.0 based component library for developers, designers and product managers, with a set of design resources.</p>
</div>
<img src="~examples/assets/images/banner-bg.svg" alt="Element">
</div>
</div>
<div class="cards">
<ul class="container">
<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>
<router-link
active-class="active"
to="/guide/design"
exact>View Detail
</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>
<router-link
active-class="active"
to="/component/layout"
exact>View Detail
</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>
<router-link
active-class="active"
to="/resource"
exact>View Detail
</router-link>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
import theaterJS from 'theaterjs';
export default {
mounted() {
function typing(theater) {
theater
.addScene('product designer', 1800, -16, 800)
.addScene('UI designer', 1800, -11, 800)
.addScene('UX designer', 1800, -11, 800)
.addScene('product manager', 1800, -15, 800)
.addScene('FE developer', 1800, -12, 800)
.addScene((done) => {
typing(theater);
done();
});
}
var theater = theaterJS({ maxSpeed: 100 });
theater
.on('type:start, erase:start', function() {
theater.getCurrentActor().$element.classList.add('typing');
})
.on('type:end, erase:end', function() {
theater.getCurrentActor().$element.classList.remove('typing');
});
theater
.addActor('line2', { speed: 1, accuracy: 1 })
.addScene(2600)
.addScene('line2:Just for ', 500)
.addScene((done) => {
typing(theater);
done();
});
}
};
</script>
examples/pages/en-US/nav.vue 0 → 100644
View file @ 097745f9
<style scoped>
h3 {
margin-bottom: 15px;
}
.block {
margin-bottom: 55px;
}
p {
margin: 0 0 15px;
}
.nav-demos {
p {
margin-bottom: 50px;
}
h5 {
margin: 0;
}
img {
padding: 15px;
background-color: #F9FAFC;
width: 100%;
margin-bottom: 15px;
cursor: pointer;
}
}
.dialog-img {
position: fixed;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
-webkit-overflow-scrolling: touch;
outline: 0;
.imgWrap {
margin: 0 auto;
position: relative;
top: 100px;
padding-bottom: 50px;
}
img {
display: block;
width: 100%;
}
}
.mask {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #373737;
background-color: rgba(55, 55, 55, 0.6);
height: 100%;
z-index: 1000;
}
.zoom-enter-active,
.zoom-leave-active {
transition: transform .3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.zoom-enter,
.zoom-leave-active {
transform: scale(0.3);
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
</style>
<template>
<div>
<h2>Navigation</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>
</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>
</div>
<div class="block">
<h3>Side Navigation</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>
</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>
</el-col>
</el-row>
</div>
<div class="block">
<h3>Top Navigation</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>
</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>
</el-col>
</el-row>
</div>
<transition name="fade">
<div class="mask" v-show="showDialog" @click="showDialog = false"></div>
</transition>
<transition name="zoom">
<div class="dialog-img" :style='imgWrapStyle' v-show="showDialog" @click="showDialog = false">
<div class="imgWrap" :style="imgStyle">
<img :src="imgUrl" alt="">
</div>
</div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
imgUrl: '',
imgBound: {},
showDialog: false,
imgStyle: {},
imgWrapStyle: {}
};
},
watch: {
showDialog(val) {
document.body.style.overflow = val ? 'hidden' : '';
}
},
methods: {
enlarge(imgWidth, ev) {
var imgNode = ev.target;
// var bound = imgNode.getBoundingClientRect();
var offset = {};
var doc = document;
offset.left = (doc.body.scrollWidth - imgWidth) / 2;
offset.top = 100;
this.imgUrl = imgNode.src;
this.imgBound = imgNode.getBoundingClientRect();
this.imgWrapStyle.transformOrigin = `${ev.clientX}px ${ev.clientY}px`;
// this.imgStyle.transformOrigin = `${ev.clientX}px ${ev.clientY}px`;
this.imgStyle.width = imgWidth + 'px';
this.showDialog = true;
}
}
};
</script>
examples/pages/en-US/resource.vue 0 → 100644
View file @ 097745f9
<style scoped>
.page-resource {
padding-top: 55px;
}
.cards {
margin: 35px auto 110px;
.container {
@utils-clearfix;
padding: 0;
margin: 0 -11px;
width: auto;
}
li {
width: 33.33333%;
padding: 0 11px;
box-sizing: border-box;
float: left;
list-style: none;
}
}
h2 {
font-size: 28px;
margin: 0;
}
p {
font-size: 14px;
color: #5e6d82;
}
.card {
height: 394px;
width: 100%;
background:#ffffff;
border:1px solid #eaeefb;
border-radius:5px;
box-sizing: border-box;
text-align: center;
position: relative;
transition: bottom .3s;
bottom: 0;
img {
margin: 75px auto 35px;
height: 87px;
}
h3 {
margin: 0 0 10px;
font-size: 18px;
color: #1f2f3d;
font-weight: normal;
height: 22px;
}
p {
font-size: 14px;
color: #99a9bf;
padding: 0 30px;
margin: 0;
line-height: 1.6;
}
a {
height: 42px;
width: 190px;
display: inline-block;
line-height: @height;
font-size: 14px;
background-color: #20a0ff;
color: #fff;
text-align: center;
border: 0;
padding: 0;
cursor: pointer;
border-radius: 2px;
transition: all .3s;
text-decoration: none;
margin-top: 20px;
}
}
</style>
<template>
<div class="page-container page-resource">
<h2>Resource</h2>
<p>Here you can download design resources and tools that shaped Element UI. More design resources are being prepared.</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>
</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>
</div>
</li>
</ul>
</div>
</div>
</template>
examples/pages/zh-CN/changelog.vue 0 → 100644
View file @ 097745f9
<style>
.page-changelog {
padding-bottom: 100px;
.fr {
float: right;
padding: 0;
a {
display: block;
padding: 10px 15px;
color: #475669;
}
&:hover a {
color: #20a0ff;
}
}
.heading {
margin-bottom: 40px;
}
.timeline {
margin: 0 0 0 105px;
padding-left: 25px;
position: relative;
color: #5e6d82;
&:before {
content: '';
width: 1px;
height: 100%;
position: absolute;
left: 0;
top: 10px;
background-color: #eaeefa;
}
> li {
list-style: none;
position: relative;
line-height: 1.8;
&:not(:last-child) {
margin-bottom: 50px;
}
&:first-child {
margin-top: -10px;
h3:before {
left: -33px;
top: 10px;
width: 17px;
height: @width;
background-color: #20a0ff;
border: 0;
}
}
}
ul {
padding-left: 0;
}
li li {
font-size: 14px;
list-style: none;
padding-left: 0;
&:before {
content: '';
circle: 4px #5e6d82;
margin-right: 5px;
display: inline-block;
vertical-align: middle;
}
}
h3 {
margin: 0 0 10px;
&:before {
content: '';
display: block;
position: absolute;
left: -31px;
top: 13px;
circle: 13px transparent;
border: 2px solid #20a0ff;
box-sizing: border-box;
background-color: #fff;
}
a {
opacity: 1;
float: none;
margin-left: 0;
color: inherit;
}
}
h4 {
margin: 50px 0 10px;
}
p {
margin: 0;
}
em {
position: absolute;
left: -127px;
font-style: normal;
top: 6px;
font-size: 14px;
color: #99a9bf;
}
}
}
</style>
<template>
<div class="page-changelog">
<div class="heading">
<el-button class="fr">
<a href="https://github.com/ElemeFE/element/releases" target="_blank">Github Releases</a>
</el-button>
更新日志
</div>
<ul class="timeline" ref="timeline">
</ul>
<change-log ref="changeLog"></change-log>
</div>
</template>
<script>
import ChangeLog from '../../../CHANGELOG.zh-CN.md';
export default {
components: {
ChangeLog
},
data() {
return {
count: 3
};
},
mounted() {
const changeLog = this.$refs.changeLog;
const changeLogNodes = changeLog.$el.children;
let a = changeLogNodes[1].querySelector('a');
a && a.remove();
let release = changeLogNodes[1].textContent.trim();
let fragments = `<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v${release}" target="_blank">${release}</a></h3>`;
for (let len = changeLogNodes.length, i = 2; i < len; i++) {
let node = changeLogNodes[i];
a = changeLogNodes[i].querySelector('a');
a && a.remove();
if (node.tagName !== 'H3') {
fragments += changeLogNodes[i].outerHTML;
} else {
release = changeLogNodes[i].textContent.trim();
fragments += `</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v${release}" target="_blank">${release}</a></h3>`;
}
}
fragments = fragments.replace(/#(\d+)/g, '<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>');
this.$refs.timeline.innerHTML = `${fragments}</li>`;
changeLog.$el.remove();
}
};
</script>
examples/pages/zh-CN/component.vue 0 → 100644
View file @ 097745f9
<style>
.page-component {
padding-bottom: 95px;
}
.page-component {
.content {
margin-left: -1px;
> {
h3 {
margin: 45px 0 15px;
}
table {
border-collapse: collapse;
width: 100%;
background-color: #fff;
color: #5e6d82;
font-size: 14px;
margin-bottom: 45px;
strong {
font-weight: normal;
}
th {
text-align: left;
border-top: 1px solid #eaeefb;
background-color: #EFF2F7;
}
td, th {
border-bottom: 1px solid #eaeefb;
padding: 10px;
}
th:first-child, td:first-child {
padding-left: 10px;
}
}
}
}
}
</style>
<template>
<div class="page-container page-component">
<el-row>
<el-col :span="6">
<side-nav :data="navsData[lang]" :base="`/${ lang }/component`"></side-nav>
</el-col>
<el-col :span="18">
<router-view class="content"></router-view>
<footer-nav></footer-nav>
</el-col>
</el-row>
</div>
</template>
<script>
import navsData from '../../nav.config.json';
export default {
data() {
return {
lang: this.$route.meta.lang,
navsData
};
}
};
</script>
examples/pages/zh-CN/design.vue 0 → 100644
View file @ 097745f9
<style scoped>
.cards {
margin: 30px 0 70px;
}
.card {
background: #fbfcfd;
height: 204px;
text-align: center;
img {
margin: 40px auto 25px;
width: 80px;
height: 80px;
}
h4 {
font-size: 18px;
color: #1f2d3d;
font-weight: normal;
margin: 0;
}
span {
font-size: 14px;
color: #99a9bf;
}
}
</style>
<template>
<div>
<h2>设计原则</h2>
<el-row :gutter="14" class="cards">
<el-col :span="6">
<div class="card">
<img src="~examples/assets/images/consistency.png" alt="Consistency">
<h4>一致</h4>
<span>Consistency</span>
</div>
</el-col>
<el-col :span="6">
<div class="card">
<img src="~examples/assets/images/feedback.png" alt="Feedback">
<h4>反馈</h4>
<span>Feedback</span>
</div>
</el-col>
<el-col :span="6">
<div class="card">
<img src="~examples/assets/images/efficiency.png" alt="Efficiency">
<h4>效率</h4>
<span>Efficiency</span>
</div>
</el-col>
<el-col :span="6">
<div class="card">
<img src="~examples/assets/images/controllability.png" alt="Controllability">
<h4>可控</h4>
<span>Controllability</span>
</ul>
</el-col>
</el-row>
<h3>一致性 Consistency</h3>
<ul>
<li><strong>与现实生活一致：</strong>与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</li>
<li><strong>在界面中一致：</strong>所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</li>
</ul>
<h3>反馈 Feedback</h3>
<ul>
<li><strong>控制反馈：</strong>通过界面样式和交互动效让用户可以清晰的感知自己的操作；</li>
<li><strong>页面反馈：</strong>操作后，通过页面元素的变化清晰地展现当前状态。</li>
</ul>
<h3>效率 Efficiency</h3>
<ul>
<li><strong>简化流程：</strong>设计简洁直观的操作流程；</li>
<li><strong>清晰明确：</strong>语言表达清晰且表意明确，让用户快速理解进而作出决策；</li>
<li><strong>帮助用户识别：</strong>界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</li>
</ul>
<h3>可控 Controllability</h3>
<ul>
<li><strong>用户决策：</strong>根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</li>
<li><strong>结果可控：</strong>用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</li>
</ul>
</div>
</template>
examples/pages/zh-CN/guide.vue 0 → 100644
View file @ 097745f9
<style>
.page-guide {
padding: 55px 0 95px;
.content {
padding-left: 25px;
margin-left: -1px;
h2 {
margin-bottom: 10px;
}
h3 {
font-size: 22px;
font-weight: normal;
margin: 0 0 30px;
color: #1f2d3d;
}
p {
line-height: 1.6;
font-size: 14px;
color: #5e6d82;
}
ul {
margin-bottom: 50px;
padding-left: 0;
}
li {
font-size: 14px;
margin-bottom: 10px;
color: #99a9bf;
list-style: none;
&:before {
content: '';
display: inline-block;
width: 4px;
height: @width;
border-radius: 50%;
vertical-align: middle;
background-color: #5e6d82;
margin-right: 5px;
}
strong {
color: #5e6d82;
font-weight: 400;
}
}
}
}
</style>
<template>
<div class="page-container page-guide">
<el-row>
<el-col :span="5">
<side-nav :data="navsData" :base="`/${ lang }/guide`"></side-nav>
</el-col>
<el-col :span="19">
<router-view class="content"></router-view>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
lang: this.$route.meta.lang,
navsData: [
{
path: '/design',
name: '设计原则'
},
{
path: '/nav',
name: '导航'
}
]
};
}
};
</script>
examples/pages/zh-CN/index.vue 0 → 100644
View file @ 097745f9
<style scoped>
.actor {
min-height: 65px;
&:after {
content: '';
width: 6px;
height: 50px;
vertical-align: -8px;
margin-left: 5px;
background-color: #fff;
display: inline-block;
animation: blink 400ms infinite alternate;
}
}
.banner {
position: relative;
height: 420px;
color: #fff;
margin-bottom: 130px;
.container {
position: relative;
}
img {
position: absolute;
top: 15px;
right: -10px;
}
}
.banner-sky {
position: absolute;
top: -150px;
bottom: -15px;
width: 100%;
margin-top: -140px;
transform: skewY(-5deg);
transform-origin: center;
background-image: linear-gradient(180deg, #0d1a44 13%, #3c4f91 56%, #5fc1e4 100%);
}
img.banner-stars {
top: -10px;
left: 50%;
transform: translateX(-50%);
}
.banner-desc {
padding-top: 110px;
padding-left: 30px;
font-size: 46px;
position: relative;
z-index: 10;
h2 {
font-size: 46px;
margin: 0;
}
p {
font-size: 14px;
opacity: .8;
width: 420px;
line-height: 1.8;
padding-left: 3px;
}
}
.cards {
margin: 0 auto 110px;
width: 1140px;
.container {
@utils-clearfix;
padding: 0;
margin: 0 -11px;
width: auto;
}
li {
width: 33.33333%;
padding: 0 19px;
box-sizing: border-box;
float: left;
list-style: none;
}
img {
width: 160px;
height: 120px;
}
}
.card {
height: 430px;
width: 100%;
background:#ffffff;
border:1px solid #eaeefb;
border-radius:5px;
box-sizing: border-box;
text-align: center;
position: relative;
transition: all .3s ease-in-out;
bottom: 0;
img {
margin: 66px auto 60px;
}
h3 {
margin: 0;
font-size: 18px;
color: #1f2f3d;
font-weight: normal;
}
p {
font-size: 14px;
color: #99a9bf;
padding: 0 25px;
line-height: 1.8;
}
a {
height: 53px;
line-height: 52px;
font-size: 14px;
color: #20a0ff;
text-align: center;
border: 0;
border-top: 1px solid #eaeefb;
padding: 0;
cursor: pointer;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background-color: #fff;
border-radius: 0 0 5px 5px;
transition: all .3s;
text-decoration: none;
display: block;
&:hover {
background-color: #20a0ff;
color: #fff;
background: #20a0ff;
}
}
&:hover {
bottom: 6px;
box-shadow: 0px 6px 18px 0px rgba(232,237,250,0.50);
}
}
@keyframes blink {
from { opacity: 0; }
to { opacity: 1; }
}
@media (max-width: 1140px) {
.cards {
width: 100%;
}
}
</style>
<template>
<div>
<div class="banner">
<div class="banner-sky"></div>
<img class="banner-stars" src="~examples/assets/images/stars.png" alt="Element">
<div class="container">
<div class="banner-desc">
<h2>网站快速成型工具</h2>
<div id="line2" class="actor"></div>
<p>Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。</p>
</div>
<img src="~examples/assets/images/banner-bg.svg" alt="Element">
</div>
</div>
<div class="cards">
<ul class="container">
<li>
<div class="card">
<img src="~examples/assets/images/guide.png" alt="">
<h3>指南</h3>
<p>了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。</p>
<router-link
active-class="active"
to="/guide/design"
exact>查看详情
</router-link>
</div>
</li>
<li>
<div class="card">
<img src="~examples/assets/images/component.png" alt="">
<h3>组件</h3>
<p>使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。</p>
<router-link
active-class="active"
to="/component/layout"
exact>查看详情
</router-link>
</div>
</li>
<li>
<div class="card">
<img src="~examples/assets/images/resource.png" alt="">
<h3>资源</h3>
<p>下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。</p>
<router-link
active-class="active"
to="/resource"
exact>查看详情
</router-link>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
import theaterJS from 'theaterjs';
export default {
mounted() {
function typing(theater) {
theater
.addScene('产品设计师', 1800, -5, 800)
.addScene('交互设计师', 1800, -5, 500)
.addScene('视觉设计师', 1800, -5, 700)
.addScene('产品经理', 1800, -4, 600)
.addScene('前端工程师', 1800, -5, 800)
.addScene((done) => {
typing(theater);
done();
});
}
var theater = theaterJS();
theater
.on('type:start, erase:start', function() {
theater.getCurrentActor().$element.classList.add('typing');
})
.on('type:end, erase:end', function() {
theater.getCurrentActor().$element.classList.remove('typing');
});
theater
.addActor('line2', { speed: 0.5, accuracy: 1 })
.addScene(2600)
.addScene('line2:只为守护世界和平', 300, -6, 1000)
.addScene('让你少加班', 300, -5)
.addScene('line2:只为这样的你: ', 400)
.addScene((done) => {
typing(theater);
done();
});
}
};
</script>
examples/pages/zh-CN/nav.vue 0 → 100644
View file @ 097745f9
<style scoped>
h3 {
margin-bottom: 15px;
}
.block {
margin-bottom: 55px;
}
p {
margin: 0 0 15px;
}
.nav-demos {
p {
margin-bottom: 50px;
}
h5 {
margin: 0;
}
img {
padding: 15px;
background-color: #F9FAFC;
width: 100%;
margin-bottom: 15px;
cursor: pointer;
}
}
.dialog-img {
position: fixed;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
-webkit-overflow-scrolling: touch;
outline: 0;
.imgWrap {
margin: 0 auto;
position: relative;
top: 100px;
padding-bottom: 50px;
}
img {
display: block;
width: 100%;
}
}
.mask {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #373737;
background-color: rgba(55, 55, 55, 0.6);
height: 100%;
z-index: 1000;
}
.zoom-enter-active,
.zoom-leave-active {
transition: transform .3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.zoom-enter,
.zoom-leave-active {
transform: scale(0.3);
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
</style>
<template>
<div>
<h2>导航</h2>
<div class="block">
<p>导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。</p>
</div>
<div class="block">
<h3>选择合适的导航</h3>
<p>选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适（方向不明确），以下是「侧栏导航」和 「顶部导航」的区别。</p>
</div>
<div class="block">
<h3>侧栏导航</h3>
<el-row :gutter="20">
<el-col :span="9">
<p>可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。</p>
</el-col>
<el-col :span="15" class="nav-demos">
<img src="~examples/assets/images/navbar_1.png" alt="一级类目" @click="enlarge(846, $event)">
<h5>一级类目</h5>
<p>适用于结构简单的网站：只有一级页面时，不需要使用面包屑。</p>
<img src="~examples/assets/images/navbar_2.png" alt="二级类目" @click="enlarge(846, $event)">
<h5>二级类目</h5>
<p>侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。</p>
<img src="~examples/assets/images/navbar_3.png" alt="三级类目" @click="enlarge(846, $event)">
<h5>三级类目</h5>
<p>适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。</p>
</el-col>
</el-row>
</div>
<div class="block">
<h3>顶部导航</h3>
<el-row>
<el-col :span="10">
<p>顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。</p>
</el-col>
<el-col :span="14" class="nav-demos">
<img src="~examples/assets/images/navbar_0.png" alt="" @click="enlarge(846, $event)">
<p>适用于导航较少，页面篇幅较长的网站。</p>
</el-col>
</el-row>
</div>
<transition name="fade">
<div class="mask" v-show="showDialog" @click="showDialog = false"></div>
</transition>
<transition name="zoom">
<div class="dialog-img" :style='imgWrapStyle' v-show="showDialog" @click="showDialog = false">
<div class="imgWrap" :style="imgStyle">
<img :src="imgUrl" alt="">
</div>
</div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
imgUrl: '',
imgBound: {},
showDialog: false,
imgStyle: {},
imgWrapStyle: {}
};
},
watch: {
showDialog(val) {
document.body.style.overflow = val ? 'hidden' : '';
}
},
methods: {
enlarge(imgWidth, ev) {
var imgNode = ev.target;
// var bound = imgNode.getBoundingClientRect();
var offset = {};
var doc = document;
offset.left = (doc.body.scrollWidth - imgWidth) / 2;
offset.top = 100;
this.imgUrl = imgNode.src;
this.imgBound = imgNode.getBoundingClientRect();
this.imgWrapStyle.transformOrigin = `${ev.clientX}px ${ev.clientY}px`;
// this.imgStyle.transformOrigin = `${ev.clientX}px ${ev.clientY}px`;
this.imgStyle.width = imgWidth + 'px';
this.showDialog = true;
}
}
};
</script>
examples/pages/zh-CN/resource.vue 0 → 100644
View file @ 097745f9
<style scoped>
.page-resource {
padding-top: 55px;
}
.cards {
margin: 35px auto 110px;
.container {
@utils-clearfix;
padding: 0;
margin: 0 -11px;
width: auto;
}
li {
width: 33.33333%;
padding: 0 11px;
box-sizing: border-box;
float: left;
list-style: none;
}
}
h2 {
font-size: 28px;
margin: 0;
}
p {
font-size: 14px;
color: #5e6d82;
}
.card {
height: 394px;
width: 100%;
background:#ffffff;
border:1px solid #eaeefb;
border-radius:5px;
box-sizing: border-box;
text-align: center;
position: relative;
transition: bottom .3s;
bottom: 0;
img {
margin: 75px auto 35px;
height: 87px;
}
h3 {
margin: 0 0 10px;
font-size: 18px;
color: #1f2f3d;
font-weight: normal;
height: 22px;
}
p {
font-size: 14px;
color: #99a9bf;
padding: 0 30px;
margin: 0;
line-height: 1.2;
}
a {
height: 42px;
width: 190px;
display: inline-block;
line-height: @height;
font-size: 14px;
background-color: #20a0ff;
color: #fff;
text-align: center;
border: 0;
padding: 0;
cursor: pointer;
border-radius: 2px;
transition: all .3s;
text-decoration: none;
margin-top: 20px;
}
}
</style>
<template>
<div class="page-container page-resource">
<h2>资源</h2>
<p>这里提供 Element 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。</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>通过在 Axure 中导入 Element 组件库，可以在交互设计阶段方便地调用常用的组件</p>
<a href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib">下载</a>
</div>
</li>
<li>
<div class="card">
<img src="~examples/assets/images/Sketch-Template.svg" alt="">
<h3>Sketch Template</h3>
<p>从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格</p>
<a href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch">下载</a>
</div>
</li>
<li>
<div class="card">
<img src="~examples/assets/images/Module.svg" alt="">
<h3>组件交互文档</h3>
<p>进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节</p>
<a href="https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip">下载</a>
</div>
</li>
</ul>
</div>
</div>
</template>
packages/theme-default/package.json
View file @ 097745f9
{ {
"name": "element-theme-default", "name": "element-theme-default",
"version": "1.0.0-rc.9", "version": "1.0.0",
"description": "Element component default theme.", "description": "Element component default theme.",
"main": "lib/index.css", "main": "lib/index.css",
"style": "lib/index.css", "style": "lib/index.css",
......
src/index.js
View file @ 097745f9
...@@ -130,7 +130,7 @@ if (typeof window !== 'undefined' && window.Vue) { ...@@ -130,7 +130,7 @@ if (typeof window !== 'undefined' && window.Vue) {
}; };
module.exports = { module.exports = {
version: '1.0.0-rc.9', version: '1.0.0',
locale: locale.use, locale: locale.use,
install, install,
Pagination, Pagination,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment