test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-11-30 03:07:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

update docs style vol.2

Browse Source
This commit is contained in:
Leopoldthecoder 2017-09-29 15:37:50 +08:00 committed by Black Wayne
parent d66473f005
commit 1214a24d0c
30 changed files with 268 additions and 379 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
examples/app.vue
View File

@ -23,7 +23,7 @@
width: 100%;
left: 0;
top: 0;
z-index: 1000;
z-index: 1500;
border-bottom: solid 1px #ccc;
}
}
@ -60,7 +60,7 @@
font-family: Menlo, Monaco, Consolas, Courier, monospace;
font-size: 12px;
padding: 18px 24px;
background-color: #f9fafc;
background-color: #fafafa;
border: solid 1px #eaeefb;
margin-bottom: 25px;
border-radius: 4px;
@ -123,7 +123,7 @@
background-color: #ECF8FF;
border-radius: 4px;
border-left: #50bfff 5px solid;
margin-top: 20px;
margin: 20px 0;
code {
background-color: rgba(255, 255, 255, .7);
@ -132,32 +132,12 @@
}
.warning {
border-bottom-right-radius: 4px;
border-left: 4px solid #f66;
border-top-right-radius: 4px;
padding: 12px 24px 12px 30px;
position: relative;
background-color: #f8f8f8;
margin-top: 20px;
&::before {
background-color: #f66;
border-radius: 100%;
color: #fff;
content: "!";
font-family: Dosis,Source Sans Pro,Helvetica Neue,Arial,sans-serif;
font-size: 14px;
font-weight: 700;
left: -12px;
line-height: 20px;
position: absolute;
width: 20px;
height: 20px;
text-align: center;
top: 50%;
transform: translateY(-50%);
}
padding: 8px 16px;
background-color: #fff6f7;
border-radius: 4px;
border-left: #FE6C6F 5px solid;
margin: 20px 0;
code {
background-color: rgba(255, 255, 255, .7);
color: #445368;

111
examples/components/demo-block.vue
View File

@ -5,30 +5,43 @@
@mouseenter="hovering = true"
@mouseleave="hovering = false">
<slot name="source"></slot>
<div class="meta">
<div class="description">
<div class="meta" ref="meta">
<div class="description" v-if="$slots.default">
<slot></slot>
<el-tooltip effect="dark" :content="langConfig['tooltip-text']" placement="right">
<el-button size="small" type="primary" @click="goJsfiddle">{{ langConfig['button-text'] }}</el-button>
</el-tooltip>
</div>
<slot name="highlight"></slot>
</div>
<div class="demo-block-control" @click="isExpanded = !isExpanded">
<div
class="demo-block-control"
ref="control"
:class="{ 'is-fixed': fixedControl }"
@click="isExpanded = !isExpanded">
<transition name="arrow-slide">
<i :class="[iconClass, { 'hovering': hovering }]"></i>
</transition>
<transition name="text-slide">
<span v-show="hovering">{{ controlText }}</span>
</transition>
<el-tooltip effect="dark" :content="langConfig['tooltip-text']" placement="right">
<transition name="text-slide">
<el-button
v-show="hovering || isExpanded"
size="small"
type="text"
class="control-button"
@click.stop="goJsfiddle">
{{ langConfig['button-text'] }}
</el-button>
</transition>
</el-tooltip>
</div>
</div>
</template>
<style>
.demo-block {
border: solid 1px #eaeefb;
border-radius: 4px;
border: solid 1px #ebebeb;
border-radius: 3px;
transition: .2s;
&.hover {
@ -48,28 +61,28 @@
}
.meta {
background-color: #f9fafc;
background-color: #fafafa;
border-top: solid 1px #eaeefb;
clear: both;
overflow: hidden;
height: 0;
transition: height .2s;
}
.description {
padding: 18px 24px;
width: 40%;
padding: 20px;
box-sizing: border-box;
border-left: solid 1px #eaeefb;
float: right;
border: solid 1px #ebebeb;
border-radius: 3px;
font-size: 14px;
line-height: 1.8;
color: #5e6d82;
line-height: 22px;
color: #666;
word-break: break-word;
margin: 10px;
background-color: #fff;
p {
margin: 0 0 12px;
line-height: 1.8;
margin: 0;
line-height: 26px;
}
code {
@ -86,9 +99,6 @@
}
.highlight {
width: 60%;
border-right: solid 1px #eaeefb;
pre {
margin: 0;
}
@ -107,7 +117,7 @@
.demo-block-control {
border-top: solid 1px #eaeefb;
height: 36px;
height: 44px;
box-sizing: border-box;
background-color: #fff;
border-bottom-left-radius: 4px;
@ -116,23 +126,28 @@
margin-top: -1px;
color: #d3dce6;
cursor: pointer;
transition: .2s;
position: relative;
&.is-fixed {
position: fixed;
bottom: 0;
width: 868px;
}
i {
font-size: 12px;
line-height: 36px;
line-height: 44px;
transition: .3s;
&.hovering {
transform: translateX(-40px);
}
}
span {
> span {
position: absolute;
transform: translateX(-30px);
font-size: 14px;
line-height: 36px;
line-height: 44px;
transition: .3s;
display: inline-block;
}
@ -147,19 +162,27 @@
opacity: 0;
transform: translateX(10px);
}
.control-button {
line-height: 26px;
position: absolute;
top: 0;
right: 25px;
font-size: 14px;
}
}
}
</style>
<script type="text/babel">
import compoLang from '../i18n/component.json';
import { version } from 'main/index.js';
export default {
data() {
return {
hovering: false,
isExpanded: false
isExpanded: false,
fixedControl: false
};
},
@ -174,10 +197,10 @@
goJsfiddle() {
const { script, html, style } = this.jsfiddle;
const resourcesTpl = '<scr' + 'ipt src="//unpkg.com/vue/dist/vue.js"></scr' + 'ipt>' +
'\n<scr' + `ipt src="//unpkg.com/element-ui@${ version }/lib/index.js"></scr` + 'ipt>';
'\n<scr' + 'ipt src="//unpkg.com/element-ui@next/lib/index.js"></scr' + 'ipt>';
let jsTpl = (script || '').replace(/export default/, 'var Main =').trim();
let htmlTpl = `${resourcesTpl}\n<div id="app">\n${html.trim()}\n</div>`;
let cssTpl = `@import url("//unpkg.com/element-ui@${ version }/lib/theme-chalk/index.css");\n${(style || '').trim()}\n`;
let cssTpl = `@import url("//unpkg.com/element-ui@next/lib/theme-chalk/index.css");\n${(style || '').trim()}\n`;
jsTpl = jsTpl
? jsTpl + '\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount(\'#app\')'
: 'new Vue().$mount(\'#app\')';
@ -206,6 +229,17 @@
document.body.appendChild(form);
form.submit();
},
scrollHandler() {
const { top, bottom, left } = this.$refs.meta.getBoundingClientRect();
this.fixedControl = bottom > document.documentElement.clientHeight &&
top + 44 <= document.documentElement.clientHeight;
this.$refs.control.style.left = this.fixedControl ? `${ left }px` : '0';
},
removeScrollHandler() {
document.removeEventListener('scroll', this.scrollHandler);
}
},
@ -236,7 +270,8 @@
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('description')[0].clientHeight +
this.$el.getElementsByClassName('highlight')[0].clientHeight + 20;
}
return this.$el.getElementsByClassName('highlight')[0].clientHeight;
}
@ -245,6 +280,16 @@
watch: {
isExpanded(val) {
this.codeArea.style.height = val ? `${ this.codeAreaHeight + 1 }px` : '0';
if (!val) {
this.fixedControl = false;
this.$refs.control.style.left = '0';
this.removeScrollHandler();
return;
}
setTimeout(() => {
document.addEventListener('scroll', this.scrollHandler);
this.scrollHandler();
}, 200);
}
},
@ -256,6 +301,10 @@
highlight.borderRight = 'none';
}
});
},
beforeDestroy() {
this.removeScrollHandler();
}
};
</script>

