Skip to content

E
Element
Commit 1b63c03d authored by Leopoldthecoder's avatar Leopoldthecoder Committed by baiyaaaaa
Browse files
Options

add footer and demo-block

parent 3d90f2a3
Show whitespace changes
Inline Side-by-side
Showing with 475 additions and 139 deletions
examples/app.vue
View file @ 1b63c03d
...@@ -12,10 +12,14 @@ ...@@ -12,10 +12,14 @@
} }
body { body {
font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
overflow: auto; overflow: auto;
} }
.pure-g {
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
}
.pure-g [class *= "pure-u"] { .pure-g [class *= "pure-u"] {
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;
} }
......
examples/components/demo-block.vue 0 → 100644
View file @ 1b63c03d
<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 @ 1b63c03d
<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;
* {
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/docs/alert.md
View file @ 1b63c03d
...@@ -11,124 +11,146 @@ ...@@ -11,124 +11,146 @@
.demo-box.demo-alert .el-alert { .demo-box.demo-alert .el-alert {
margin: 20px 0 0; margin: 20px 0 0;
} }
.demo-box.demo-alert .el-alert:first-child {
margin: 0;
}
</style> </style>
## 基本用法 ## 基本用法
Alert 组件提供四种主题，由`type`属性指定，默认值为`info`，下面的示例展示了四种不同的主题。 ::: demo Alert 组件提供四种主题，由 `type` 属性指定，默认值为 `info`。
<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>
```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组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。 ::: demo 在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。`closable` 属性决定是否可关闭，接受 `boolean`，默认为 `true`。你可以设置 `close-text` 属性来代替右侧的关闭图标，注意：`close-text` 必须为文本。设置 `close` 事件来设置关闭时的回调。
`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>
```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">
</el-alert>
<el-alert
title="自定义 close-text"
type="info"
close-text="知道了">
</el-alert>
<el-alert
title="设置了回调的 alert"
type="warning"
@close="hello">
</el-alert>
</template>
<script>
export default {
methods: {
hello() {
alert('Hello World!');
}
}
}
</script>
``` ```
:::
## 带有 icon ## 带有 icon
通过设置`show-icon`属性来显示alert的icon，这能更有效的向用户展示你的显示意图。 ::: demo 通过设置 `show-icon` 属性来显示 Alert 的 icon，这能更有效的向用户展示你的显示意图。
<div class="demo-box demo-alert">
<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>
```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`属性来帮助你更好的介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。 ::: demo 除了必填的 `title` 属性外，你可以设置 `description` 属性来帮助你更好的介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。
<div class="demo-box demo-alert">
<el-alert title="带辅助性文字介绍" type="success" description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"></el-alert>
</div>
```html ```html
<el-alert <template>
<el-alert
title="带辅助性文字介绍" title="带辅助性文字介绍"
type="success" type="success"
description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"> description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
</el-alert> </el-alert>
</template>
``` ```
:::
## 带有 icon 和辅助性文字介绍 ## 带有 icon 和辅助性文字介绍
最后，这是一个同时具有 icon 和辅助性文字的样例。 ::: demo 最后，这是一个同时具有 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>
```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
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
......
examples/docs/notification.md
View file @ 1b63c03d
...@@ -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 @ 1b63c03d
...@@ -4,9 +4,11 @@ import VueRouter from 'vue-router'; ...@@ -4,9 +4,11 @@ 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';
Vue.use(Element); Vue.use(Element);
Vue.use(VueRouter); Vue.use(VueRouter);
Vue.component('demo-block', demoBlock);
const router = new VueRouter({ const router = new VueRouter({
base: __dirname, base: __dirname,
......
examples/index.template.html
View file @ 1b63c03d
...@@ -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>
......
scripts/cooking.demo.js
View file @ 1b63c03d
...@@ -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';
} }
}] }]
], ],
......
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