Skip to content

E
Element
Commit b51aeab3 authored by baiyaaaaa's avatar baiyaaaaa Committed by GitHub
Browse files
Options

Merge pull request #102 from baiyaaaaa/next-doc 

Next doc
parents c41f8d5b 2d9a77b4
Expand all Show whitespace changes
Inline Side-by-side
Showing with 2770 additions and 1368 deletions
examples/app.vue
View file @ b51aeab3
<style lang="css"> <style lang="css">
@import '../node_modules/purecss/build/grids-core.css';
@import '../node_modules/purecss/build/grids-units.css';
@import '../node_modules/purecss/build/menus.css';
@import '../node_modules/highlight.js/styles/color-brewer.css'; @import '../node_modules/highlight.js/styles/color-brewer.css';
@import 'assets/styles/common.css'; @import 'assets/styles/common.css';
@import 'assets/styles/fonts/style.css'; @import 'assets/styles/fonts/style.css';
...@@ -9,255 +6,27 @@ ...@@ -9,255 +6,27 @@
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100%;
} }
body { #app {
font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; height: 100%;
overflow: auto;
} }
.pure-g [class *= "pure-u"] { body {
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif; font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
overflow: auto;
font-weight: 300;
} }
.app__sidebar { .main-cnt {
width: 230px; margin-top: -80px;
display: block; padding: 80px 0 120px;
}
.app__content {
margin-left: 230px;
display: block;
}
.app__menu {
bottom: 0;
position: fixed;
top: 0;
z-index: 10;
background-color: #f8f8f9;
color: #20293b;
.app__brand {
color: #20293b;
font-size: 24px;
margin: 10px 0 40px;
text-align: center;
.app__eleme {
font-weight: 900;
}
}
.app__menu__label {
color: #20293b;
font-weight: bold;
font-size: 14px;
padding: 10px 0 10px 36px;
position: relative;
&::after {
border-color: transparent transparent transparent rgba(170, 170, 170, .5);
border-style: solid;
border-width: 5px 0 5px 7px;
content: " ";
display: block;
height: 0;
position: absolute;
right: 22px;
top: 14px;
transition-delay: .1s;
transition: transform .3s;
width: 0;
}
&.unfold::after {
transform: rotate(90deg);
}
}
.app__menu__link {
padding: 12px 0 12px 50px;
font-size: 14px;
color: #20293b;
transition: color, background-color .3s;
&:focus {
background-color: transparent;
}
&.active {
border-left: 3px solid #2675c3;
color: #2675c3;
padding-left: 47px;
}
}
}
.app__main {
.app__description {
font-size: 14px;
margin: 0;
color: #666;
padding-bottom: 36px;
margin-bottom: 36px;
border-bottom: 1px solid #e4e4e4;
&:empty {
display: none;
}
}
a {
color: #216fc1;
}
h2 {
color: #333;
font-size: 20px;
font-weight: bold;
margin: 60px 0 16px;
line-height: 1;
&:first-of-type {
margin-top: 36px;
}
}
h3 {
color: #333;
font-size: 16px;
font-weight: normal;
line-height: 1;
margin: 36px 0 16px;
}
p, h2, h3 {
+div, +span {
margin: 10px 0 24px;
}
+span {
margin-right: 8px;
}
}
p {
color: #666;
font-size: 14px;
margin: 0 0 16px;
line-height: 1.5;
}
section > table {
border-collapse: collapse;
border-style: hidden;
box-shadow: 0 0 0 1px #e1e1e1;
border-radius: 5px;
overflow: hidden;
width: 100%;
thead {
background-color: #f8f8f8;
font-size: 14px;
th {
color: #666;
}
}
th, td {
border: 1px solid #e1e1e1;
padding: 10px 16px;
text-align: left;
font-size: 14px;
color: #999;
}
}
.hljs {
border-radius: 5px;
border: 1px solid #e1e1e1;
font-size: 14px;
max-height: 90px;
overflow-y: hidden;
position: relative;
margin-bottom: 40px;
margin-top: 0;
&::before {
background: linear-gradient(0deg, #fff 0, rgba(255, 255, 255, 0) 80%);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
content: "";
}
&.open {
max-height: 100%;
&::before {
content: none;
}
.hljs__button::before {
margin-bottom: 0;
margin-top: 9px;
transform: rotate(45deg);
}
}
}
.hljs__button {
background-color: #fff;
border-radius: 4px;
border: 1px solid #ccc;
outline: 0;
position: absolute;
right: 10px;
top: 10px;
height: 28px;
width: 28px;
&::before {
margin-bottom: 2px;
margin-top: 0;
transform: rotate(-135deg);
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
content: "";
display: inline-block;
height: 10px;
width: 10px;
}
}
}
.app__header {
background-color: #2c7dc7;
color: #fff;
padding: 42px;
height: 120px;
box-sizing: border-box; box-sizing: border-box;
min-height: 100%;
.app__headline {
font-size: 36px;
font-weight: normal;
line-height: 1;
margin: 0 0 10px 0;
}
}
.slidedown-transition {
transition: all .3s ease-in-out;
overflow: hidden;
} }
.slidedown-enter, .slidedown-leave { .page-cnt {
max-height: 0 !important;
} }
.demo { .demo {
margin: 20px 0; margin: 20px 0;
...@@ -266,125 +35,16 @@ ...@@ -266,125 +35,16 @@
<template> <template>
<div id="app"> <div id="app">
<div class="pure-g"> <main-header></main-header>
<div class="pure-u-1-6 app__sidebar pure-menu pure-menu-scrollable app__menu"> <div class="main-cnt">
<router-link class="pure-menu-heading app__brand" to="/">
<span class="app__eleme">ELEME</span>NT
</router-link>
<template v-for="(nav, key) in navs">
<a
href="#"
@click.prevent="navState.$set(key, !navState[key] || false)"
class="pure-menu-heading app__menu__label"
:class="{ 'unfold': !navState[key] }"
v-text="nav.group"></a>
<ul
class="pure-menu-list"
transition="slidedown"
v-show="!navState[key]"
:style="{
maxHeight: nav.list.length * 44 + 'px'
}">
<li
class="pure-menu-item app__menu__item"
v-for="item in nav.list"
v-if="!item.disabled">
<router-link
class="pure-menu-link app__menu__link"
:to="{ path: item.path, activeClass: 'active' }"
v-text="item.name"></router-link>
</li>
</ul>
</template>
</div>
<div class="pure-u-5-6 app__content">
<header class="app__header">
<h1 class="app__headline">{{ $route.meta.title || 'element 后台组件' }}</h1>
</header>
<section class="app__main" ref="main">
<p class="app__description">{{ $route.meta.description }}</p>
<router-view></router-view> <router-view></router-view>
</section>
<toc main=".app__main"></toc>
</div> </div>
</div> <main-footer></main-footer>
<button class="hljs__button" ref="button"></button>
</div> </div>
</template> </template>
<script> <script>
import { navs } from './route.config';
import toc from './components/toc';
import E from 'oui-dom-events';
import { toggleClass, addClass, removeClass } from './dom/class';
export default { export default {
name: 'app', name: 'app'
components: {
toc
},
data() {
return {
highlights: [],
navState: []
};
},
methods: {
findAllHighlight() {
return Array.prototype.slice.call(document.querySelectorAll('.hljs'));
}
},
created() {
this.navs = navs;
},
mounted() {
this.mainContent = document.querySelector('.app__content');
E.delegate(this.$refs.main, '.hljs__button', 'click.highlight', e => {
const parent = e.target.parentNode;
toggleClass(parent, 'open');
});
},
beforeDestroy() {
E.undelegate(this.$refs.main, '.hljs', 'click.highlight');
},
watch: {
highlights(list) {
list.map(item => {
if (item.offsetHeight <= 100) {
toggleClass(item, 'open');
} else {
item.appendChild(this.$els.button.cloneNode(true));
}
});
}
},
events: {
['element.example.reload']() {
this.$nextTick(() => {
if (this.mainContent.querySelector('.no-toc')) {
addClass(this.mainContent, 'no-toc');
} else {
removeClass(this.mainContent, 'no-toc');
}
this.highlights = this.findAllHighlight();
});
this.mainContent.scrollTop = 0;
return true;
}
}
}; };
</script> </script>
examples/assets/images/Axure-Components.svg 0 → 100644
View file @ b51aeab3
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="110px" height="87px" viewBox="0 0 110 87" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #FFFFFF;">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Axure Components_icon</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Axure-Components_icon">
<g id="sitemap">
<g id="Group">
<path d="M87.2413867,49.517832 L56.8966406,49.517832 L56.8966406,41.9316992 L53.1035742,41.9316992 L53.1035742,49.517832 L22.7586133,49.517832 C21.71125,49.517832 20.8619727,50.3671094 20.8619727,51.4144727 L20.8619727,60.8972461 L24.6550391,60.8972461 L24.6550391,53.3111133 L53.1033594,53.3111133 L53.1033594,60.8972461 L56.8964258,60.8972461 L56.8964258,53.3111133 L85.3447461,53.3111133 L85.3447461,60.8972461 L89.1378125,60.8972461 L89.1378125,51.4142578 C89.1380273,50.3668945 88.28875,49.517832 87.2413867,49.517832 L87.2413867,49.517832 Z" id="Shape" fill="#DEEBFD"></path>
<path d="M104.310293,0 L5.68970703,0 C2.54740234,0 0,2.54014599 0,5.673764 L0,81.3260218 C0,84.4596398 2.54740234,87 5.68970703,87 L104.310293,87 C107.452598,87 110,84.4596398 110,81.3260218 L110,5.673764 C110,2.54014599 107.452598,0 104.310293,0 L104.310293,0 Z M106.206934,81.5516797 C106.206934,82.599043 105.357656,83.4483203 104.310293,83.4483203 L5.68970703,83.4483203 C4.64234375,83.4483203 3.79306641,82.599043 3.79306641,81.5516797 L3.79306641,13.2758398 C3.79306641,12.2284766 4.64234375,11.3791992 5.68970703,11.3791992 L104.310293,11.3791992 C105.357656,11.3791992 106.206934,12.2284766 106.206934,13.2758398 L106.206934,81.5516797 L106.206934,81.5516797 Z" id="Shape" fill="#F2F8FE"></path>
</g>
<circle id="Oval" fill="#DDEAFC" cx="5.68970703" cy="5.89703125" r="1.89664062"></circle>
<circle id="Oval" fill="#DDEAFC" cx="11.3794141" cy="5.89703125" r="1.89664062"></circle>
<circle id="Oval" fill="#DDEAFC" cx="17.0689062" cy="5.89703125" r="1.89664062"></circle>
<path d="M34.2899219,43.828125 C33.1585547,43.828125 32.2413867,42.910957 32.2413867,41.7795898 L32.2413867,19.3249805 C32.2413867,18.1936133 33.1585547,17.2764453 34.2899219,17.2764453 L75.7100781,17.2764453 C76.8414453,17.2764453 77.7586133,18.1936133 77.7586133,19.3249805 L77.7586133,41.7795898 C77.7586133,42.910957 76.8414453,43.828125 75.7100781,43.828125 L34.2899219,43.828125 Z" id="Shape" fill="#20A0FF"></path>
<path d="M66.9534766,77.9661523 L43.0465234,77.9661523 C42.3162695,77.9661523 41.7241602,77.3742578 41.7241602,76.6437891 L41.7241602,60.3227539 C41.7241602,59.5922852 42.3160547,59.0003906 43.0465234,59.0003906 L66.9536914,59.0003906 C67.6841602,59.0003906 68.2760547,59.5922852 68.2760547,60.3227539 L68.2760547,76.6437891 C68.2758398,77.374043 67.6839453,77.9661523 66.9534766,77.9661523 L66.9534766,77.9661523 Z" id="Shape" fill="#FFD6D2"></path>
<g id="Group" transform="translate(35.878906, 21.054688)" fill="#2198F0">
<path d="M36.19,11.3940234 L2.0521875,11.3940234 C1.00482422,11.3940234 0.155546875,10.5447461 0.155546875,9.49738281 L0.155546875,9.49738281 C0.155546875,8.45001953 1.00482422,7.60074219 2.0521875,7.60074219 L36.1902148,7.60074219 C37.2375781,7.60074219 38.0868555,8.45001953 38.0868555,9.49738281 L38.0868555,9.49738281 C38.0866406,10.5449609 37.2373633,11.3940234 36.19,11.3940234 L36.19,11.3940234 Z" id="Shape"></path>
<path d="M32.3969336,3.80789063 L5.84525391,3.80789063 C4.79789062,3.80789063 3.94861328,2.95861328 3.94861328,1.91125 L3.94861328,1.91125 C3.94861328,0.863886719 4.79789062,0.014609375 5.84525391,0.014609375 L32.3969336,0.014609375 C33.4442969,0.014609375 34.2935742,0.863886719 34.2935742,1.91125 L34.2935742,1.91125 C34.2935742,2.95882813 33.4442969,3.80789063 32.3969336,3.80789063 L32.3969336,3.80789063 Z" id="Shape"></path>
<path d="M24.8108008,18.9803711 L13.4313867,18.9803711 C12.3840234,18.9803711 11.5347461,18.1310938 11.5347461,17.0837305 L11.5347461,17.0837305 C11.5347461,16.0363672 12.3840234,15.1870898 13.4313867,15.1870898 L24.8108008,15.1870898 C25.8581641,15.1870898 26.7074414,16.0363672 26.7074414,17.0837305 L26.7074414,17.0837305 C26.7072266,18.1310938 25.8581641,18.9803711 24.8108008,18.9803711 L24.8108008,18.9803711 Z" id="Shape"></path>
</g>
<g id="Group" transform="translate(45.332031, 62.734375)" fill="#FFACAD">
<path d="M13.4610352,11.4384961 L5.87490234,11.4384961 C4.82753906,11.4384961 3.97826172,10.5892188 3.97826172,9.54185547 L3.97826172,9.54185547 C3.97826172,8.49449219 4.82753906,7.64521484 5.87490234,7.64521484 L13.4610352,7.64521484 C14.5083984,7.64521484 15.3576758,8.49449219 15.3576758,9.54185547 L15.3576758,9.54185547 C15.3576758,10.5894336 14.5083984,11.4384961 13.4610352,11.4384961 L13.4610352,11.4384961 Z" id="Shape"></path>
<path d="M17.2541016,3.85236328 L2.08183594,3.85236328 C1.03447266,3.85236328 0.185195313,3.00308594 0.185195313,1.95572266 L0.185195313,1.95572266 C0.185195313,0.908359375 1.03447266,0.0590820312 2.08183594,0.0590820312 L17.2543164,0.0590820312 C18.3016797,0.0590820312 19.150957,0.908359375 19.150957,1.95572266 L19.150957,1.95572266 C19.1507422,3.00308594 18.3014648,3.85236328 17.2541016,3.85236328 L17.2541016,3.85236328 Z" id="Shape"></path>
</g>
<path d="M99.1948633,77.9661523 L75.2879102,77.9661523 C74.5574414,77.9661523 73.9655469,77.3742578 73.9655469,76.6437891 L73.9655469,60.3227539 C73.9655469,59.5922852 74.5574414,59.0003906 75.2879102,59.0003906 L99.1950781,59.0003906 C99.9255469,59.0003906 100.517441,59.5922852 100.517441,60.3227539 L100.517441,76.6437891 C100.517227,77.374043 99.925332,77.9661523 99.1948633,77.9661523 L99.1948633,77.9661523 Z" id="Shape" fill="#F2F8FE"></path>
<g id="Group" transform="translate(77.558594, 62.734375)" fill="#DEEBF8">
<path d="M13.4758594,11.4384961 L5.88972656,11.4384961 C4.84236328,11.4384961 3.99308594,10.5892188 3.99308594,9.54185547 L3.99308594,9.54185547 C3.99308594,8.49449219 4.84236328,7.64521484 5.88972656,7.64521484 L13.4758594,7.64521484 C14.5232227,7.64521484 15.3725,8.49449219 15.3725,9.54185547 L15.3725,9.54185547 C15.3725,10.5894336 14.5232227,11.4384961 13.4758594,11.4384961 L13.4758594,11.4384961 Z" id="Shape"></path>
<path d="M17.2689258,3.85236328 L2.09644531,3.85236328 C1.04908203,3.85236328 0.199804688,3.00308594 0.199804688,1.95572266 L0.199804688,1.95572266 C0.199804688,0.908359375 1.04908203,0.0590820312 2.09644531,0.0590820312 L17.2689258,0.0590820312 C18.3162891,0.0590820312 19.1655664,0.908359375 19.1655664,1.95572266 L19.1655664,1.95572266 C19.1655664,3.00308594 18.3162891,3.85236328 17.2689258,3.85236328 L17.2689258,3.85236328 Z" id="Shape"></path>
</g>
<path d="M34.7120898,77.9661523 L10.8051367,77.9661523 C10.0748828,77.9661523 9.48277344,77.3742578 9.48277344,76.6437891 L9.48277344,60.3227539 C9.48277344,59.5922852 10.074668,59.0003906 10.8051367,59.0003906 L34.7123047,59.0003906 C35.4425586,59.0003906 36.034668,59.5922852 36.034668,60.3227539 L36.034668,76.6437891 C36.0344531,77.374043 35.4425586,77.9661523 34.7120898,77.9661523 L34.7120898,77.9661523 Z" id="Shape" fill="#80A8E1"></path>
<g id="Group" transform="translate(13.105469, 62.734375)" fill="#6496DC">
<path d="M13.4462109,11.4384961 L5.86007813,11.4384961 C4.81271484,11.4384961 3.9634375,10.5892188 3.9634375,9.54185547 L3.9634375,9.54185547 C3.9634375,8.49449219 4.81271484,7.64521484 5.86007813,7.64521484 L13.4462109,7.64521484 C14.4935742,7.64521484 15.3428516,8.49449219 15.3428516,9.54185547 L15.3428516,9.54185547 C15.3428516,10.5894336 14.4935742,11.4384961 13.4462109,11.4384961 L13.4462109,11.4384961 Z" id="Shape"></path>
<path d="M17.2392773,3.85236328 L2.06701172,3.85236328 C1.01964844,3.85236328 0.170371094,3.00308594 0.170371094,1.95572266 L0.170371094,1.95572266 C0.170371094,0.908359375 1.01964844,0.0590820312 2.06701172,0.0590820312 L17.2394922,0.0590820312 C18.2868555,0.0590820312 19.1361328,0.908359375 19.1361328,1.95572266 L19.1361328,1.95572266 C19.135918,3.00308594 18.2866406,3.85236328 17.2392773,3.85236328 L17.2392773,3.85236328 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/Module.svg 0 → 100644
View file @ b51aeab3
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="81px" height="77px" viewBox="0 0 81 77" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Module_icon</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="6" y="57" width="11" height="11" rx="5.5"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.466666667 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<rect id="path-3" x="6" y="57" width="11" height="11" rx="5.5"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.392156863 0 0 0 0 0.588235294 0 0 0 0 0.862745098 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<rect id="path-5" x="6" y="57" width="11" height="11" rx="5.5"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-6">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.674509804 0 0 0 0 0.678431373 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Module_icon">
<g id="Group-5">
<g id="folder-3">
<g id="Group">
<rect id="Rectangle-path" fill="#DEEBF8" x="0" y="54" width="23" height="23"></rect>
<rect id="Rectangle-path" fill="#F2F8FE" x="0" y="0" width="23" height="54"></rect>
<rect id="Rectangle" fill="#DEEBF9" x="7" y="6" width="9" height="30" rx="3"></rect>
<g id="Rectangle-path">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
</g>
</g>
<g id="folder-3-copy" transform="translate(29.000000, 0.000000)">
<g id="Group">
<rect id="Rectangle-path" fill="#DEEBF8" x="0" y="54" width="23" height="23"></rect>
<rect id="Rectangle-path" fill="#F2F8FE" x="0" y="0" width="23" height="54"></rect>
<rect id="Rectangle" fill="#DEEBF9" x="7" y="6" width="9" height="30" rx="3"></rect>
<g id="Rectangle-path">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<use fill="#80A8E1" fill-rule="evenodd" xlink:href="#path-3"></use>
</g>
</g>
</g>
<g id="folder-3-copy" transform="translate(58.000000, 0.000000)">
<g id="Group">
<rect id="Rectangle-path" fill="#DEEBF8" x="0" y="54" width="23" height="23"></rect>
<rect id="Rectangle-path" fill="#F2F8FE" x="0" y="0" width="23" height="54"></rect>
<rect id="Rectangle" fill="#DEEBF9" x="7" y="6" width="9" height="30" rx="3"></rect>
<g id="Rectangle-path">
<use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
<use fill="#FFD6D2" fill-rule="evenodd" xlink:href="#path-5"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/Sketch-Template.svg 0 → 100644
View file @ b51aeab3
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="88px" height="77px" viewBox="0 0 88 77" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Sketch Template_icon</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Sketch-Template_icon">
<g id="Group-25">
<g id="browser">
<g id="Group" transform="translate(0.042735, 6.772269)" fill="#C9E1FB" opacity="0.23880597">
<path d="M3.20088476,28.5057337 L44.1701391,28.5057337 C45.9105265,28.5057337 47.3217575,27.1026312 47.3217575,25.3722682 L47.3217575,0.305608725 C47.3217575,2.03597172 45.9105265,3.43907426 44.1701391,3.43907426 L3.20088476,3.43907426 C1.46049739,3.43907426 0.0492663503,2.03597172 0.0492663503,0.305608725 L0.0492663503,25.3722682 C0.0492663503,27.1029861 1.46014038,28.5057337 3.20088476,28.5057337 L3.20088476,28.5057337 Z" id="Shape"></path>
<path d="M59.9271601,28.5057337 L78.8361566,28.5057337 C80.576544,28.5057337 81.987775,27.1026312 81.987775,25.3722682 L81.987775,0.305608725 C81.987775,2.03597172 80.576544,3.43907426 78.8361566,3.43907426 L59.9271601,3.43907426 C58.1867728,3.43907426 56.7755417,2.03597172 56.7755417,0.305608725 L56.7755417,25.3722682 C56.7755417,27.1029861 58.1867728,28.5057337 59.9271601,28.5057337 L59.9271601,28.5057337 Z" id="Shape"></path>
</g>
<path d="M3.24361929,10.2116986 L44.2128736,10.2116986 C45.953261,10.2116986 47.364492,8.80859603 47.364492,7.07823304 L47.364492,3.94476751 C47.364492,2.21440451 45.953261,0.811301969 44.2128736,0.811301969 L3.24361929,0.811301969 C1.50323191,0.811301969 0.0920008764,2.21440451 0.0920008764,3.94476751 L0.0920008764,7.07823304 C0.0920008764,8.80859603 1.50287491,10.2116986 3.24361929,10.2116986 L3.24361929,10.2116986 Z" id="Shape" fill="#FFD6D2"></path>
<path d="M59.9698947,10.2116986 L78.8788911,10.2116986 C80.6192785,10.2116986 82.0305096,8.80859603 82.0305096,7.07823304 L82.0305096,3.94476751 C82.0305096,2.21440451 80.6192785,0.811301969 78.8788911,0.811301969 L59.9698947,0.811301969 C58.2295073,0.811301969 56.8182763,2.21440451 56.8182763,3.94476751 L56.8182763,7.07823304 C56.8182763,8.80859603 58.2295073,10.2116986 59.9698947,10.2116986 L59.9698947,10.2116986 Z" id="Shape" fill="#20A0FF"></path>
<g id="Group" transform="translate(6.111778, 44.396572)" fill="#C9E1FB" opacity="0.23880597">
<path d="M3.63949659,28.4815974 C3.63949659,30.2119604 2.13657137,31.6150629 0.283103013,31.6150629 L62.5667088,31.6150629 C64.4201772,31.6150629 65.9231024,30.2119604 65.9231024,28.4815974 L65.9231024,3.41493792 C65.9231024,1.68457492 64.4201772,0.28147238 62.5667088,0.28147238 L0.283103013,0.28147238 C2.13657137,0.28147238 3.63949659,1.68457492 3.63949659,3.41493792 L3.63949659,28.4815974 Z" id="Shape"></path>
</g>
<path d="M3.24361929,76.0112803 L6.3952377,76.0112803 C8.13562508,76.0112803 9.54685611,74.6081778 9.54685611,72.8778148 L9.54685611,47.8111553 C9.54685611,46.265021 8.42013066,44.9801712 6.93862628,44.7241059 C6.76209851,44.6935946 6.58053368,44.6776898 6.3952377,44.6776898 L3.24361929,44.6776898 C1.50323191,44.6776898 0.0920008764,46.0807923 0.0920008764,47.8111553 L0.0920008764,72.8778148 C0.0920008764,74.6081778 1.50287491,76.0112803 3.24361929,76.0112803 L3.24361929,76.0112803 Z" id="Shape" fill="#20A0FF"></path>
</g>
<g id="diamond" transform="translate(53.000000, 45.000000)">
<polygon id="Shape" fill="#AFC8EB" points="24.1753264 8.86069795 17.1851852 28.8357025 34.3703704 8.86069795"></polygon>
<g id="Group">
<polygon id="Shape" fill="#80A8E1" points="7.1111088 0.0481841797 0 8.86069795 10.195044 8.86069795"></polygon>
<polygon id="Shape" fill="#80A8E1" points="24.1753264 8.86069795 34.3703704 8.86069795 27.2592616 0.0481841797"></polygon>
<polygon id="Shape" fill="#AFC8EA" points="24.1753264 8.86069795 17.1851852 0.0481841797 10.195044 8.86069795"></polygon>
</g>
<polygon id="Shape" fill="#6496DC" points="17.1851852 0.0481841797 7.1111088 0.0481841797 10.195044 8.86069795"></polygon>
<polygon id="Shape" fill="#93B8EE" points="27.2592616 0.0481841797 17.1851852 0.0481841797 24.1753264 8.86069795"></polygon>
<polygon id="Shape" fill="#80A8E1" points="10.195044 8.86069795 17.1851852 28.8357025 24.1753264 8.86069795"></polygon>
<polygon id="Shape" fill="#6496DC" points="0 8.86069795 17.1851852 28.8357025 10.195044 8.86069795"></polygon>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/banner-bg.svg 0 → 100644
View file @ b51aeab3
This diff is collapsed.
examples/assets/images/fankui.svg 0 → 100644
View file @ b51aeab3
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Feedback_icon</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M26.3157895,54.7 L20,61 L20,25.3 C20,21.835 22.8421053,19 26.3157895,19 L53.6842105,19 C57.1578947,19 60,21.835 60,25.3 L60,48.4 C60,51.865 57.1578947,54.7 53.6842105,54.7 L26.3157895,54.7 Z" id="path-1"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.466666667 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Feedback_icon">
<g id="Group-18">
<path d="M40,80 C62.09139,80 80,62.09139 80,40 C80,17.90861 62.09139,0 40,0 C17.90861,0 0,17.90861 0,40 C0,62.09139 17.90861,80 40,80 Z" id="Mask" fill="#EFF5FD"></path>
<g id="Shape">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
<g id="Group" transform="translate(38.000000, 28.000000)" fill="#FFFFFF">
<rect id="Rectangle-path" x="0" y="7" width="4" height="11"></rect>
<circle id="Oval" cx="2" cy="2" r="2"></circle>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/kekong.svg 0 → 100644
View file @ b51aeab3
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Controllability_icon</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Controllability_icon">
<g id="Group-24">
<path d="M40,80 C62.09139,80 80,62.09139 80,40 C80,17.90861 62.09139,0 40,0 C17.90861,0 0,17.90861 0,40 C0,62.09139 17.90861,80 40,80 Z" id="Mask" fill="#EFF5FD"></path>
<g id="controls" transform="translate(16.000000, 17.000000)">
<g id="Group" transform="translate(5.000000, 0.000000)" fill="#AFCAF1">
<path d="M0,1 L0,33 C0,33.553 0.448,34 1,34 C1.552,34 2,33.553 2,33 L2,1 C2,0.447 1.552,0 1,0 C0.448,0 0,0.447 0,1 Z" id="Shape"></path>
<path d="M37,12 C36.448,12 36,12.447 36,13 L36,45 C36,45.553 36.448,46 37,46 C37.552,46 38,45.553 38,45 L38,13 C38,12.447 37.552,12 37,12 L37,12 Z" id="Shape"></path>
<path d="M19,0 C18.448,0 18,0.447 18,1 L18,16 C18,16.553 18.448,17 19,17 C19.552,17 20,16.553 20,16 L20,1 C20,0.447 19.552,0 19,0 L19,0 Z" id="Shape"></path>
<path d="M19,27 C18.448,27 18,27.447 18,28 L18,45 C18,45.553 18.448,46 19,46 C19.552,46 20,45.553 20,45 L20,28 C20,27.447 19.552,27 19,27 L19,27 Z" id="Shape"></path>
</g>
<circle id="Oval" fill="#AFB6BB" cx="6" cy="41" r="6"></circle>
<circle id="Oval" fill="#AFB6BB" cx="42" cy="9" r="6"></circle>
<circle id="Oval" fill="#0077CE" cx="24" cy="24" r="6"></circle>
<circle id="Oval" fill="#E7ECED" cx="6" cy="39" r="6"></circle>
<circle id="Oval" fill="#E7ECED" cx="42" cy="7" r="6"></circle>
<circle id="Oval" fill="#20A0FF" cx="24" cy="22" r="6"></circle>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/xiaolv.svg 0 → 100644
View file @ b51aeab3
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Efficiency_icon</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M43.6603748,19.56255 L46.4332957,17.3863539 C47.2985626,16.70729 47.5414536,15.3895504 46.9704615,14.4341545 L44.060739,9.56554545 C43.4921406,8.61415464 42.1911396,8.15294772 41.1583334,8.5341334 L37.8026261,9.77265 C35.5689955,7.74945 32.8589812,6.2118 29.8520812,5.33325 L29.2951424,1.97075284 C29.1148653,0.8823361 28.0692991,0 26.9696546,0 L21.0301902,0 C19.9261358,0 18.8852541,0.880702537 18.7047023,1.97080827 L18.1477635,5.3334 C15.1410188,6.21195 12.4310045,7.7496 10.1972186,9.7728 L6.84161092,8.5342834 C5.8072857,8.15252573 4.510253,8.61029956 3.93926098,9.56569545 L1.02953845,14.4343045 C0.460940067,15.3856954 0.697235865,16.7041427 1.56670429,17.3865039 L4.3396252,19.5627 C3.99615694,20.98815 3.81417466,22.47345 3.81417466,24 C3.81417466,25.52655 3.99615694,27.01185 4.33946993,28.43745 L1.56664823,30.6136461 C0.701412305,31.29271 0.458546432,32.6104357 1.02953845,33.5658144 L3.93926098,38.4343356 C4.50785937,39.3857093 5.80883543,39.8469023 6.84161092,39.4657166 L10.1972186,38.2272 C12.4310045,40.2504 15.1410188,41.78805 18.1477635,42.6666 L18.7047023,46.0291917 C18.8849794,47.1176391 19.9305456,48 21.0301902,48 L26.9696546,48 C28.0737089,48 29.1145906,47.1192727 29.2951424,46.0291363 L29.8520812,42.66645 C32.8588259,41.7879 35.5688402,40.25025 37.8026261,38.22705 L41.1582338,39.4655666 C42.192559,39.8473243 43.489606,39.3895783 44.0606159,38.434217 L46.9704294,33.5657845 C47.5390455,32.6144282 47.3027392,31.2959605 46.4332396,30.6135388 L43.6602195,28.43715 C44.0036878,27.01185 44.18567,25.52655 44.18567,24 C44.18567,22.47345 44.0036878,20.98815 43.6603748,19.56255 Z" id="path-1"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-3">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.68627451 0 0 0 0 0.71372549 0 0 0 0 0.733333333 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Efficiency_icon">
<g id="Group-23">
<path d="M40,80 C62.09139,80 80,62.09139 80,40 C80,17.90861 62.09139,0 40,0 C17.90861,0 0,17.90861 0,40 C0,62.09139 17.90861,80 40,80 Z" id="Mask" fill="#EFF5FD"></path>
<g id="efficiency" transform="translate(16.000000, 16.000000)">
<g id="XMLID_474_">
<g id="XMLID_476_">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
<use fill="#E7ECED" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
</g>
<ellipse id="XMLID_477_" fill="#FFFFFF" cx="24" cy="24.7741935" rx="14.7096774" ry="14.7096774"></ellipse>
<rect id="XMLID_478_" fill="#0077CE" x="23" y="15" width="2" height="12"></rect>
<rect id="XMLID_3_" fill="#20A0FF" x="23" y="25" width="10" height="2"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/yizhi.svg 0 → 100644
View file @ b51aeab3
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Consistency_icon</title>
<desc>Created with Sketch.</desc>
<defs>
<circle id="path-1" cx="40" cy="40" r="40"></circle>
<rect id="path-3" x="0" y="20" width="5" height="18"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.466666667 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<rect id="path-5" x="10" y="20" width="5" height="18" rx="1"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-6">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.466666667 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<rect id="path-7" x="20" y="20" width="5" height="18" rx="1"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-8">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.466666667 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<rect id="path-9" x="30" y="20" width="5" height="18" rx="1"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-10">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.466666667 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Consistency_icon">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#EFF5FD" xlink:href="#path-1"></use>
<g id="Group-7" mask="url(#mask-2)">
<g transform="translate(22.000000, 21.000000)">
<g id="Rectangle-path" fill="none">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-3"></use>
</g>
<path d="M0,6 C0,5.44771525 0.447365195,5 0.998153687,5 L30,5 L30,7 L0.998153687,7 C0.446888627,7 0,6.55613518 0,6 Z M36,6 L30,12 L30,1.8369702e-16 L36,6 Z" id="Combined-Shape" fill="#7383BF" fill-rule="evenodd"></path>
<g id="Rectangle-path" fill="none">
<use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
<use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-5"></use>
</g>
<g id="Rectangle-path" fill="none">
<use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
<use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-7"></use>
</g>
<g id="Rectangle-path" fill="none">
<use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
<use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-9"></use>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/zhinan.svg 0 → 100644
View file @ b51aeab3
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>landingpage_doc_icon</title>
<desc>Created with Sketch.</desc>
<defs>
<circle id="path-1" cx="60" cy="60" r="60"></circle>
<path d="M72.7204805,55 C72.3212048,55 71.8159682,55.2518631 71.583447,55.5744208 L68.6205739,59.6845744 L30.9907556,59.6845744 C28.7867221,59.6845744 27,61.4733181 27,63.6828821 L27,94.9419923 C27,97.1501967 28.7995699,98.9402999 31.0045707,98.9402999 L88.9954293,98.9402986 C91.2070926,98.9402985 93,97.1496402 93,94.9439184 L93,58.9963801 C93,56.7892403 91.2181016,55.1145608 89.0176162,55.1367239 L72.7204805,55 Z" id="path-3"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.466666667 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="landingpage_doc_icon">
<g id="Group">
<g id="Group-2">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#EFF5FD" xlink:href="#path-1"></use>
<path d="M27,59.0081112 C27,56.7944925 28.7811186,55 30.9977467,55 L47.586785,55 C47.9921103,55 48.5248696,55.2699688 48.7688582,55.5925758 L51.7488113,59.5327339 L88.2558934,59.5327339 C88.6668521,59.5327339 89,59.8566406 89,60.264357 L89,96.2683769 C89,96.6724412 88.6664231,97 88.260519,97 L27.739481,97 C27.3310769,97 27,96.6619234 27,96.2710114 L27,59.0081112 Z" id="Rectangle" fill="#0077CE" mask="url(#mask-2)"></path>
<g id="Group-9" mask="url(#mask-2)">
<g transform="translate(32.000000, 15.000000)">
<path d="M42.2461314,0 L55.7180083,13.3923872 L55.7180083,68.1865965 C55.7180083,70.6980461 53.6816152,72.7323226 51.1722822,72.7323226 L4.62309912,72.7323226 C2.11376615,72.7323226 0.0773730599,70.6980461 0.0773730599,68.1865965 L0.0773730599,4.54572606 C0.0773730599,2.0342765 2.11400132,0 4.62309912,0 L42.2461314,0 Z" id="Shape" fill="#FFFFFF"></path>
<path d="M55.6523941,13.4558849 L46.8080847,13.4558849 C44.2987517,13.4558849 42.2623586,11.4194918 42.2623586,8.91015881 L42.2623586,0.0453890595 L55.6523941,13.4558849 Z" id="Shape" fill="#D9EDFE"></path>
<polygon id="Path" fill="#EFF5FD" points="6.16906036 36.1924682 30.1690604 36.1924682 30.1690604 31.6467421 6.16906036 31.6467421"></polygon>
<polygon id="Path" fill="#20A0FF" points="6 8 6 12 33 12 32.999746 8"></polygon>
<polygon id="Path" fill="#EFF5FD" points="6.16906036 21.9292516 6.16906036 25.9292516 51.1690604 25.9292516 51.1690604 21.9292516"></polygon>
</g>
</g>
<g id="Rectangle-Copy" mask="url(#mask-2)">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-3"></use>
</g>
<text id="Elemnet" mask="url(#mask-2)" font-family="PingFangSC-Semibold, PingFang SC" font-size="14" font-weight="500" line-spacing="30" fill="#0077CE">
<tspan x="33" y="82">Elemnet</tspan>
</text>
</g>
<path d="M100.506172,19.2377548 C100.506172,18.3510985 98.1302446,14.3428431 98.1302446,14.3428431 C97.1524382,12.6147723 97.7714617,11.9727442 99.5476926,12.9005283 C99.5476926,12.9005283 103.291856,15.0088747 104.371071,15.0088747 C105.964825,15.0088747 109.247423,12.9669733 109.247423,12.9669733 C110.978808,11.9987744 111.601512,12.6239259 110.672549,14.3744675 C110.672549,14.3744675 108.657471,17.7591636 108.657471,19.2377548 C108.657471,20.4447205 110.721457,24.1294186 110.721457,24.1294186 C111.638756,25.887084 110.992695,26.4842846 109.270392,25.4942095 C109.270392,25.4942095 105.670245,23.2219716 104.371071,23.2219716 C102.997276,23.2219716 99.4459871,25.4942095 99.4459871,25.4942095 C97.7415162,26.4981217 97.2289914,25.9503 98.257018,24.2518201 C98.257018,24.2518201 100.506172,21.0366554 100.506172,19.2377548 Z" id="Rectangle-22" fill="#FFACAD" transform="translate(104.403023, 19.235844) rotate(135.000000) translate(-104.403023, -19.235844) "></path>
<path d="M97.9563635,39.9441042 C97.9563635,39.2992632 96.6862323,37.2218793 96.6862323,37.2218793 C95.7222557,35.5024456 96.3641883,34.8700535 98.1353687,35.7777355 C98.1353687,35.7777355 99.9823157,36.868555 100.7672,36.868555 C101.926293,36.868555 103.446659,35.8329857 103.446659,35.8329857 C105.184667,34.8806167 105.817305,35.5201588 104.908745,37.2811628 C104.908745,37.2811628 103.884581,38.8687651 103.884581,39.9441042 C103.884581,40.8218974 104.955257,42.6329686 104.955257,42.6329686 C105.86009,44.3910456 105.207738,44.9955706 103.466102,44.0173303 C103.466102,44.0173303 101.712053,42.8417164 100.7672,42.8417164 C99.7680756,42.8417164 98.045543,44.0173303 98.045543,44.0173303 C96.3308398,45.0108454 95.8049382,44.4506312 96.8077051,42.7354455 C96.8077051,42.7354455 97.9563635,41.2523955 97.9563635,39.9441042 Z" id="Rectangle-22" fill="#FFD6D2" transform="translate(100.800150, 39.935899) rotate(135.000000) translate(-100.800150, -39.935899) "></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/ziyuan.svg 0 → 100644
View file @ b51aeab3
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="134px" height="120px" viewBox="0 0 134 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>landingpage_sketch_icon</title>
<desc>Created with Sketch.</desc>
<defs>
<circle id="path-1" cx="83" cy="60" r="60"></circle>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="landingpage_sketch_icon">
<g id="Group-7" transform="translate(-9.000000, 0.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#EFF5FD" xlink:href="#path-1"></use>
<path d="M139,95 L139,97 C139,98.1 137.734375,99 136.1875,99 L29.8125,99 C28.2665625,99 27,98.1 27,97 L27,95 L139,95 Z" id="Shape" fill="#0077CE"></path>
<g id="Group-15" transform="translate(0.000000, 10.000000)">
<g id="Group-9" transform="translate(26.000000, 72.000000)" fill="#20A0FF">
<polygon id="Rectangle-731" points="9 0.00446001895 105 0.00446001895 112.920506 13 0.989849838 13.3241507"></polygon>
</g>
<path d="M35,6.44020485 C35,5.09251693 36.0946646,4 37.4331334,4 L128.566867,4 C129.910649,4 131,5.09565993 131,6.44020485 L131,72 L35,72 L35,6.44020485 Z" id="Rectangle-731" fill="#D9EDFE"></path>
<rect id="Rectangle-13" fill="#FFFFFF" x="41" y="10" width="84" height="56"></rect>
<g id="Group-11" transform="translate(87.589150, 38.649096) scale(-1, 1) translate(-87.589150, -38.649096) translate(58.589150, 20.149096)">
<rect id="Rectangle-733" fill="#FF9EA4" x="0.425215481" y="0.00674799284" width="15.7704918" height="15.7012987"></rect>
<rect id="Rectangle-733-Copy-2" fill="#FFCFC7" x="21.0481663" y="20.5392155" width="15.7704918" height="15.7012987"></rect>
<rect id="Rectangle-733-Copy" fill="#EFF5FD" x="21.0481663" y="0.00674799284" width="15.7704918" height="15.7012987"></rect>
<rect id="Rectangle-733-Copy" fill="#EFF5FD" x="41.6711171" y="20.5392155" width="15.7704918" height="15.7012987"></rect>
</g>
<g id="Group-20" transform="translate(25.049180, 14.701299)">
<circle id="Oval-4" fill="#20A0FF" cx="15" cy="15" r="15"></circle>
<path d="M21.9841499,12.529882 L19.7537045,10.8565359 C19.7036857,10.8045119 19.64724,10.7618965 19.5852055,10.73035 L18.0826867,9.60297906 C17.970913,9.5194086 17.8348284,9.47402597 17.6948318,9.47402597 L11.9736917,9.47402597 C11.8336951,9.47402597 11.6973311,9.5194086 11.5858368,9.60297906 L7.68409413,12.529882 C7.40046821,12.7426823 7.3451402,13.1433777 7.56058413,13.4239752 L14.3226173,22.228759 C14.5799764,22.563871 15.0882676,22.563871 15.3456267,22.228759 L22.1079393,13.4239752 C22.3233833,13.1433777 22.2677758,12.7426823 21.9841499,12.529882 L21.9841499,12.529882 Z" id="Sketch" fill="#FFFFFF"></path>
</g>
<g id="Group-16" transform="translate(19.933385, 18.437778) rotate(-26.000000) translate(-19.933385, -18.437778) translate(4.933385, 5.437778)">
<rect id="Rectangle-23" fill="#FFCFC7" x="25.5270465" y="0.854317229" width="3.8499999" height="11.0799999"></rect>
<path d="M10.981875,8.34555266 C10.4466477,7.48650426 10.7986346,6.36966093 11.70694,5.8837127 L11.70694,5.8837127 C12.6426096,5.38312444 13.8231901,5.65474724 14.3702344,6.53276219 L18.3008157,12.8414083 C18.836043,13.7004567 18.484056,14.8173001 17.5757507,15.3032483 L17.5757507,15.3032483 C16.6400811,15.8038366 15.4595006,15.5322138 14.9124562,14.6541988 L10.981875,8.34555266" id="Rectangle-23" fill="#FF9EA4"></path>
<path d="M0.957497949,21.3837223 C0.0308614262,20.8877504 -0.266799001,19.7574503 0.25738261,18.9157632 L0.25738261,18.9157632 C0.797356108,18.0487189 1.96581964,17.7369549 2.91291496,18.2438771 L9.71791212,21.8861756 C10.6445486,22.3821474 10.9422091,23.5124476 10.4180275,24.3541347 L10.4180275,24.3541347 C9.87805396,25.221179 8.70959043,25.532943 7.76249511,25.0260208 L0.957497949,21.3837223" id="Rectangle-23" fill="#FFCFC7"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/zujian.svg 0 → 100644
View file @ b51aeab3
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>landingpage_demo_icon</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="68" height="12"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.466666667 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<polyline id="path-3" points="95.3575369 19.0075852 100.34433 8.39738533 104.940596 12.254111 95.3575369 19.0075852"></polyline>
<mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-1" y="-1" width="11.5830596" height="12.6101999">
<rect x="94.3575369" y="7.39738533" width="11.5830596" height="12.6101999" fill="white"></rect>
<use xlink:href="#path-3" fill="black"></use>
</mask>
<polyline id="path-5" points="95.7283485 30.6666667 101.271652 25.1568381 103.271652 28.6209397 95.7283485 30.6666667"></polyline>
<mask id="mask-6" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-1" y="-1" width="9.54330305" height="7.50982859">
<rect x="94.7283485" y="24.1568381" width="9.54330305" height="7.50982859" fill="white"></rect>
<use xlink:href="#path-5" fill="black"></use>
</mask>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="landingpage_demo_icon">
<g id="Group-17">
<circle id="Oval-7" fill="#EFF5FD" cx="60" cy="60" r="60"></circle>
<g id="Group-8" transform="translate(10.000000, 16.000000)">
<g id="Rectangle-27">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
<rect id="Rectangle-36" fill="#FFFFFF" x="0" y="14" width="68" height="69"></rect>
<path d="M9.04980469,81.7578125 C10.9093537,78.8748781 11.4501953,73 11.4501953,73 L75.4501953,73 L75.4501953,77.9414074 C75.4501953,80.735191 73.1859826,83 70.383591,83 L10.0666043,83 C7.26839602,83 7.24754402,82.9859929 9.04980469,81.7578125 C9.04980469,81.7578125 7.81646034,83.6699164 9.04980469,81.7578125 Z" id="Rectangle-36-Copy" fill="#D9EDFE"></path>
<circle id="Oval-8" fill="#0077CE" cx="6.5" cy="6.5" r="2.5"></circle>
<circle id="Oval-8" fill="#0077CE" cx="14.5" cy="6.5" r="2.5"></circle>
<circle id="Oval-8" fill="#0077CE" cx="22.5" cy="6.5" r="2.5"></circle>
<rect id="Rectangle-20" fill="#20A0FF" x="24" y="57" width="20" height="6" rx="3"></rect>
<rect id="Rectangle-37" fill="#D9EDFE" x="8" y="20" width="15" height="4"></rect>
<rect id="Rectangle-37" fill="#EFF5FD" x="8" y="27" width="52" height="4"></rect>
<rect id="Rectangle-37" fill="#D9EDFE" x="8" y="37" width="15" height="4"></rect>
<rect id="Rectangle-37" fill="#EFF5FD" x="8" y="44" width="52" height="4"></rect>
</g>
<g id="Group-8" transform="translate(58.000000, 39.000000)">
<polygon id="Combined-Shape" fill="#6496DC" points="12 29.8863636 14.5 29.8863637 17 34.8863636 12 34.8863636"></polygon>
<path d="M14,33.8884505 C14,34.9918675 14.5735636,35.1980873 15.2746482,34.3567858 L19,29.8863636 L14,29.8863636 L14,33.8884505 Z" id="Combined-Shape" fill="#80A8E1"></path>
<g id="Group-12" transform="translate(0.000000, 0.136364)">
<g id="Group-19">
<rect id="Rectangle-20" fill="#6496DD" x="0" y="0.863636364" width="49" height="29"></rect>
<rect id="Rectangle-20" fill="#80A8E1" x="2" y="0.863636364" width="49" height="29"></rect>
<polygon id="Fill-1" fill="#FFFFFF" points="34.4995277 21.9823228 40.7552877 15.6968482 34.4995277 9.41128616 32.6225734 11.2972638 37.0018433 15.6971981 32.6225734 20.0965784"></polygon>
<polygon id="Fill-2" fill="#FFFFFF" points="18.25576 9.41128616 12 15.6967316 18.25576 21.982177 20.1327143 20.096316 15.7534444 15.6963817 20.1327143 11.2971181"></polygon>
<polygon id="Fill-3" fill="#FFFFFF" points="30.6244081 9.37209893 24.6448241 23.2004929 22.4809422 22.8285106 28.4605725 9"></polygon>
</g>
</g>
</g>
<g id="Triangle-3">
<use fill="#FFACAD" fill-rule="evenodd" xlink:href="#path-3"></use>
<use stroke="#FFACAD" mask="url(#mask-4)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xlink:href="#path-3"></use>
</g>
<g id="Triangle-3">
<use fill="#FFD6D2" fill-rule="evenodd" xlink:href="#path-5"></use>
<use stroke="#FFD6D2" mask="url(#mask-6)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xlink:href="#path-5"></use>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/styles/common.css
View file @ b51aeab3
...@@ -86,3 +86,8 @@ ...@@ -86,3 +86,8 @@
} }
} }
} }
.container {
width: 960px;
margin: 0 auto;
}
examples/components/demo-block.vue 0 → 100644
View file @ b51aeab3
<template>
<div
class="demo-block"
:class="[blockClass, { 'hover': hovering }]"
@mouseenter="hovering = true"
@mouseleave="hovering = false">
<slot></slot>
<div class="demo-block-control" @click="isExpanded = !isExpanded">
<i :class="iconClass"></i>
<span v-show="hovering">{{ controlText }}</span>
</div>
</div>
</template>
<style>
.demo-block {
border: solid 1px #eaeefb;
border-radius: 4px;
transition: .2s;
&.hover {
box-shadow: 0 6px 18px 0 rgba(232, 237, 250, .5);
}
.source {
padding: 24px;
}
.meta {
background-color: #fbfcfd;
border-top: solid 1px #eaeefb;
clear: both;
overflow: hidden;
height: 0;
transition: height .2s;
}
.description {
padding: 18px 24px;
width: 40%;
box-sizing: border-box;
border-left: solid 1px #eaeefb;
float: right;
font-size: 14px;
line-height: 1.5;
color: #5e6d82;
p {
margin: 0;
}
code {
background-color: #f4faff;
border: solid 1px #eaeefb;
margin: 0 4px;
padding: 0 4px;
font-size: 12px;
}
}
.highlight {
width: 60%;
border-right: solid 1px #eaeefb;
pre {
margin: 0;
}
code.hljs {
padding: 18px 24px;
margin: 0;
line-height: 1.4;
background-color: #fbfcfd;
border: none;
max-height: none;
border-radius: 0;
&::before {
content: none;
}
}
}
.demo-block-control {
border-top: solid 1px #eaeefb;
height: 36px;
box-sizing: border-box;
background-color: #fff;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
text-align: center;
margin-top: -1px;
color: #d3dce6;
cursor: pointer;
transition: .2s;
i {
font-size: 12px;
line-height: 36px;
}
span {
font-size: 14px;
line-height: 36px;
}
&:hover {
color: #20a0ff;
background-color: rgba(32, 159, 255, .05);
}
}
}
</style>
<script type="text/babel">
export default {
data() {
return {
hovering: false,
isExpanded: false
};
},
computed: {
blockClass() {
return `demo-${ this.$router.currentRoute.path.split('/').pop() }`;
},
iconClass() {
return this.isExpanded ? 'el-icon-caret-top' : 'el-icon-caret-bottom';
},
controlText() {
return this.isExpanded ? '隐藏代码' : '显示代码';
},
codeArea() {
return this.$el.getElementsByClassName('meta')[0];
},
codeAreaHeight() {
if (this.$el.getElementsByClassName('description').length > 0) {
return Math.max(this.$el.getElementsByClassName('description')[0].clientHeight, this.$el.getElementsByClassName('highlight')[0].clientHeight);
}
return this.$el.getElementsByClassName('highlight')[0].clientHeight;
}
},
watch: {
isExpanded(val) {
this.codeArea.style.height = val ? `${ this.codeAreaHeight + 1 }px` : '0';
}
},
mounted() {
this.$nextTick(() => {
let highlight = this.$el.getElementsByClassName('highlight')[0];
if (this.$el.getElementsByClassName('description').length === 0) {
highlight.style.width = '100%';
highlight.borderRight = 'none';
}
});
}
};
</script>
\ No newline at end of file
examples/components/footer.vue 0 → 100644
View file @ b51aeab3
<template>
<footer class="footer">
<div class="container">
<div class="footer-main">
<p class="footer-main-title">Element 1.0 Hydrogen</p>
<span class="footer-main-link">反馈建议</span>
<span class="footer-main-link"><router-link to="/changelog">更新日志</router-link></span>
</div>
<div class="footer-social">
<el-popover
ref="weixin"
placement="top"
width="120"
class="footer-popover"
trigger="hover">
<div class="footer-popover-title">饿了么 UED</div>
<img src="../assets/images/qrcode.png" alt="">
</el-popover>
<i class="doc-icon-weixin elementdoc" v-popover:weixin></i>
<a href="//github.com/elemefe" target="_blank">
<i class="doc-icon-github elementdoc"></i>
</a>
</div>
</div>
</footer>
</template>
<style>
.footer {
height: 120px;
background-color: #324057;
color: #fff;
width: 100%;
z-index: 1000;
margin-top: -120px;
* {
word-spacing: 0;
}
.container {
height: 100%;
}
.footer-main {
font-size: 0;
padding-top: 40px;
display: inline-block;
.footer-main-title {
line-height: 1;
font-size: 22px;
margin: 0;
}
.footer-main-link {
display: inline-block;
margin: 12px 18px 0 0;
line-height: 1;
font-size: 12px;
color: #8492a6;
a {
color: #8492a6;
text-decoration: none;
}
}
}
.footer-social {
float: right;
line-height: 120px;
.footer-popover {
padding: 0;
min-width: 120px;
line-height: normal;
box-shadow: 0 0 11px 0 rgba(174, 187, 211, 0.24);
.footer-popover-title {
border-bottom: solid 1px #eaeefb;
height: 30px;
line-height: 30px;
text-align: center;
color: #99a9bf;
background-color: #f8f9fe;
}
img {
size: 100px;
margin: 10px;
}
}
.elementdoc {
transition: .3s;
display: inline-block;
line-height: 32px;
text-align: center;
color: #324057;
background-color: #fff;
size: 32px;
border-radius: 50%;
font-size: 22px;
&:hover {
color: #fff;
transform: scale(1.2);
}
}
.doc-icon-weixin {
margin-right: 36px;
&:hover {
background-color: #26CB72;
}
}
.doc-icon-github {
margin-right: 0;
transform: translateY(8px);
position: relative;
&::before {
position: absolute;
left: 4px;
bottom: -6px;
}
&:hover {
transform: translateY(8px) scale(1.2);
background-color: #437AC0;
}
}
}
}
</style>
examples/components/header.vue 0 → 100644
View file @ b51aeab3
<style scoped>
.headerWrapper {
height: 80px;
}
.header {
height: 80px;
background-color: #20a0ff;
color: #fff;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
line-height: @height;
z-index: 100;
position: relative;
.container {
height: 100%;
}
h1 {
margin: 0;
float: left;
font-size: 32px;
font-weight: normal;
a {
color: #fff;
text-decoration: none;
display: block;
}
span {
font-size: 12px;
display: inline-block;
width: 34px;
height: 18px;
border: 1px solid #fff;
text-align: center;
line-height: 18px;
vertical-align: middle;
margin-left: 10px;
border-radius: 3px;
}
}
.nav {
float: right;
height: 100%;
line-height: 80px;
background: transparent;
@utils-clearfix;
padding: 0;
margin: 0;
}
.nav-item {
margin: 0;
float: left;
list-style: none;
position: relative;
cursor: pointer;
a {
text-decoration: none;
color: #fff;
display: block;
padding: 0 20px;
&.active:before {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background:#99d2fc;
}
}
}
/*.el-menu-item__bar {
background-color: #99d2fc;
}*/
}
.header-fixed {
position: fixed;
top: -80px;
box-shadow: 0px 2px 8px 0px rgba(50,63,87,0.45);
}
.header-hangUp {
top: 0;
}
</style>
<template>
<div class="headerWrapper">
<header class="header"
:style="headerStyle"
:class="{
'header-fixed': isFixed,
'header-hangUp': hangUp
}">
<div class="container">
<h1><router-link to="/">Element<span>Beta</span></router-link></h1>
<ul class="nav">
<li class="nav-item">
<router-link
active-class="active"
to="/guide/design"
exact>指南
</router-link>
</li>
<li class="nav-item">
<router-link
active-class="active"
to="/component/button"
exact>组件
</router-link>
</li>
<li class="nav-item">
<router-link
active-class="active"
to="/resource"
exact>资源
</router-link>
</li>
</ul>
</div>
</header>
</div>
</template>
<script>
export default {
data() {
return {
active: '',
isFixed: false,
headerStyle: {},
hangUp: false
};
},
watch: {
},
mounted() {
var scrollTop = 0;
function scroll(fn) {
var beforeScrollTop = document.body.scrollTop;
window.addEventListener('scroll', () => {
const afterScrollTop = document.body.scrollTop;
var delta = afterScrollTop - beforeScrollTop;
if (delta === 0) return false;
fn(delta > 0 ? 'down' : 'up');
beforeScrollTop = afterScrollTop;
scrollTop = afterScrollTop;
}, false);
}
scroll((direction) => {
const bounding = this.$el.getBoundingClientRect();
if (bounding.bottom < 0) {
this.isFixed = true;
this.$nextTick(() => {
this.headerStyle.transition = 'all .5s ease';
});
}
if (bounding.top === 0) {
this.isFixed = false;
this.$nextTick(() => {
this.headerStyle.transition = '';
});
}
this.hangUp = direction === 'up';
});
}
};
</script>
examples/components/lightbox.vue deleted 100644 → 0
View file @ c41f8d5b
<template>
<div class="dialog d-popup-center"
v-if="rendered"
v-show="visible"
:transition="transition">
<div class="dialog-content">
<slot></slot>
</div>
</div>
</template>
<script>
import Popup from 'vue-popup';
import 'vue-popup/lib/popup.css';
export default {
mixins: [Popup],
props: {
showClose: {
type: Boolean,
default: true
},
showModal: {
type: Boolean,
default: true
},
modal: {
default: true
},
closeOnClickModal: {
default: true
}
},
methods: {
willClose() {
this.visible = false;
}
}
};
</script>
<style lang="css">
.dialog {
position: fixed;
img {
width: 60vw;
}
}
.app__main .d-modal {
margin: 0;
}
</style>
\ No newline at end of file
examples/components/side-nav.vue 0 → 100644
View file @ b51aeab3
<style>
.side-nav {
width: 100%;
box-sizing: border-box;
border-right: 1px solid #eaeefa;
li {
list-style: none;
}
ul {
padding: 0;
margin: 0;
}
.nav-item {
a {
font-size:18px;
color:#5e6d82;
line-height: 32px;
height: 32px;
margin: 10px 0;
padding: 0 0 0 10px;
text-decoration: none;
border-left: 2px solid transparent;
display: block;
&.active {
color: #20a0ff;
border-left-color: #20a0ff;
}
}
.nav-item {
a {
font-size: 14px;
padding-left: 20px;
&:hover {
background-color: #eee;
}
}
}
}
.nav-group__title {
color: #99a9bf;
padding-left: 15px;
line-height: 32px;
}
}
</style>
<template>
<div class="side-nav">
<ul>
<li class="nav-item" v-for="item in data">
<a v-if="!item.path">{{item.name}}</a>
<router-link
v-else
active-class="active"
:to="base + item.path"
exact
v-text="item.title || item.name">
</router-link>
<ul class="pure-menu-list sub-nav" v-if="item.children">
<li class="nav-item" v-for="navItem in item.children">
<router-link
class=""
active-class="active"
:to="base + navItem.path"
exact
v-text="navItem.title || navItem.name">
</router-link>
</li>
</ul>
<template v-if="item.groups">
<div class="nav-group" v-for="group in item.groups">
<div class="nav-group__title">{{group.groupName}}</div>
<ul class="pure-menu-list">
<li
class="nav-item"
v-for="navItem in group.list"
v-if="!navItem.disabled">
<router-link
active-class="active"
:to="base + navItem.path"
exact
v-text="navItem.title"></router-link>
</li>
</ul>
</div>
</template>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
data: Array,
base: {
type: String,
default: ''
}
},
data() {
return {
highlights: [],
navState: []
};
}
};
</script>
examples/components/table-filter.vue deleted 100644 → 0
View file @ c41f8d5b
<template>
<div class="table-filter" v-show="visible">haha</div>
</template>
<style scoped>
.table-filter {
position: absolute 0 100px * *;
background-color: #fff;
}
</style>
<script type="text/babel">
export default {
data() {
return {
visible: true
};
},
events: {
toggleFilterPopup(visibleFilter) {
this.visible = visibleFilter === 'tag';
}
},
mounted() {
console.log('popup ready');
}
};
</script>
\ No newline at end of file
examples/components/toc-item.vue deleted 100644 → 0
View file @ c41f8d5b
<template>
<li class="item">
<a
class="toc__link"
:class="{ 'active': active === item.id }"
:href="'#' + encodeURIComponent(item.heading)"
v-text="item.heading">
</a>
<ol
class="group"
v-if="item.children"
v-show="active >= item.id && active <= (item.id + item.children.length || 0)">
<el-toc-item
:item="sub"
class="item"
:active="active"
v-for="sub in item.children">
</el-toc-item>
</ol>
</li>
</template>
<script>
/**
* 浮动在右边的目录子项
*/
export default {
name: 'el-toc-item',
props: {
item: Object,
active: Number
},
methods: {
encodeURIComponent(source) {
return encodeURIComponent(source);
}
}
};
</script>
<style lang="css">
a {
color: inherit;
text-decoration: none;
}
</style>
examples/components/toc.vue deleted 100644 → 0
View file @ c41f8d5b
<template>
<nav
class="toc"
:class="{ 'toc--fixed': fixed }"
:style="{ 'top': offset + 'px' }">
<ol class="group">
<el-toc-item
v-for="item in toc"
class="title"
:active="active"
:item="item">
</el-toc-item>
</ol>
</nav>
</template>
<script>
import ElTocItem from './toc-item';
import E from 'oui-dom-events';
/**
* 浮动在右边的目录
*/
export default {
name: 'toc',
components: {
ElTocItem
},
props: {
main: {
type: String,
required: true
}
},
data() {
return {
toc: [],
offset: 0,
fixed: false,
active: 0
};
},
events: {
['element.example.reload']() {
this.$nextTick(() => {
this.toc = [];
this.anchors = this.findAllAnchors();
this.scrollWrap = document.querySelector('body');
this.currentHeaderHeight = document.querySelector('.app__main:first-of-type').offsetTop;
this.fixedOffsetTop = document.querySelector('.app__menu__label').offsetTop;
this.updateFixed();
this.generateTOC(this.anchors, this.toc);
E.off(this.scrollWrap, 'mousewheel.toc.activecurrent');
this.scrollActiveCurrent();
});
}
},
ready() {
this.scrollAutoFixed();
},
methods: {
/**
* @see https://github.com/chjj/marked/issues/334
*/
generateTOC(anchors, toc) {
if (document.querySelector('.no-toc')) {
return;
}
let cache = {};
for (let key in anchors) {
const current = this.fetchAnchorData(anchors[key]);
const level = current.level || 1;
const last = cache[level - 1];
current.id = Number(key);
if (last) {
last.children = (last.children || []).concat(current);
} else {
cache[level] = current;
toc.push(current);
}
}
},
fetchAnchorData(anchor) {
const head = anchor.parentNode;
const level = head.tagName.match(/\d/g)[0];
const heading = head.getAttribute('id');
return { level, heading };
},
updateFixed() {
if (this.scrollWrap.scrollTop <= this.fixedOffsetTop / 2) {
this.offset = this.currentHeaderHeight;
this.fixed = false;
return;
}
if (this.fixed) return;
this.offset = this.fixedOffsetTop;
this.fixed = true;
},
scrollAutoFixed() {
E.on(document, 'mousewheel.toc.autofixed', this.updateFixed);
},
findAllAnchors() {
return Array.prototype.slice.call(document.querySelectorAll('.anchor'));
},
scrollActiveCurrent() {
const anchors = this.findAllAnchors();
const body = this.scrollWrap;
const distances = [];
let current;
let index = 0;
let max;
for (let anchor of anchors) {
distances.push(anchor.offsetTop);
}
current = distances[index];
max = distances.length - 1;
this.active = index;
// 记录当前滚动档位
// 判断当前滚动和下个档位
E.on(this.scrollWrap, 'mousewheel.toc.activecurrent', e => {
const scrollTop = body.scrollTop;
while (index < max && scrollTop > current) {
current = distances[++index];
this.active = index;
}
while (index && scrollTop < current) {
current = distances[--index];
this.active = index;
}
});
}
},
beforeDestroy() {
E.off(this.scrollWrap, 'mousewheel.toc.autofixed');
E.off(this.scrollWrap, 'mousewheel.toc.activecurrent');
}
};
</script>
<style lang="css">
.toc {
color: #999;
margin-right: 40px;
margin-top: -14px;
position: absolute;
right: 0;
top: 0;
width: 160px;
&.toc--fixed {
position: fixed;
}
.group {
font-size: 13px;
list-style-type: none;
margin: 0;
padding-left: 12px;
}
.item {
margin: 14px 0;
.toc__link:hover,
.toc__link.active {
color: #216fc1;
}
.group {
border-left: 1px solid rgba(31, 109, 191, .5);
}
}
.title {
margin-bottom: 18px;
}
}
</style>
examples/data/cascader.json deleted 100644 → 0
View file @ c41f8d5b
[
{
"label": "普通业务",
"value": "普通业务",
"children": [
{
"label": "业务1",
"value": "业务1",
"children": [
{
"label": "业务5",
"value": "业务5",
"children": []
}
]
},
{
"label": "业务2",
"value": "业务2",
"children": []
}
]
},
{
"label": "会员业务",
"value": "会员业务",
"children": []
}
]
examples/data/select-disabled.json deleted 100644 → 0
View file @ c41f8d5b
[
{
"label": "选项1",
"value": "结果1"
},
{
"label": "选项2",
"value": "结果2",
"disabled": true
},
{
"label": "选项3",
"value": "结果3"
},
{
"label": "选项4",
"value": "结果4"
}
]
examples/data/select-group.json deleted 100644 → 0
View file @ c41f8d5b
{
"gourp1": [
{
"label": "选项1",
"value": "结果1"
},
{
"label": "选项2",
"value": "结果2"
},
{
"label": "选项3",
"value": "结果3"
},
{
"label": "选项4",
"value": "结果4"
},
{
"label": "选项5",
"value": "结果5"
},
{
"label": "选项6",
"value": "结果6"
}
],
"gourp2": [
{
"label": "选项7",
"value": "结果7"
},
{
"label": "选项8",
"value": "结果8"
},
{
"label": "选项9",
"value": "结果9"
},
{
"label": "选项10",
"value": "结果10"
},
{
"label": "选项11",
"value": "结果11"
},
{
"label": "选项12",
"value": "结果12"
}
]
}
\ No newline at end of file
examples/data/select-normal.json deleted 100644 → 0
View file @ c41f8d5b
[
{
"label": "选项1",
"value": "结果1",
"remark": "remark1"
},
{
"label": "选项2",
"value": "结果2",
"remark": "remark2"
},
{
"label": "选项3",
"value": "结果3",
"remark": "remark3"
},
{
"label": "选项4",
"value": "结果4",
"remark": "remark4"
},
{
"label": "选项5",
"value": "结果5",
"remark": "remark5"
},
{
"label": "选项6",
"value": "结果6",
"remark": "remark6"
}
]
examples/docs/alert.md
View file @ b51aeab3
...@@ -11,137 +11,161 @@ ...@@ -11,137 +11,161 @@
.demo-box.demo-alert .el-alert { .demo-box.demo-alert .el-alert {
margin: 20px 0 0; margin: 20px 0 0;
} }
</style>
## 基本用法 .demo-box.demo-alert .el-alert:first-child {
margin: 0;
}
</style>
Alert 组件提供四种主题，由`type`属性指定，默认值为`info`，下面的示例展示了四种不同的主题。 ## Alert 警告
<div class="demo-box demo-alert"> ### 基本用法
<el-alert title="成功提示的文案" type="success"></el-alert>
<el-alert title="消息提示的文案" type="info"></el-alert>
<el-alert title="警告提示的文案" type="warning"></el-alert>
<el-alert title="错误提示的文案" type="error"></el-alert>
</div>
::: demo Alert 组件提供四种主题，由 `type` 属性指定，默认值为 `info`。
```html ```html
<el-alert title="成功提示的文案" type="success"></el-alert> <template>
<el-alert title="消息提示的文案" type="info"></el-alert> <el-alert
<el-alert title="警告提示的文案" type="warning"></el-alert> title="成功提示的文案"
<el-alert title="错误提示的文案" type="error"></el-alert> type="success">
</el-alert>
<el-alert
title="消息提示的文案"
type="info">
</el-alert>
<el-alert
title="警告提示的文案"
type="warning">
</el-alert>
<el-alert
title="错误提示的文案"
type="error">
</el-alert>
</template>
``` ```
:::
## 自定义关闭按钮 ### 自定义关闭按钮
在alert组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。
`closable`属性决定是否可关闭，接受`boolean`，默认为`true`。
你可以设置`close-text`属性来代替右侧的关闭图标，注意：`close-text`必须为文本。
设置`close`事件来设置关闭时的回调。
下面的示例展示了上述三种情况：
<div class="demo-box demo-alert">
<el-alert title="不可关闭的alert" type="success" :closable="false"></el-alert>
<el-alert title="自定义close-text" type="info" close-text="知道了"></el-alert>
<el-alert title="设置了回调的alert" type="warning" @close="hello"></el-alert>
</div>
::: demo 在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。`closable` 属性决定是否可关闭，接受 `boolean`，默认为 `true`。你可以设置 `close-text` 属性来代替右侧的关闭图标，注意：`close-text` 必须为文本。设置 `close` 事件来设置关闭时的回调。
```html ```html
<el-alert title="不可关闭" type="success" :closable="false"></el-alert> <template>
<el-alert title="自定义close-text" type="info" close-text="知道了"></el-alert> <el-alert
<el-alert title="设置了回调的alert" type="warning" @close="hello"></el-alert> title="不可关闭的 alert"
``` type="success"
:closable="false">
## 带有 icon </el-alert>
<el-alert
title="自定义 close-text"
type="info"
close-text="知道了">
</el-alert>
<el-alert
title="设置了回调的 alert"
type="warning"
@close="hello">
</el-alert>
</template>
通过设置`show-icon`属性来显示alert的icon，这能更有效的向用户展示你的显示意图。 <script>
export default {
methods: {
hello() {
alert('Hello World!');
}
}
}
</script>
```
:::
<div class="demo-box demo-alert"> ### 带有 icon
<el-alert title="成功提示的文案" type="success" show-icon></el-alert>
<el-alert title="消息提示的文案" type="info" show-icon></el-alert>
<el-alert title="警告提示的文案" type="warning" show-icon></el-alert>
<el-alert title="错误提示的文案" type="error" show-icon></el-alert>
</div>
::: demo 通过设置 `show-icon` 属性来显示 Alert 的 icon，这能更有效的向用户展示你的显示意图。
```html ```html
<el-alert title="成功提示的文案" type="success" show-icon></el-alert> <template>
<el-alert title="消息提示的文案" type="info" show-icon></el-alert> <el-alert
<el-alert title="警告提示的文案" type="warning" show-icon></el-alert> title="成功提示的文案"
<el-alert title="错误提示的文案" type="error" show-icon></el-alert> type="success"
show-icon>
</el-alert>
<el-alert
title="消息提示的文案"
type="info"
show-icon>
</el-alert>
<el-alert
title="警告提示的文案"
type="warning"
show-icon>
</el-alert>
<el-alert
title="错误提示的文案"
type="error"
show-icon>
</el-alert>
</template>
``` ```
:::
## 带有辅助性文字介绍 ### 带有辅助性文字介绍
除了必填的`title`属性外，你可以设置`description`属性来帮助你更好的介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。
<div class="demo-box demo-alert">
<el-alert title="带辅助性文字介绍" type="success" description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"></el-alert>
</div>
::: demo 除了必填的 `title` 属性外，你可以设置 `description` 属性来帮助你更好的介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。
```html ```html
<el-alert <template>
<el-alert
title="带辅助性文字介绍" title="带辅助性文字介绍"
type="success" type="success"
description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"> description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
</el-alert> </el-alert>
</template>
``` ```
:::
## 带有 icon 和辅助性文字介绍 ### 带有 icon 和辅助性文字介绍
最后，这是一个同时具有 icon 和辅助性文字的样例。
<div class="demo-box demo-alert">
<el-alert title="成功提示的文案" type="success" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
<el-alert title="消息提示的文案" type="info" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
<el-alert title="警告提示的文案" type="warning" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
<el-alert title="错误提示的文案" type="error" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
</div>
::: demo 最后，这是一个同时具有 icon 和辅助性文字的样例。
```html ```html
<el-alert <template>
<el-alert
title="成功提示的文案" title="成功提示的文案"
type="success" type="success"
description="文字说明文字说明文字说明文字说明文字说明文字说明" description="文字说明文字说明文字说明文字说明文字说明文字说明"
show-icon> show-icon>
</el-alert> </el-alert>
<el-alert
<el-alert
title="消息提示的文案" title="消息提示的文案"
type="info" type="info"
description="文字说明文字说明文字说明文字说明文字说明文字说明" description="文字说明文字说明文字说明文字说明文字说明文字说明"
show-icon> show-icon>
</el-alert> </el-alert>
<el-alert
<el-alert
title="警告提示的文案" title="警告提示的文案"
type="warning" type="warning"
description="文字说明文字说明文字说明文字说明文字说明文字说明" description="文字说明文字说明文字说明文字说明文字说明文字说明"
show-icon> show-icon>
</el-alert> </el-alert>
<el-alert
<el-alert
title="错误提示的文案" title="错误提示的文案"
type="error" type="error"
description="文字说明文字说明文字说明文字说明文字说明文字说明" description="文字说明文字说明文字说明文字说明文字说明文字说明"
show-icon> show-icon>
</el-alert> </el-alert>
</template>
``` ```
:::
## Attributes ### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| **title** | 标题，**必选参数** | string | | | | **title** | 标题，**必选参数** | string | — | — |
| type | 主题 | string | 'success', 'warning', 'info', 'error' | 'info' | | type | 主题 | string | success/warning/info/error | info |
| description | 辅助性文字 | string | | | | description | 辅助性文字 | string | — | — |
| closable | 是否可关闭 | boolean | | true | | closable | 是否可关闭 | boolean | — | true |
| close-text | 关闭按钮自定义文本 | string | | | | close-text | 关闭按钮自定义文本 | string | — | — |
| showIcon | 是否显示图标 | boolean | | false | | showIcon | 是否显示图标 | boolean | — | false |
## Events ### Events
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- | |---------- |-------- |---------- |
| close | 关闭alert时触发的事件 | | | close | 关闭alert时触发的事件 | — |
examples/docs/guideline.md deleted 100644 → 0
View file @ c41f8d5b
<section class="guideline no-toc">
<h2>选择合适的导航</h2>
<p>选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适(方向不明确)，以下是「侧栏导航」和「顶部导航」的区别。</p>
<h3>侧栏导航：</h3>
<p>可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。</p>
<table>
<tbody>
<tr>
<td>一级类目</td>
<td>
<lightbox :visible.sync="showIndexDialog1">
<img src="~examples/assets/images/guide1.png" alt="一级类目">
</lightbox>
<img @click="showIndexDialog1 = true" src="~examples/assets/images/guide1.png" alt="一级类目">
<p>适用于结构简单的网站；只有一级页面时，不需要使用面包屑。</p>
</td>
</tr>
<tr>
<td>二级类目</td>
<td>
<lightbox :visible.sync="showIndexDialog2">
<img src="~examples/assets/images/guide2.png" alt="二级类目">
</lightbox>
<img @click="showIndexDialog2 = true" src="~examples/assets/images/guide2.png" alt="二级类目">
<p>侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。</p>
</td>
</tr>
<tr>
<td>三级类目</td>
<td>
<lightbox :visible.sync="showIndexDialog3">
<img src="~examples/assets/images/guide3.png" alt="三级类目">
</lightbox>
<img @click="showIndexDialog3 = true" src="~examples/assets/images/guide3.png" alt="三级类目">
<p>适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。</p>
</td>
</tr>
</tbody>
</table>
<h3>顶部导航：</h3>
<p>顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。</p>
<table>
<tbody>
<tr>
<td>一级类目</td>
<td>
<lightbox :visible.sync="showIndexDialog4">
<img src="~examples/assets/images/guide4.png" alt="一级类目">
</lightbox>
<img @click="showIndexDialog4 = true" src="~examples/assets/images/guide4.png" alt="一级类目">
<p>适用于导航较少，页面篇幅较长的网站；</p>
</td>
</tr>
</tbody>
</table>
</section>
<script>
import Lightbox from 'examples/components/lightbox';
module.exports = {
name: 'guideline',
components: {
Lightbox
},
data() {
return {
showIndexDialog1: false,
showIndexDialog2: false,
showIndexDialog3: false,
showIndexDialog4: false
};
}
};
</script>
<style lang="css">
.guideline {
img {
width: 500px;
display: block;
margin-bottom: 19px;
box-shadow: 1px 2px 3px rgba(0, 0, 0, .2);
}
table {
background-color: #f8f8f8;
width: 100%;
p {
margin: 0;
width: 500px;
}
}
td {
padding: 36px;
}
tr {
border-bottom: 1px solid #e4e4e4;
&:last-child {
border-bottom: 0;
}
}
td:first-child {
background-color: #f3f3f3;
width: 21%;
min-width: 100px;
text-align: center;
color: #666;
font-size: 14px;
}
}
</style>
\ No newline at end of file
examples/docs/notification.md
View file @ b51aeab3
...@@ -73,15 +73,14 @@ ...@@ -73,15 +73,14 @@
## 基本用法 ## 基本用法
Notification 组件提供通知功能，Element 注册了`$notify`方法，接收一个`options`字面量参数，最简单的条件下，你可以设置`title`字段和`message`字段，用于设置通知的标题和正文，下面是一个最简单的情况的样例： ::: demo Notification 组件提供通知功能，Element 注册了 `$notify` 方法，接收一个 `options` 字面量参数，在最简单的情况下，你可以设置 `title` 字段和 `message` 字段，用于设置通知的标题和正文。
<div class="demo-box demo-notification">
<el-button :plain="true" @click.native="open">点击展示 Notification</el-button>
</div>
```html ```html
<template> <template>
<el-button :plain="true" @click.native="open">点击展示 Notification</el-button> <el-button
plain
@click.native="open">
点击展示 Notification
</el-button>
</template> </template>
<script> <script>
...@@ -97,26 +96,33 @@ Notification 组件提供通知功能，Element 注册了`$notify`方法，接 ...@@ -97,26 +96,33 @@ Notification 组件提供通知功能，Element 注册了`$notify`方法，接
} }
</script> </script>
``` ```
:::
## 带有 icon ## 带有 icon
Element 也为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。 ::: demo Element 为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。通过 `type` 字段来设置，除此以外的值将被忽略。
通过`type`字段来设置，除此以外的值将被忽略，下面是四种类型的样例：
<div class="demo-box demo-notification">
<el-button :plain="true" @click.native="open2">成功</el-button>
<el-button :plain="true" @click.native="open3">警告</el-button>
<el-button :plain="true" @click.native="open4">消息</el-button>
<el-button :plain="true" @click.native="open5">错误</el-button>
</div>
```html ```html
<template> <template>
<el-button :plain="true" @click.native="open2">成功</el-button> <el-button
<el-button :plain="true" @click.native="open3">警告</el-button> plain
<el-button :plain="true" @click.native="open4">消息</el-button> @click.native="open2">
<el-button :plain="true" @click.native="open5">错误</el-button> 成功
</el-button>
<el-button
plain
@click.native="open3">
警告
</el-button>
<el-button
plain
@click.native="open4">
消息
</el-button>
<el-button
plain
@click.native="open5">
错误
</el-button>
</template> </template>
<script> <script>
...@@ -157,20 +163,18 @@ Element 也为 Notification 组件准备了四种通知类型：`success`, `warn ...@@ -157,20 +163,18 @@ Element 也为 Notification 组件准备了四种通知类型：`success`, `warn
} }
</script> </script>
``` ```
:::
## 不会自动关闭 ## 不会自动关闭
默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置 `duration`，可以控制关闭的时间间隔，特别的是，如果设置为`0`，则不会自动关闭，下面是一个不会自动关闭的样例： ::: demo 默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置 `duration`，可以控制关闭的时间间隔，特别的是，如果设置为 `0`，则不会自动关闭。注意：`duration` 接收一个 `Number`，单位为毫秒，默认为 `4500`。
注意：`duration`接收一个`Number`，单位为毫秒，默认为`4500`。
<div class="demo-box demo-notification">
<el-button :plain="true" @click.native="open6">不会自动关闭的 Notification</el-button>
</div>
```html ```html
<template> <template>
<el-button :plain="true" @click.native="open6">不会自动关闭的 Notification</el-button> <el-button
plain
@click.native="open6">
不会自动关闭的 Notification
</el-button>
</template> </template>
<script> <script>
...@@ -187,18 +191,18 @@ Element 也为 Notification 组件准备了四种通知类型：`success`, `warn ...@@ -187,18 +191,18 @@ Element 也为 Notification 组件准备了四种通知类型：`success`, `warn
} }
</script> </script>
``` ```
:::
## 回调函数 ## 回调函数
Element 为关闭操作设置了回调函数，在关闭时会触发`onClose`，你可以通过设置`onClose`参数来处理后续操作，它是一个`Function`，下面是一个样例，会在控制台输出：Notification 已关闭。 ::: demo Element 为关闭操作设置了回调函数，在关闭时会触发 `onClose`，你可以通过设置 `onClose` 参数来处理后续操作，它是一个 `Function`。本例会在控制台输出：Notification 已关闭。
<div class="demo-box demo-notification">
<el-button :plain="true" @click.native="open7">带有回调函数的 Notification</el-button>
</div>
```html ```html
<template> <template>
<el-button :plain="true" @click.native="open7">带有回调函数的 Notification</el-button> <el-button
plain
@click.native="open7">
带有回调函数的 Notification
</el-button>
</template> </template>
<script> <script>
...@@ -219,6 +223,7 @@ Element 为关闭操作设置了回调函数，在关闭时会触发`onClose`， ...@@ -219,6 +223,7 @@ Element 为关闭操作设置了回调函数，在关闭时会触发`onClose`，
} }
</script> </script>
``` ```
:::
## 全局方法 ## 全局方法
......
examples/entry.js
View file @ b51aeab3
...@@ -4,9 +4,17 @@ import VueRouter from 'vue-router'; ...@@ -4,9 +4,17 @@ import VueRouter from 'vue-router';
import configRouter from './route.config'; import configRouter from './route.config';
import Element from 'main/index.js'; import Element from 'main/index.js';
import 'packages/theme-default/src/index.css'; import 'packages/theme-default/src/index.css';
import demoBlock from './components/demo-block.vue';
import MainFooter from './components/footer.vue';
import MainHeader from './components/header.vue';
import SideNav from './components/side-nav';
Vue.use(Element); Vue.use(Element);
Vue.use(VueRouter); Vue.use(VueRouter);
Vue.component('demo-block', demoBlock);
Vue.component('main-footer', MainFooter);
Vue.component('main-header', MainHeader);
Vue.component('side-nav', SideNav);
const router = new VueRouter({ const router = new VueRouter({
base: __dirname, base: __dirname,
......
examples/index.template.html
View file @ b51aeab3
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1471936010_8874195.css">
<title>ELEMENT</title> <title>ELEMENT</title>
</head> </head>
<body> <body>
......
examples/nav.config.json
View file @ b51aeab3
[ [
{ {
"group": "使用说明", "name": "基础组件",
"groups": [{
"groupName": "Basic",
"list": [ "list": [
{ {
"path": "/quickstart", "path": "/layout",
"name": "快速上手"
},
{
"path": "/development",
"name": "开发指南"
},
{
"path": "/changelog",
"name": "更新日志"
}
]
},
{
"group": "设计指南",
"list": [
{
"path": "/menu",
"name": "导航",
"description": "导航(Navigation) 可以解决用户在访问页面时：在哪里，去哪里，怎么去的问题。一般导航会有「侧栏导航」和「顶部导航」2种类型。"
}
]
},
{
"group": "Basic",
"list": [
{
"path": "/button",
"name": "按钮 (button)", "name": "按钮 (button)",
"title": "Button 按钮", "title": "Layout 布局",
"description": "常用的操作按钮" "description": ""
}, },
{ {
"path": "/icon", "path": "/icon",
...@@ -41,10 +16,10 @@ ...@@ -41,10 +16,10 @@
"title": "Icon 图标" "title": "Icon 图标"
}, },
{ {
"path": "/tag", "path": "/button",
"name": "标签 (tag)", "name": "按钮 (button)",
"title": "Tag 标签", "title": "Button 按钮",
"description": "Tag 标签" "description": "常用的操作按钮"
}, },
{ {
"path": "/dialog", "path": "/dialog",
...@@ -57,18 +32,6 @@ ...@@ -57,18 +32,6 @@
"name": "弹框 (message-box)", "name": "弹框 (message-box)",
"title": "message-box 弹框" "title": "message-box 弹框"
}, },
{
"path": "/popover",
"name": "弹出框 (popover)",
"title": "popover 弹出框",
"description": "收纳具体内容和相关操作, 激活后弹出展现"
},
{
"path": "/tooltip",
"name": "文字提示 (tooltip)",
"title": "tooltip 文字提示",
"description": "优雅地展示文字提示信息"
},
{ {
"path": "/alert", "path": "/alert",
"name": "警告 (alert)", "name": "警告 (alert)",
...@@ -102,18 +65,13 @@ ...@@ -102,18 +65,13 @@
] ]
}, },
{ {
"group": "Form", "groupName": "Form",
"list": [ "list": [
{ {
"path": "/autocomplete", "path": "/radio",
"name": "自动完成 (autocomplete)", "name": "单选框 (radio)",
"title": "Autocomplete 自动完成" "title": "Radio 单选框",
}, "description": "用于在多个备选项选中单个选项。"
{
"path": "/select",
"name": "选择器 (select)",
"title": "Select 选择器",
"description": "当选项过多时, 使用下拉菜单展示并选择内容"
}, },
{ {
"path": "/checkbox", "path": "/checkbox",
...@@ -121,12 +79,6 @@ ...@@ -121,12 +79,6 @@
"title": "Checkbox 多选框", "title": "Checkbox 多选框",
"description": "用于在多个可选项中进行多项选择。" "description": "用于在多个可选项中进行多项选择。"
}, },
{
"path": "/radio",
"name": "单选框 (radio)",
"title": "Radio 单选框",
"description": "用于在多个备选项选中单个选项。"
},
{ {
"path": "/input", "path": "/input",
"name": "输入框 (input)", "name": "输入框 (input)",
...@@ -137,109 +89,110 @@ ...@@ -137,109 +89,110 @@
"name": "计数器 (input-number)", "name": "计数器 (input-number)",
"title": "Input Number 计数器" "title": "Input Number 计数器"
}, },
{
"path": "/select",
"name": "选择器 (select)",
"title": "Select 选择器",
"description": "当选项过多时, 使用下拉菜单展示并选择内容"
},
{ {
"path": "/switch", "path": "/switch",
"name": "开关 (switch)", "name": "开关 (switch)",
"title": "Switch 开关", "title": "Switch 开关",
"description": "用于两种对立状态的切换。" "description": "用于两种对立状态的切换。"
}, },
{
"path": "/slider",
"name": "滑块 (slider)",
"title": "Slider 滑块",
"description": "通过拖动滑块在一个固定区间内进行选择"
},
{ {
"path": "/time-picker", "path": "/time-picker",
"name": "时间选择器（time-picker）", "name": "时间选择器（time-picker）",
"title": "时间选择器", "title": "TimePicker 时间选择器",
"description": "用于选择或输入时间" "description": "用于选择或输入时间"
}, },
{ {
"path": "/date-picker", "path": "/date-picker",
"name": "日期选择器（date-picker）", "name": "日期选择器（date-picker）",
"title": "日期选择器", "title": "DatePicker",
"description": "用于选择或输入时间" "description": "用于选择或输入时间"
}, },
{ {
"path": "/datetime-picker", "path": "/datetime-picker",
"name": "日期时间选择器", "name": "日期时间选择器",
"title": "日期时间选择器", "title": "DatetimePicker",
"description": "用于选择或输入日期时间" "description": "用于选择或输入日期时间"
}, },
{ {
"path": "/upload", "path": "/upload",
"name": "上传 (upload)", "name": "上传 (upload)",
"title": "upload 上传", "title": "Upload 上传",
"description": "文件上传组件" "description": "文件上传组件"
}, },
{ {
"path": "/form", "path": "/form",
"name": "表单 (form)", "name": "表单 (form)",
"title": "form 表单", "title": "Form 表单",
"description": "一个多功能的并带有字段验证的表单组件" "description": "一个多功能的并带有字段验证的表单组件"
}, },
{ {
"path": "/slider", "path": "/autocomplete",
"name": "滑块 (slider)", "name": "自动完成 (autocomplete)",
"title": "slider 滑块", "title": "Autocomplete 自动完成"
"description": "通过拖动滑块在一个固定区间内进行选择"
}, },
{ {
"path": "/rate", "path": "/rate",
"name": "评分 (rate)", "name": "评分 (rate)",
"title": "评分组件" "title": "Rate 评分组件"
} }
] ]
}, },
{ {
"group": "Nav", "groupName": "Data",
"list": [ "list": [
{ {
"path": "/tabs", "path": "/table",
"name": "标签页 (tabs)", "name": "表格 (table)",
"title": "tabs 标签页", "title": "Table 表格",
"description": "富展现的标签页" "description": "用于展示多条结构类似的数据, 可对数据进行排序、筛选、对比或其他自定义操作。"
},
{
"path": "/breadcrumb",
"name": "面包屑 (breadcrumb)",
"title": "breadcrumb 面包屑",
"description": ""
}, },
{ {
"path": "/dropdown", "path": "/tag",
"name": "下拉菜单 (dropdown)", "name": "标签 (tag)",
"title": "Dropdown 下拉菜单" "title": "Tag 标签",
"description": "Tag 标签"
}, },
{ {
"path": "/steps", "path": "/tooltip",
"name": "步骤条 (steps)", "name": "文字提示 (tooltip)",
"title": "Steps 步骤", "title": "Tooltip 文字提示",
"description": "引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。" "description": "优雅地展示文字提示信息"
}
]
}, },
{ {
"group": "Data", "path": "/popover",
"list": [ "name": "弹出框 (popover)",
{ "title": "Popover 弹出框",
"path": "/table", "description": "收纳具体内容和相关操作, 激活后弹出展现"
"name": "表格 (table)",
"title": "Table 表格",
"description": "用于展示多条结构类似的数据, 可对数据进行排序、筛选、对比或其他自定义操作。"
}, },
{ {
"path": "/progress", "path": "/progress",
"name": "进度条 (progress)", "name": "进度条 (progress)",
"title": "progress 进度条", "title": "Progress 进度条",
"description": "" "description": ""
}, },
{
"path": "/tree",
"name": "tree (tree)",
"title": "Tree 树形控件"
},
{ {
"path": "/pagination", "path": "/pagination",
"name": "分页 (pagination)", "name": "分页 (pagination)",
"title": "Pagination 分页", "title": "Pagination 分页",
"description": "当数据量过多时, 使用分页分解数据" "description": "当数据量过多时, 使用分页分解数据"
}, },
{
"path": "/tree",
"name": "tree (tree)",
"title": "tree"
},
{ {
"path": "/badge", "path": "/badge",
"name": "标记 (badge)", "name": "标记 (badge)",
...@@ -247,5 +200,44 @@ ...@@ -247,5 +200,44 @@
"description": "出现在按钮、图标旁的数字或状态标记" "description": "出现在按钮、图标旁的数字或状态标记"
} }
] ]
},
{
"groupName": "Nav",
"list": [
{
"path": "/tabs",
"name": "标签页 (tabs)",
"title": "Tabs 标签页",
"description": "富展现的标签页"
},
{
"path": "/breadcrumb",
"name": "面包屑 (breadcrumb)",
"title": "Breadcrumb 面包屑",
"description": ""
},
{
"path": "/dropdown",
"name": "下拉菜单 (dropdown)",
"title": "Dropdown 下拉菜单"
},
{
"path": "/steps",
"name": "步骤条 (steps)",
"title": "Steps 步骤",
"description": "引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。"
}
]
}]
},
{
"name": "安装指南",
"children": [{
"path": "/quickstart",
"name": "快速上手"
}, {
"path": "/development",
"name": "开发指南"
}]
} }
] ]
examples/pages/changelog.vue 0 → 100644
View file @ b51aeab3
<template>
<div>changelog</div>
</template>
\ No newline at end of file
examples/pages/component.vue 0 → 100644
View file @ b51aeab3
<style>
.page-component {
padding: 50px 0 95px;
}
.el-col {
box-sizing: border-box;
}
.page-component .content > {
h2, h3, h4, h5 {
font-weight: normal;
color: #1f2f3d;
}
h2 {
margin: 0;
font-size: 28px;
}
h3 {
margin: 45px 0 15px;
font-size: 22px;
}
p {
font-size: 14px;
color: #5e6d82;
}
table {
width: 100%;
background-color: #fff;
color: #5e6d82;
font-size: 14px;
strong {
font-weight: normal;
}
th {
text-align: left;
}
td, th {
border-bottom: 1px solid #eaeefb;
padding: 10px 0;
}
}
}
</style>
<template>
<div class="page-component container">
<el-row :gutter="25">
<el-col :span="6">
<side-nav :data="navsData" base="/component"></side-nav>
</el-col>
<el-col :span="18">
<router-view class="content"></router-view>
</el-col>
</el-row>
</div>
</template>
<script>
import { navs } from '../route.config';
export default {
data() {
return {
navsData: navs
};
}
};
</script>
examples/pages/design.vue 0 → 100644
View file @ b51aeab3
<style scoped>
.cards {
margin-bottom: 70px;
}
.card {
background: #fbfcfd;
height: 204px;
text-align: center;
img {
margin: 40px auto 25px;
}
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/yizhi.svg" alt="Consistency">
<h4>一致</h4>
<span>Consistency</span>
</div>
</el-col>
<el-col :span="6">
<div class="card">
<img src="~examples/assets/images/fankui.svg" alt="Feedback">
<h4>反馈</h4>
<span>Feedback</span>
</div>
</el-col>
<el-col :span="6">
<div class="card">
<img src="~examples/assets/images/xiaolv.svg" alt="Efficiency">
<h4>效率</h4>
<span>Efficiency</span>
</div>
</el-col>
<el-col :span="6">
<div class="card">
<img src="~examples/assets/images/kekong.svg" 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/guide.vue 0 → 100644
View file @ b51aeab3
<style>
.el-col {
box-sizing: border-box;
}
.page-guide {
padding: 50px 0 95px;
.content {
padding-left: 25px;
border-left: 1px solid #eaeefa;
margin-left: -1px;
h3 {
font-size: 22px;
font-weight: normal;
margin: 0 0 30px;
color: #1f2d3d;
}
p {
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-guide container">
<el-row>
<el-col :span="5">
<side-nav :data="navsData" base="/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 {
navsData: [
{
path: '/design',
name: '设计原则'
},
{
path: '/nav',
name: '导航'
}
]
};
}
};
</script>
examples/pages/index.vue 0 → 100644
View file @ b51aeab3
<style scoped>
.banner {
height: 420px;
background-color: #20a0ff;
color: #fff;
margin-bottom: 130px;
.container {
position: relative;
}
img {
position: absolute;
top: 15px;
right: -105px;
}
}
.banner-desc {
padding-top: 80px;
font-size: 46px;
position: relative;
z-index: 10;
h2 {
font-size: 80px;
margin: 0;
}
}
.cards {
margin: 0 auto 110px;
width: 960px;
.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;
}
}
.card {
height: 430px;
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: 66px auto 60px;
}
h3 {
margin: 0;
font-size: 18px;
color: #1f2f3d;
font-weight: normal;
}
p {
font-size: 14px;
color: #99a9bf;
padding: 0 25px;
}
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;
box-shadow:0px 6px 18px 0px rgba(232,237,250,0.50);
transition: all .3s;
text-decoration: none;
display: block;
&:hover {
background-color: #20a0ff;
color: #fff;
background: #20a0ff;
}
}
&:hover {
bottom: 6px;
}
}
</style>
<template>
<div>
<div class="banner">
<div class="container">
<div class="banner-desc">
<h2>Element</h2>
<div id="source" style="display: none;" ref="type-source">
快速搭建页面<br/>只为这样的你:<span data-type="back" ref="type-job">设计师</span>
</div>
<div id="output-wrap">
<span id="output" ref="type-output"></span>
<span class="typing-cursor typing-cursor-white">|</span>
</div>
</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/zujian.svg" 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/zhinan.svg" alt="">
<h3>组件</h3>
<p>使用组件 Demo 快速体验交互细节;使用前端框架封装的代码帮助工程师快速开发。</p>
<router-link
active-class="active"
to="/component/button"
exact>查看详情
</router-link>
</div>
</li>
<li>
<div class="card">
<img src="~examples/assets/images/ziyuan.svg" alt="">
<h3>资源</h3>
<p>下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。</p>
<router-link
active-class="active"
to="/resource"
exact>查看详情
</router-link>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
import Typing from 'typing.js';
require('typing.js/typing.css');
export default {
mounted() {
var typing = new Typing({
source: this.$refs['type-source'],
output: this.$refs['type-output'],
delay: 80,
done: function() {}
});
typing.start();
}
};
</script>
examples/pages/nav.vue 0 → 100644
View file @ b51aeab3
<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 {
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);
opacity: 0;
}
</style>
<template>
<div>
<h2>导航</h2>
<div class="block">
<p>导航可以解决用户在访问页面时：在哪里，去哪里，怎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>
<div class="mask" v-show="showDialog" @click="showDialog = false"></div>
<div class="dialog-img" v-show="showDialog" @click="showDialog = false">
<transition name="zoom">
<div class="imgWrap" :style="imgStyle" v-show="showDialog">
<img src="~examples/assets/images/navbar_2.png" alt="">
</div>
</transition>
</div>
</div>
</template>
<script>
export default {
data() {
return {
imgUrl: '',
imgBound: {},
showDialog: false,
imgStyle: {}
};
},
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.imgStyle.transformOrigin = `${ev.clientX - offset.left}px ${ev.clientY - offset.top}px`;
this.imgStyle.width = imgWidth + 'px';
this.showDialog = true;
}
}
};
</script>
examples/pages/resource.vue 0 → 100644
View file @ b51aeab3
<style scoped>
.page-resource {
padding-top: 40px;
}
.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;
}
}
.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;
}
h3 {
margin: 0 0 10px;
font-size: 18px;
color: #1f2f3d;
font-weight: normal;
}
p {
font-size: 14px;
color: #99a9bf;
padding: 0 30px;
margin: 0;
}
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-resource container">
<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="">下载</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="">下载</a>
</div>
</li>
<li>
<div class="card">
<img src="~examples/assets/images/Module.svg" alt="">
<h3>组件交互文档</h3>
<p>进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节</p>
<a href="">下载</a>
</div>
</li>
</ul>
</div>
</div>
</template>
examples/route.config.js
View file @ b51aeab3
import navConfig from './nav.config.json'; import navConfig from './nav.config.json';
const registerRoute = (config) => { const registerRoute = (config) => {
let route = []; let route = [{
config path: '/component',
.map(nav => component: require('./pages/component.vue'),
nav.list.map(page => { children: []
if (page.path === '/changelog') return; }];
function addRoute(page) {
const component = require(`./docs${page.path}.md`); const component = require(`./docs${page.path}.md`);
route.push({ route[0].children.push({
path: page.path, path: page.path.slice(1),
meta: { meta: {
title: page.title || page.name, title: page.title || page.name,
description: page.description description: page.description
}, },
component: component.default || component component: component.default || component
}); });
}) }
); config
.map(nav => {
if (nav.groups) {
nav.groups.map(group => {
group.list.map(page => {
addRoute(page);
});
});
}
if (nav.children) {
nav.children.map(page => {
addRoute(page);
});
}
});
return { route, navs: config }; return { route, navs: config };
}; };
const route = registerRoute(navConfig); const route = registerRoute(navConfig);
route.route.push({ let guideRoute = {
path: '/guide',
name: '指南',
component: require('./pages/guide.vue'),
children: [{
path: 'design',
name: '设计原则',
component: require('./pages/design.vue')
}, {
path: 'nav',
name: '导航',
component: require('./pages/nav.vue')
}]
};
let resourceRoute = {
path: '/resource',
name: '资源',
component: require('./pages/resource.vue')
};
let indexRoute = {
path: '/',
name: '首页',
component: require('./pages/index.vue')
};
let changeLogRoute = {
path: '/changelog', path: '/changelog',
component: require('../CHANGELOG.md') component: require('./pages/changelog.vue')
}); };
route.route = route.route.concat([indexRoute, guideRoute, resourceRoute, changeLogRoute]);
route.route.push({ route.route.push({
path: '*', path: '*',
......
package.json
View file @ b51aeab3
...@@ -27,7 +27,8 @@ ...@@ -27,7 +27,8 @@
"url": "https://github.com/eleme/element-ui/issues" "url": "https://github.com/eleme/element-ui/issues"
}, },
"dependencies": { "dependencies": {
"object-assign": "^4.1.0" "object-assign": "^4.1.0",
"typing.js": "^2.1.0"
}, },
"devDependencies": { "devDependencies": {
"babel-helper-vue-jsx-merge-props": "^1.0.1", "babel-helper-vue-jsx-merge-props": "^1.0.1",
......
scripts/cooking.demo.js
View file @ b51aeab3
...@@ -4,6 +4,13 @@ var md = require('markdown-it')(); ...@@ -4,6 +4,13 @@ var md = require('markdown-it')();
var Components = require('../components.json'); var Components = require('../components.json');
var striptags = require('strip-tags'); var striptags = require('strip-tags');
function convert(str){
str = str.replace(/(&#x)(\w{4});/gi,function($0){
return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g,"$2"),16));
});
return str;
}
cooking.set({ cooking.set({
entry: { entry: {
app: './examples/entry.js', app: './examples/entry.js',
...@@ -56,27 +63,24 @@ cooking.add('vueMarkdown', { ...@@ -56,27 +63,24 @@ cooking.add('vueMarkdown', {
}], }],
[require('markdown-it-container'), 'demo', { [require('markdown-it-container'), 'demo', {
validate: function(params) { validate: function(params) {
return params.trim().match(/^demo\s+(.*)$/); return params.trim().match(/^demo\s*(.*)$/);
}, },
render: function (tokens, idx) { render: function (tokens, idx) {
var m = tokens[idx].info.trim().match(/^demo\s+(.*)$/); var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
if (tokens[idx].nesting === 1) { if (tokens[idx].nesting === 1) {
var description = (m && m.length > 1) ? m[1] : ''; var description = (m && m.length > 1) ? m[1] : '';
var html = striptags(tokens[idx + 1].content, 'script'); var html = convert(striptags(tokens[idx + 1].content, 'script'));
var descriptionHTML = description var descriptionHTML = description
? '<div class="description">' + md.render(description) + '</div>' ? '<div class="description">' + md.render(description) + '</div>'
: ''; : '';
return `<demo-block class="demo-box">
return `<section class="demo">
<div class="source">${html}</div> <div class="source">${html}</div>
<div class="meta"> <div class="meta">
${descriptionHTML} ${descriptionHTML}
<div class="highlight">`; <div class="highlight">`;
} }
return '</section>\n'; return '</div></div></demo-block>\n';
} }
}] }]
], ],
......
src/index.js
View file @ b51aeab3
...@@ -43,7 +43,7 @@ import Loading from '../packages/loading/index.js'; ...@@ -43,7 +43,7 @@ import Loading from '../packages/loading/index.js';
import Icon from '../packages/icon/index.js'; import Icon from '../packages/icon/index.js';
import Row from '../packages/row/index.js'; import Row from '../packages/row/index.js';
import Col from '../packages/col/index.js'; import Col from '../packages/col/index.js';
// import Upload from '../packages/upload/index.js'; import Upload from '../packages/upload/index.js';
import Progress from '../packages/progress/index.js'; import Progress from '../packages/progress/index.js';
import Spinner from '../packages/spinner/index.js'; import Spinner from '../packages/spinner/index.js';
import Message from '../packages/message/index.js'; import Message from '../packages/message/index.js';
...@@ -98,7 +98,7 @@ const install = function(Vue) { ...@@ -98,7 +98,7 @@ const install = function(Vue) {
Vue.component(Icon.name, Icon); Vue.component(Icon.name, Icon);
Vue.component(Row.name, Row); Vue.component(Row.name, Row);
Vue.component(Col.name, Col); Vue.component(Col.name, Col);
// Vue.component(Upload.name, Upload); Vue.component(Upload.name, Upload);
Vue.component(Progress.name, Progress); Vue.component(Progress.name, Progress);
Vue.component(Spinner.name, Spinner); Vue.component(Spinner.name, Spinner);
Vue.component(Message.name, Message); Vue.component(Message.name, Message);
...@@ -170,7 +170,7 @@ module.exports = { ...@@ -170,7 +170,7 @@ module.exports = {
Icon, Icon,
Row, Row,
Col, Col,
// Upload, Upload,
Progress, Progress,
Spinner, Spinner,
Message, Message,
......
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