28
examples/components/side-nav.vue
View File

@ -3,6 +3,10 @@
width: 100%;
box-sizing: border-box;
padding-right: 30px;
transition: opacity .5s;
&:hover {
opacity: 1 !important;
}
li {
list-style: none;
@ -105,7 +109,10 @@
}
</style>
<template>
<div class="side-nav" :style="navStyle">
<div
class="side-nav"
@mouseenter="isFade = false"
:style="navStyle">
<ul>
<li class="nav-item" v-for="item in data">
<a v-if="!item.path && !item.href" @click="expandMenu">{{item.name}}</a>
@ -150,6 +157,7 @@
</div>
</template>
<script>
import bus from '../bus';
import compoLang from '../i18n/component.json';
import { version } from 'main/index.js';
@ -168,17 +176,28 @@
isSmallScreen: false,
versions: [],
version,
dropdownVisible: false
dropdownVisible: false,
isFade: false
};
},
watch: {
'$route.path'() {
this.handlePathChange();
},
isFade(val) {
bus.$emit('navFade', val);
}
},
computed: {
navStyle() {
return this.isSmallScreen ? { 'padding-bottom': '60px' } : {};
const style = {};
if (this.isSmallScreen) {
style.paddingBottom = '60px';
}
if (this.isFade) {
style.opacity = '0.5';
}
return style;
},
isComponentPage() {
return /^component-/.test(this.$route.name);
@ -233,6 +252,9 @@
}
},
created() {
bus.$on('fadeNav', () => {
this.isFade = true;
});
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = _ => {
if (xhr.readyState === 4 && xhr.status === 200) {

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

@ -96,7 +96,7 @@ Use a red dot to mark content that needs to be noticed.
```html
<el-badge is-dot class="item">query</el-badge>
<el-badge is-dot class="item">
<el-button class="share-button" icon="share" type="primary"></el-button>
<el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
</el-badge>
<style>

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

@ -15,7 +15,7 @@
padding: 30px;
text-align: center;
border-right: solid 1px #EFF2F6;
float: left;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {

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

@ -263,7 +263,7 @@
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
float: left;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {

2
examples/docs/en-US/color-picker.md
View File

@ -22,7 +22,7 @@
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
float: left;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {

32
examples/docs/en-US/container.md
View File

@ -1,12 +1,12 @@
<style>
.el-header, .el-footer {
background-color: #1f2d3d;
color: #fff;
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #fff;
color: #333;
}
#common-layouts + .demo-container {
@ -15,14 +15,14 @@
}
.el-aside {
background-color: #8492a6;
background-color: #D3DCE6;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #d3dce6;
color: #5e6d82;
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
@ -132,22 +132,22 @@ These components use flex for layout, so please make sure your browser supports
<style>
.el-header, .el-footer {
background-color: #1f2d3d;
color: #fff;
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #8492a6;
color: #fff;
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #d3dce6;
color: #5e6d82;
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
@ -222,6 +222,7 @@ These components use flex for layout, so please make sure your browser supports
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
@ -234,6 +235,7 @@ These components use flex for layout, so please make sure your browser supports
</el-dropdown>
<span>Tom</span>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="Date" width="140">
@ -249,13 +251,13 @@ These components use flex for layout, so please make sure your browser supports
<style>
.el-header {
background-color: #1f2d3d;
color: #fff;
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #fff;
color: #333;
}
</style>

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

@ -1,96 +1,2 @@
## Custom theme
Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea, and this is where our theme customization tools kick in.
## Changing theme color
If you just want to change the theme color of Element, the [theme preview website](https://elementui.github.io/theme-preview/#/en-US) is recommended.
The main color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.
The above website enables you to preview theme of a new theme color in real-time, and it can generate a complete style package based on the new theme color for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section).
## More customizations
If you need more customization than just changing the theme color, please follow these steps:
### Install related tool
First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them.
```shell
npm i element-theme -g
```
Then install the default theme from npm or GitHub.
```shell
# from npm
npm i element-theme-chalk -D
# from GitHub
npm i https://github.com/ElementUI/theme-chalk -D
```
### Initialize variable file
After successfully installing the above packages, a command named `et` is available in CLI (if the packages are installed locally, use `node_modules/.bin/et` instead). Run `-i` to initialize the variable file which outputs to `element-variables.css` by default. And you can specify its output directory as you will.
```shell
et -i [custom output file]
> ✔ Generator variables file
```
In `element-variables.css` you can find all the variables we used to style Element and they are defined in CSS4 style:
```css
:root {
/* Colors
-------------------------- */
--color-primary: #20a0ff;
--color-success: #13ce66;
--color-warning: #f7ba2a;
--color-danger: #ff4949;
--color-info: #50BFFF;
--color-blue: #2e90fe;
--color-blue-light: #5da9ff;
--color-blue-lighter: rgba(var(--color-blue), 0.12);
--color-white: #fff;
--color-black: #000;
--color-grey: #C0CCDA;
```
### Modify variables
Just edit `element-variables.css`, e.g. changing the theme color to red:
```CSS
--color-primary: red;
```
### Build theme
After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`. And if you customized the variable file's output, you need to add a parameter `-c` and variable file's name:
```shell
et
> ✔ build theme font
> ✔ build element theme
```
### Import custom theme
By default the build theme file is placed inside `./theme`. You can specify its output directory with parameter `-o`. Importing your own theme is just like importing the default theme, only this time you import the file you just built:
```javascript
import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
Vue.use(ElementUI)
```
### Import component theme on demand
If you are using `babel-plugin-component` for on-demand import, just modify `.babelrc` and specify `styleLibraryName` to the path where your custom theme is located relative to `.babelrc`. Note that `~` is required:
```json
{
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "~theme"
}
]]]
}
```
If you are unfamiliar with `babel-plugin-component`, please refer to <a href="./#/en-US/component/quickstart">Quick Start</a>. For more details, check out the [project repository](https://github.com/ElementUI/element-theme) of `element-theme`.
Under construction.

14
examples/docs/en-US/installation.md
View File

@ -4,21 +4,21 @@
Installing with npm is recommended and it works seamlessly with [webpack](https://webpack.js.org/).
```shell
npm i element-ui -S
npm i element-ui@next -S
```
### CDN
Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/) , and import JavaScript and CSS file in your page.
Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui@next/) , and import JavaScript and CSS file in your page.
```html
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="https://unpkg.com/element-ui@next/lib/theme-chalk/index.css">
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/element-ui@next/lib/index.js"></script>
```
### Hello world
If you are using CDN, a hello-world page is easy with Element. [Online Demo](http://codepen.io/QingWei-Li/pen/vXwJrY)
If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/leopoldthecuber/hzfpyvg6/)
```html
<!DOCTYPE html>
@ -26,7 +26,7 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="https://unpkg.com/element-ui@next/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
@ -39,7 +39,7 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/element-ui@next/lib/index.js"></script>
<script>
new Vue({
el: '#app',

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

@ -7,7 +7,7 @@
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
float: left;
display: inline-block;
width: 50%;
box-sizing: border-box;

26
examples/docs/en-US/quickstart.md
View File

@ -4,9 +4,7 @@ This part walks you through the process of using Element in a webpack project.
### Use Starter Kit
We provide a general [project template](https://github.com/ElementUI/element-starter) for you. For those who are familiar with [cooking](https://github.com/ElementUI/element-cooking-starter) or [Laravel](https://github.com/ElementUI/element-in-laravel-starter), we also provide corresponding templates, and you can download and use them as well.
If you prefer not to use them, please read the following.
Under construction.
### Config files
@ -42,8 +40,8 @@ Typical configurations for these config files are:
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"element-ui": "^1.0.0",
"vue": "^2.1.6"
"element-ui": "next",
"vue": "^2.4.2"
},
"devDependencies": {
"babel-core": "^6.0.0",
@ -194,7 +192,7 @@ new Vue({
})
```
Full example (Component list reference [components.json](https://github.com/ElemeFE/element/blob/dev/components.json))
Full example (Component list reference [components.json](https://github.com/ElemeFE/element/blob/carbon/components.json))
```javascript
import Vue from 'vue'
@ -215,6 +213,7 @@ import {
RadioGroup,
RadioButton,
Checkbox,
CheckboxButton,
CheckboxGroup,
Switch,
Select,
@ -244,19 +243,23 @@ import {
Col,
Upload,
Progress,
Spinner,
Badge,
Card,
Rate,
Steps,
Step,
Carousel,
Scrollbar,
CarouselItem,
Collapse,
CollapseItem,
Cascader,
ColorPicker,
Transfer,
Container,
Header,
Aside,
Main,
Footer,
Loading,
MessageBox,
Message,
@ -308,19 +311,22 @@ Vue.use(Row)
Vue.use(Col)
Vue.use(Upload)
Vue.use(Progress)
Vue.use(Spinner)
Vue.use(Badge)
Vue.use(Card)
Vue.use(Rate)
Vue.use(Steps)
Vue.use(Step)
Vue.use(Carousel)
Vue.use(Scrollbar)
Vue.use(CarouselItem)
Vue.use(Collapse)
Vue.use(CollapseItem)
Vue.use(Cascader)
Vue.use(ColorPicker)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Footer)
Vue.use(Loading.directive)

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

@ -3,7 +3,7 @@
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
float: left;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {

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

@ -133,7 +133,7 @@ Simple step bars, where `align-center`, `description`, `direction` and `space` w
:::demo
```html
<el-steps :space="200" active="1" simple>
<el-steps :space="200" :active="1" simple>
<el-step title="Step 1" icon="el-icon-edit"></el-step>
<el-step title="Step 2" icon="el-icon-upload"></el-step>
<el-step title="Step 3" icon="el-icon-picture"></el-step>

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

@ -98,7 +98,7 @@
```html
<el-badge is-dot class="item">数据查询</el-badge>
<el-badge is-dot class="item">
<el-button class="share-button" icon="share" type="primary"></el-button>
<el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
</el-badge>
<style>

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

@ -15,7 +15,7 @@
padding: 30px;
text-align: center;
border-right: solid 1px #EFF2F6;
float: left;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {

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

@ -263,7 +263,7 @@
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
float: left;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {

2
examples/docs/zh-CN/color-picker.md
View File

@ -22,7 +22,7 @@
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
float: left;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {

32
examples/docs/zh-CN/container.md
View File

@ -1,12 +1,12 @@
<style>
.el-header, .el-footer {
background-color: #1f2d3d;
color: #fff;
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #fff;
color: #333;
}
#chang-jian-ye-mian-bu-ju + .demo-container {
@ -15,14 +15,14 @@
}
.el-aside {
background-color: #8492a6;
background-color: #D3DCE6;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #d3dce6;
color: #5e6d82;
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
@ -132,22 +132,22 @@
<style>
.el-header, .el-footer {
background-color: #1f2d3d;
color: #fff;
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #8492a6;
color: #fff;
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #d3dce6;
color: #5e6d82;
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
@ -222,6 +222,7 @@
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
@ -234,6 +235,7 @@
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
@ -249,13 +251,13 @@
<style>
.el-header {
background-color: #1f2d3d;
color: #fff;
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #fff;
color: #333;
}
</style>

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

@ -1,98 +1,2 @@
## 自定义主题
Element 默认提供一套主题，CSS 命名采用 BEM 的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面的方法。
## 仅替换主题色
如果仅希望更换 Element 的主题色，推荐使用[在线主题生成工具](https://elementui.github.io/theme-preview)。
Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element 的视觉更加符合具体项目的定位。
使用上述工具，可以很方便地实时预览主题色改变之后的视觉，同时它还可以基于新的主题色生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」和「搭配插件按需引入组件主题」部分）。
如果希望进行除主题色之外的样式定制，请继续阅读。
## 深层次的定制
如果仅仅改变主题色不能满足你的需求，请按以下步骤进行更深层次的主题定制：
### 安装工具
首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。
```shell
npm i element-theme -g
```
安装默认主题，可以从 npm 安装或者从 GitHub 拉取最新代码。
```shell
# 从 npm
npm i element-theme-chalk -D
# 从 GitHub
npm i https://github.com/ElementUI/theme-chalk -D
```
### 初始化变量文件
主题生成工具安装成功后，如果全局安装可以在命令行里通过 `et` 调用工具，如果安装在当前目录下，需要通过 `node_modules/.bin/et` 访问到命令。执行 `-i` 初始化变量文件。默认输出到 `element-variables.css`，当然你可以传参数指定文件输出目录。
```shell
et -i [可以自定义变量文件]
> ✔ Generator variables file
```
如果使用默认配置，执行后当前目录会有一个 `element-variables.css` 文件。内部包含了主题所用到的所有变量，它们使用 CSS4 的风格定义。大致结构如下：
```css
:root {
/* Colors
-------------------------- */
--color-primary: #20a0ff;
--color-success: #13ce66;
--color-warning: #f7ba2a;
--color-danger: #ff4949;
--color-info: #50BFFF;
--color-blue: #2e90fe;
--color-blue-light: #5da9ff;
--color-blue-lighter: rgba(var(--color-blue), 0.12);
--color-white: #fff;
--color-black: #000;
--color-grey: #C0CCDA;
```
### 修改变量
直接编辑 `element-variables.css` 文件，例如修改主题色为红色。
```CSS
--color-primary: red;
```
### 编译主题
保存文件后，到命令行里执行 `et` 编译主题，如果你想启用 `watch` 模式，实时编译主题，增加 `-w` 参数；如果你在初始化时指定了自定义变量文件，则需要增加 `-c` 参数，并带上你的变量文件名
```shell
et
> ✔ build theme font
> ✔ build element theme
```
### 引入自定义主题
默认情况下编译的主题目录是放在 `./theme` 下，你可以通过 `-o` 参数指定打包目录。像引入默认主题一样，在代码里直接引用 `theme/index.css` 文件即可。
```javascript
import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
Vue.use(ElementUI)
```
### 搭配插件按需引入组件主题
如果是搭配 `babel-plugin-component` 一起使用，只需要修改 `.babelrc` 的配置，指定 `styleLibraryName` 路径为自定义主题相对于 `.babelrc` 的路径，注意要加 `~`。
```json
{
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "~theme"
}
]]]
}
```
如果不清楚 `babel-plugin-component` 是什么，请阅读 <a href="./#/zh-CN/component/quickstart">快速上手</a> 一节。更多 `element-theme` 用法请参考[项目仓库](https://github.com/ElementUI/element-theme)。
整理中。

14
examples/docs/zh-CN/installation.md
View File

@ -4,21 +4,21 @@
推荐使用 npm 的方式安装，它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。
```shell
npm i element-ui -S
npm i element-ui@next -S
```
### CDN
目前可以通过 [unpkg.com/element-ui](https://unpkg.com/element-ui/) 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
目前可以通过 [unpkg.com/element-ui](https://unpkg.com/element-ui@next/) 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
```html
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="https://unpkg.com/element-ui@next/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/element-ui@next/lib/index.js"></script>
```
### Hello world
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](http://codepen.io/QingWei-Li/pen/vXwJrY)
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://jsfiddle.net/leopoldthecuber/hzfpyvg6/)
```html
<!DOCTYPE html>
@ -26,7 +26,7 @@ npm i element-ui -S
<head>
<meta charset="UTF-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="https://unpkg.com/element-ui@next/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
@ -39,7 +39,7 @@ npm i element-ui -S
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/element-ui@next/lib/index.js"></script>
<script>
new Vue({
el: '#app',

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

@ -153,7 +153,7 @@
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
float: left;
display: inline-block;
width: 50%;
box-sizing: border-box;

26
examples/docs/zh-CN/quickstart.md
View File

@ -4,9 +4,7 @@
### 使用 Starter Kit
我们提供了通用的[项目模板](https://github.com/ElementUI/element-starter)，你可以直接使用。对于熟悉 [cooking](https://github.com/ElementUI/element-cooking-starter) 或 [Laravel](https://github.com/ElementUI/element-in-laravel-starter) 的用户，我们也准备了相应的模板，同样可以直接下载使用。
如果不希望使用我们提供的模板，请继续阅读。
整理中。
### 配置文件
@ -42,8 +40,8 @@
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"element-ui": "^1.0.0",
"vue": "^2.1.6"
"element-ui": "next",
"vue": "^2.4.2"
},
"devDependencies": {
"babel-core": "^6.0.0",
@ -194,7 +192,7 @@ new Vue({
})
```
完整组件列表和引入方式（完整组件列表以 [components.json](https://github.com/ElemeFE/element/blob/dev/components.json) 为准）
完整组件列表和引入方式（完整组件列表以 [components.json](https://github.com/ElemeFE/element/blob/carbon/components.json) 为准）
```javascript
import Vue from 'vue'
@ -215,6 +213,7 @@ import {
RadioGroup,
RadioButton,
Checkbox,
CheckboxButton,
CheckboxGroup,
Switch,
Select,
@ -244,19 +243,23 @@ import {
Col,
Upload,
Progress,
Spinner,
Badge,
Card,
Rate,
Steps,
Step,
Carousel,
Scrollbar,
CarouselItem,
Collapse,
CollapseItem,
Cascader,
ColorPicker,
Transfer,
Container,
Header,
Aside,
Main,
Footer,
Loading,
MessageBox,
Message,
@ -308,19 +311,22 @@ Vue.use(Row)
Vue.use(Col)
Vue.use(Upload)
Vue.use(Progress)
Vue.use(Spinner)
Vue.use(Badge)
Vue.use(Card)
Vue.use(Rate)
Vue.use(Steps)
Vue.use(Step)
Vue.use(Carousel)
Vue.use(Scrollbar)
Vue.use(CarouselItem)
Vue.use(Collapse)
Vue.use(CollapseItem)
Vue.use(Cascader)
Vue.use(ColorPicker)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Footer)
Vue.use(Loading.directive)

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

@ -22,7 +22,7 @@
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
float: left;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {

4
examples/i18n/page.json
View File

@ -82,7 +82,7 @@
"resource": {
"paraHeight": "1.8",
"1": "资源",
"2": "这里提供 Element 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。",
"2": "整理中",
"3": "Axure Components",
"4": "通过在 Axure 中导入 Element 组件库，可以在交互设计阶段方便地调用常用的组件",
"5": "下载",
@ -176,7 +176,7 @@
"resource": {
"paraHeight": "1.6",
"1": "Resource",
"2": "Here you can download design resources and tools that shaped Element UI. More design resources are being prepared.",
"2": "Under construction.",
"3": "Axure Components",
"4": "By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.",
"5": "Download",

16
examples/nav.config.json
View File

@ -246,6 +246,14 @@
}
],
"en-US": [
{
"name": "Changelog",
"path": "/changelog"
},
{
"name": "Element React",
"href": "https://eleme.github.io/element-react/"
},
{
"name": "Development",
"children": [
@ -271,14 +279,6 @@
}
]
},
{
"name": "Changelog",
"path": "/changelog"
},
{
"name": "Element React",
"href": "https://eleme.github.io/element-react/"
},
{
"name": "Components",
"groups": [

10
examples/pages/template/component.tpl
View File

@ -40,7 +40,7 @@
padding-top: 130px;
> {
h3 {
margin: 45px 0 20px;
margin: 55px 0 20px;
}
table {
@ -172,9 +172,17 @@
this.showHeader = true;
bus.$emit('toggleHeader', this.showHeader);
}
if (!this.navFaded) {
bus.$emit('fadeNav');
}
this.scrollTop = scrollTop;
}
},
created() {
bus.$on('navFade', val => {
this.navFaded = val;
});
},
mounted() {
this.throttledScrollHandler = throttle(300, this.handleScroll);
document.addEventListener('scroll', this.throttledScrollHandler);

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

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

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

@ -570,15 +570,15 @@ $--card-padding: 20px;
$--slider-main-background-color: $--color-primary;
$--slider-runway-background-color: $--border-color-light;
$--slider-button-hover-color: mix($--color-primary, black, 97%);
$--slider-stop-background-color: $--color-text-placeholder;
$--slider-stop-background-color: $--color-white;
$--slider-disable-color: $--color-text-placeholder;
$--slider-margin: 16px 0;
$--slider-border-radius: 3px;
$--slider-height: 4px;
$--slider-button-size: 12px;
$--slider-height: 6px;
$--slider-button-size: 16px;
$--slider-button-wrapper-size: 36px;
$--slider-button-wrapper-offset: -16px;
$--slider-button-wrapper-offset: -15px;
/* Steps
--------------------------*/

12
packages/theme-chalk/src/slider.scss
View File

@ -25,10 +25,14 @@
&.disabled {
cursor: default;
.el-slider__bar, .el-slider__button {
.el-slider__bar {
background-color: $--slider-disable-color;
}
.el-slider__button {
border-color: $--slider-disable-color;
}
.el-slider__button-wrapper {
&:hover,
&.hover {
@ -102,7 +106,8 @@
@include e(button) {
width: $--slider-button-size;
height: $--slider-button-size;
background-color: $--slider-main-background-color;
border: solid 2px $--slider-main-background-color;
background-color: $--color-white;
border-radius: 50%;
transition: .2s;
user-select: none;
@ -110,8 +115,7 @@
&:hover,
&.hover,
&.dragging {
transform: scale(1.5);
background-color: $--slider-button-hover-color;
transform: scale(1.2);
}
&:hover,