sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

clear

Browse Source 
Former-commit-id: e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly 5793d72d458b7eeaf28a097d026168cebc9fc256 [formerly 9c8de3644bd40a55711e618742e29cce390e4c5f]]]]]
Former-commit-id: 05ca3c8da65f8583c142720628aa6ea71d2dbf45
Former-commit-id: 7a4d2fba696e901db86071ea2810e9c932c976ad
Former-commit-id: c18d3689200ca0e528fbf9bf171f6e1b50131bc3 [formerly 455e9952ca890cd8ad882250cfb9eabd944d44ee]
Former-commit-id: 021fa8191681fe4f22e9a9f40389831a847e9066
Former-commit-id: 1022b7792417ce366901b9d5284762a015dd6d26
Former-commit-id: bed799410be508713cac76b7c8cf02d4457fe996
Former-commit-id: f6787cfaac3404132ad1011e2707e08484708ca9
Former-commit-id: 7a8a3baca9ef30393744fd56def6d608b51dcddd
This commit is contained in:
liyang
2018-07-16 10:43:14 +08:00
parent c53973a35f
commit 1d310c9c7d
496 changed files with 3 additions and 23673 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/pages/demo/components/container/card.vue
View File

@@ -1,17 +0,0 @@
<template>
<d2-container>
<template slot="header">我是插入到 header 中的内容</template>
<d2-markdown :source="doc"/>
</d2-container>
</template>
<script>
import doc from './md/doc-card.md'
export default {
data () {
return {
doc
}
}
}
</script>

22
src/pages/demo/components/container/full-bs.vue
View File

@@ -1,22 +0,0 @@
<template>
<d2-container type="full" scroll>
<template slot="header">
我是插入到 header 中的内容
</template>
<d2-markdown :source="doc"/>
<template slot="footer">
<d2-demo-link-btn title="D2Admin" link="https://github.com/d2-projects/d2-admin"/>
</template>
</d2-container>
</template>
<script>
import doc from './md/doc-full-bs.md'
export default {
data () {
return {
doc
}
}
}
</script>

22
src/pages/demo/components/container/full.vue
View File

@@ -1,22 +0,0 @@
<template>
<d2-container type="full">
<template slot="header">
我是插入到 header 中的内容
</template>
<d2-markdown :source="doc"/>
<template slot="footer">
<d2-demo-link-btn title="D2Admin" link="https://github.com/d2-projects/d2-admin"/>
</template>
</d2-container>
</template>
<script>
import doc from './md/doc-full.md'
export default {
data () {
return {
doc
}
}
}
</script>

19
src/pages/demo/components/container/ghost-header.vue
View File

@@ -1,19 +0,0 @@
<template>
<d2-container type="ghost">
<template slot="header">隐形页面容器头部</template>
<el-card shadow="never" style="width: 50%;">
<d2-markdown :source="doc"/>
</el-card>
</d2-container>
</template>
<script>
import doc from './md/doc-ghost-header.md'
export default {
data () {
return {
doc
}
}
}
</script>

18
src/pages/demo/components/container/ghost.vue
View File

@@ -1,18 +0,0 @@
<template>
<d2-container type="ghost">
<el-card shadow="never" class="d2-mt" style="width: 50%;">
<d2-markdown :source="doc"/>
</el-card>
</d2-container>
</template>
<script>
import doc from './md/doc-ghost.md'
export default {
data () {
return {
doc
}
}
}
</script>

18
src/pages/demo/components/container/md/doc-card.md
View File

@@ -1,18 +0,0 @@
## 基础页面容器
高度根据内容适应
```
<d2-container>
主体内容
</d2-container>
```
使用 `slot`
```
<d2-container>
<template slot="header">我是插入到 header 中的内容</template>
主体内容
</d2-container>
```

77
src/pages/demo/components/container/md/doc-full-bs.md
View File

@@ -1,77 +0,0 @@
## 自适应填充页面容器 + 滚动优化
无论内容高度多少，都会自动撑满页面，并有可选的 `header` 和 `footer` 插槽，**并且使用自定义滚动条代替原生滚动条**，是否启用此功能请自行取舍
> 有些情况下使用滚动优化模式会有意外影响，例如页面内含有可拖拽的元素，这时候最好不要使用此模式
示例：
```
<template>
<d2-container type="full" scroll>
<template slot="header">
可选的 header 内容 ...
</template>
主体内容 ...
<template slot="footer">
可选的 footer 内容 ...
</template>
</d2-container>
</template>
```
下面是一个较长的演示文章，仅仅是为了演示一些文字的显示效果
## vue.js
**易用**
已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
**灵活**
不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
**高效**
20kB min+gzip 运行大小
超快虚拟 DOM
最省心的优化
**Vue.js 是什么**
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。
## Element
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
**一致性** Consistency
- 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
- 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
**反馈** Feedback
- 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
- 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
**效率** Efficiency
- 简化流程：设计简洁直观的操作流程；
- 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
- 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
**可控** Controllability
- 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
- 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

75
src/pages/demo/components/container/md/doc-full.md
View File

@@ -1,75 +0,0 @@
## 自适应填充页面容器
无论内容高度多少，都会自动撑满页面，并有可选的 `header` 和 `footer` 插槽
示例：
```
<template>
<d2-container type="full">
<template slot="header">
可选的 header 内容 ...
</template>
主体内容 ...
<template slot="footer">
可选的 footer 内容 ...
</template>
</d2-container>
</template>
```
下面是一个较长的演示文章，仅仅是为了演示一些文字的显示效果
## vue.js
**易用**
已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
**灵活**
不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
**高效**
20kB min+gzip 运行大小
超快虚拟 DOM
最省心的优化
**Vue.js 是什么**
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。
## Element
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
**一致性** Consistency
- 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
- 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
**反馈** Feedback
- 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
- 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
**效率** Efficiency
- 简化流程：设计简洁直观的操作流程；
- 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
- 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
**可控** Controllability
- 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
- 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

12
src/pages/demo/components/container/md/doc-ghost-header.md
View File

@@ -1,12 +0,0 @@
## 隐形页面容器 带有头部
不显示任何背景色和边框，但是有一个和分页组件效果融合的头部，看起来更舒服一点
```
<d2-container type="ghost">
<template slot="header">隐形页面容器头部</template>
主体内容
</d2-container>
```
> 注意 如果设置了 header 插槽的内容，header 部分会自动具有 20px 的下外边距

11
src/pages/demo/components/container/md/doc-ghost.md
View File

@@ -1,11 +0,0 @@
## 隐形页面容器
不显示任何背景色和边框
```
<d2-container type="ghost">
主体内容
</d2-container>
```
如果你不希望内容紧贴上边，可以在内容外层容器设置 `class="d2-mt"`