From bf6661266a8fedc1246b6dca84771ff7738bc4bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=A5=95?= Date: Tue, 22 Aug 2017 12:46:22 +0800 Subject: [PATCH] add layout (#6600) * add layout * add docs * add en docs * fix test --- build/bin/build-entry.js | 2 +- components.json | 7 +- examples/docs/en-US/container.md | 297 ++++++++++++++++++++++ examples/docs/zh-CN/container.md | 297 ++++++++++++++++++++++ examples/nav.config.json | 8 + packages/aside/index.js | 8 + packages/aside/src/main.vue | 20 ++ packages/container/index.js | 8 + packages/container/src/main.vue | 33 +++ packages/footer/index.js | 8 + packages/footer/src/main.vue | 20 ++ packages/header/index.js | 8 + packages/header/src/main.vue | 20 ++ packages/main/index.js | 8 + packages/main/src/main.vue | 12 + packages/theme-default/src/aside.css | 8 + packages/theme-default/src/common/var.css | 12 + packages/theme-default/src/container.css | 14 + packages/theme-default/src/footer.css | 9 + packages/theme-default/src/header.css | 9 + packages/theme-default/src/index.css | 5 + packages/theme-default/src/main.css | 11 + src/index.js | 19 +- test/unit/specs/container.spec.js | 106 ++++++++ 24 files changed, 945 insertions(+), 4 deletions(-) create mode 100644 examples/docs/en-US/container.md create mode 100644 examples/docs/zh-CN/container.md create mode 100644 packages/aside/index.js create mode 100644 packages/aside/src/main.vue create mode 100644 packages/container/index.js create mode 100644 packages/container/src/main.vue create mode 100644 packages/footer/index.js create mode 100644 packages/footer/src/main.vue create mode 100644 packages/header/index.js create mode 100644 packages/header/src/main.vue create mode 100644 packages/main/index.js create mode 100644 packages/main/src/main.vue create mode 100644 packages/theme-default/src/aside.css create mode 100644 packages/theme-default/src/container.css create mode 100644 packages/theme-default/src/footer.css create mode 100644 packages/theme-default/src/header.css create mode 100644 packages/theme-default/src/main.css create mode 100644 test/unit/specs/container.spec.js diff --git a/build/bin/build-entry.js b/build/bin/build-entry.js index 80db485a9..9f024608d 100644 --- a/build/bin/build-entry.js +++ b/build/bin/build-entry.js @@ -8,7 +8,7 @@ var endOfLine = require('os').EOL; var OUTPUT_PATH = path.join(__dirname, '../../src/index.js'); var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';'; var INSTALL_COMPONENT_TEMPLATE = ' {{name}}'; -var MAIN_TEMPLATE = `/* Automatic generated by './build/bin/build-entry.js' */ +var MAIN_TEMPLATE = `/* Automatically generated by './build/bin/build-entry.js' */ {{include}} import locale from 'element-ui/src/locale'; diff --git a/components.json b/components.json index 4a5ccf80a..7e8b58a93 100644 --- a/components.json +++ b/components.json @@ -62,5 +62,10 @@ "collapse-item": "./packages/collapse-item/index.js", "cascader": "./packages/cascader/index.js", "color-picker": "./packages/color-picker/index.js", - "transfer": "./packages/transfer/index.js" + "transfer": "./packages/transfer/index.js", + "container": "./packages/container/index.js", + "header": "./packages/header/index.js", + "aside": "./packages/aside/index.js", + "main": "./packages/main/index.js", + "footer": "./packages/footer/index.js" } diff --git a/examples/docs/en-US/container.md b/examples/docs/en-US/container.md new file mode 100644 index 000000000..13173979d --- /dev/null +++ b/examples/docs/en-US/container.md @@ -0,0 +1,297 @@ + + + + +## Container +Container components for scaffolding basic structure of the page: + +``: wrapper container. When nested with a `` or ``, all its child elements will be vertically arranged. Otherwise horizontally. + +``: container for headers. + +``: container for side sections (usually a side nav). + +``: container for main sections. + +``: container for footers. + +:::tip +These components use flex for layout, so please make sure your browser supports it. Besides, ``'s direct child elements have to be one or more of the latter four components. And father element of the latter four components must be a ``. +::: + +### Common layouts + +::: demo +```html + + Header + Main + + + + Header + Main + Footer + + + + Aside + Main + + + + Header + + Aside + Main + + + + + Header + + Aside + + Main + Footer + + + + + + Aside + + Header + Main + + + + + Aside + + Header + Main + Footer + + + + +``` +::: + +### Example + +::: demo +```html + + + + + + + + Option 1 + Option 2 + + + Option 3 + + + + Option 4-1 + + + + + + + Option 1 + Option 2 + + + Option 3 + + + + Option 4-1 + + + + + + + Option 1 + Option 2 + + + Option 3 + + + + Option 4-1 + + + + + + + + + + View + Add + Delete + + + Tom + + + + + + + + + + + + + + + + + +``` +::: + +### Container Attributes +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| direction | layout direction for child elements | string | horizontal / vertical | vertical when nested with `el-header` or `el-footer`; horizontal otherwise | + +### Header Attributes +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| height | height of the header | string | — | 60px | + +### Aside Attributes +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| width | width of the side section | string | — | 300px | + +### Footer Attributes +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| height | height of the footer | string | — | 60px | \ No newline at end of file diff --git a/examples/docs/zh-CN/container.md b/examples/docs/zh-CN/container.md new file mode 100644 index 000000000..f44681461 --- /dev/null +++ b/examples/docs/zh-CN/container.md @@ -0,0 +1,297 @@ + + + + +## Container 布局容器 +用于布局的容器组件，方便快速搭建页面的基本结构： + +``：外层容器。当子元素中包含 `` 或 `` 时，全部子元素会垂直上下排列，否则会水平左右排列。 + +``：顶栏容器。 + +``：侧边栏容器。 + +``：主要区域容器。 + +``：底栏容器。 + +:::tip +以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，`` 的子元素只能是后四者，后四者的父元素也只能是 ``。 +::: + +### 常见页面布局 + +::: demo +```html + + Header + Main + + + + Header + Main + Footer + + + + Aside + Main + + + + Header + + Aside + Main + + + + + Header + + Aside + + Main + Footer + + + + + + Aside + + Header + Main + + + + + Aside + + Header + Main + Footer + + + + +``` +::: + +### 实例 + +::: demo +```html + + + + + + + + 选项1 + 选项2 + + + 选项3 + + + + 选项4-1 + + + + + + + 选项1 + 选项2 + + + 选项3 + + + + 选项4-1 + + + + + + + 选项1 + 选项2 + + + 选项3 + + + + 选项4-1 + + + + + + + + + + 查看 + 新增 + 删除 + + + 王小虎 + + + + + + + + + + + + + + + + + +``` +::: + +### Container Attributes +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|---------|----------|---------|-------------|--------| +| direction | 子元素的排列方向 | string | horizontal / vertical | 子元素中有 `el-header` 或 `el-footer` 时为 vertical，否则为 horizontal | + +### Header Attributes +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|---------|----------|---------|-------------|--------| +| height | 顶栏高度 | string | — | 60px | + +### Aside Attributes +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|---------|----------|---------|-------------|--------| +| width | 侧边栏宽度 | string | — | 300px | + +### Footer Attributes +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|---------|----------|---------|-------------|--------| +| height | 底栏高度 | string | — | 60px | \ No newline at end of file diff --git a/examples/nav.config.json b/examples/nav.config.json index 5b4b93ba4..ddf44b9cb 100644 --- a/examples/nav.config.json +++ b/examples/nav.config.json @@ -43,6 +43,10 @@ "path": "/layout", "title": "Layout 布局" }, + { + "path": "/container", + "title": "Container 布局容器" + }, { "path": "/color", "title": "Color 色彩" @@ -285,6 +289,10 @@ "path": "/layout", "title": "Layout" }, + { + "path": "/container", + "title": "Layout Container" + }, { "path": "/color", "title": "Color" diff --git a/packages/aside/index.js b/packages/aside/index.js new file mode 100644 index 000000000..530b4f550 --- /dev/null +++ b/packages/aside/index.js @@ -0,0 +1,8 @@ +import Aside from './src/main'; + +/* istanbul ignore next */ +Aside.install = function(Vue) { + Vue.component(Aside.name, Aside); +}; + +export default Aside; diff --git a/packages/aside/src/main.vue b/packages/aside/src/main.vue new file mode 100644 index 000000000..3ecb24e64 --- /dev/null +++ b/packages/aside/src/main.vue @@ -0,0 +1,20 @@ + + + diff --git a/packages/container/index.js b/packages/container/index.js new file mode 100644 index 000000000..1fe67ce07 --- /dev/null +++ b/packages/container/index.js @@ -0,0 +1,8 @@ +import Container from './src/main'; + +/* istanbul ignore next */ +Container.install = function(Vue) { + Vue.component(Container.name, Container); +}; + +export default Container; diff --git a/packages/container/src/main.vue b/packages/container/src/main.vue new file mode 100644 index 000000000..4cabbc79f --- /dev/null +++ b/packages/container/src/main.vue @@ -0,0 +1,33 @@ + + + diff --git a/packages/footer/index.js b/packages/footer/index.js new file mode 100644 index 000000000..5e991b03f --- /dev/null +++ b/packages/footer/index.js @@ -0,0 +1,8 @@ +import Footer from './src/main'; + +/* istanbul ignore next */ +Footer.install = function(Vue) { + Vue.component(Footer.name, Footer); +}; + +export default Footer; diff --git a/packages/footer/src/main.vue b/packages/footer/src/main.vue new file mode 100644 index 000000000..ff02ca609 --- /dev/null +++ b/packages/footer/src/main.vue @@ -0,0 +1,20 @@ + + + diff --git a/packages/header/index.js b/packages/header/index.js new file mode 100644 index 000000000..a3dba893a --- /dev/null +++ b/packages/header/index.js @@ -0,0 +1,8 @@ +import Header from './src/main'; + +/* istanbul ignore next */ +Header.install = function(Vue) { + Vue.component(Header.name, Header); +}; + +export default Header; diff --git a/packages/header/src/main.vue b/packages/header/src/main.vue new file mode 100644 index 000000000..304be1700 --- /dev/null +++ b/packages/header/src/main.vue @@ -0,0 +1,20 @@ + + + diff --git a/packages/main/index.js b/packages/main/index.js new file mode 100644 index 000000000..a50161431 --- /dev/null +++ b/packages/main/index.js @@ -0,0 +1,8 @@ +import Main from './src/main'; + +/* istanbul ignore next */ +Main.install = function(Vue) { + Vue.component(Main.name, Main); +}; + +export default Main; diff --git a/packages/main/src/main.vue b/packages/main/src/main.vue new file mode 100644 index 000000000..48fdaf6c4 --- /dev/null +++ b/packages/main/src/main.vue @@ -0,0 +1,12 @@ + + + diff --git a/packages/theme-default/src/aside.css b/packages/theme-default/src/aside.css new file mode 100644 index 000000000..7d4314b15 --- /dev/null +++ b/packages/theme-default/src/aside.css @@ -0,0 +1,8 @@ +@charset "UTF-8"; + +@component-namespace el { + @b aside { + overflow: auto; + box-sizing: border-box; + } +} diff --git a/packages/theme-default/src/common/var.css b/packages/theme-default/src/common/var.css index 53bc21c1e..01f8dd4a1 100644 --- a/packages/theme-default/src/common/var.css +++ b/packages/theme-default/src/common/var.css @@ -599,4 +599,16 @@ --transfer-item-height: 32px; --transfer-item-hover-background: var(--color-light-gray); --transfer-filter-height: 22px; + + /* Header + --------------------------*/ + --header-padding: 0 20px; + + /* Footer + --------------------------*/ + --footer-padding: 0 20px; + + /* Main + --------------------------*/ + --main-padding: 20px; } diff --git a/packages/theme-default/src/container.css b/packages/theme-default/src/container.css new file mode 100644 index 000000000..2b8b274f6 --- /dev/null +++ b/packages/theme-default/src/container.css @@ -0,0 +1,14 @@ +@charset "UTF-8"; + +@component-namespace el { + @b container { + display: flex; + flex-direction: row; + flex: 1; + box-sizing: border-box; + + @when vertical { + flex-direction: column; + } + } +} diff --git a/packages/theme-default/src/footer.css b/packages/theme-default/src/footer.css new file mode 100644 index 000000000..1c3001d27 --- /dev/null +++ b/packages/theme-default/src/footer.css @@ -0,0 +1,9 @@ +@charset "UTF-8"; +@import "./common/var.css"; + +@component-namespace el { + @b footer { + padding: var(--footer-padding); + box-sizing: border-box; + } +} diff --git a/packages/theme-default/src/header.css b/packages/theme-default/src/header.css new file mode 100644 index 000000000..22a1645c1 --- /dev/null +++ b/packages/theme-default/src/header.css @@ -0,0 +1,9 @@ +@charset "UTF-8"; +@import "./common/var.css"; + +@component-namespace el { + @b header { + padding: var(--header-padding); + box-sizing: border-box; + } +} diff --git a/packages/theme-default/src/index.css b/packages/theme-default/src/index.css index d18c11f7a..f423a3bd3 100644 --- a/packages/theme-default/src/index.css +++ b/packages/theme-default/src/index.css @@ -60,3 +60,8 @@ @import "./cascader.css"; @import "./color-picker.css"; @import "./transfer.css"; +@import "./container.css"; +@import "./header.css"; +@import "./aside.css"; +@import "./main.css"; +@import "./footer.css"; diff --git a/packages/theme-default/src/main.css b/packages/theme-default/src/main.css new file mode 100644 index 000000000..22e8bdd0b --- /dev/null +++ b/packages/theme-default/src/main.css @@ -0,0 +1,11 @@ +@charset "UTF-8"; +@import "./common/var.css"; + +@component-namespace el { + @b main { + flex: 1; + overflow: auto; + box-sizing: border-box; + padding: var(--main-padding); + } +} diff --git a/src/index.js b/src/index.js index 75e449eb4..6bd0f7879 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,4 @@ -/* Automatic generated by './build/bin/build-entry.js' */ +/* Automatically generated by './build/bin/build-entry.js' */ import Pagination from '../packages/pagination/index.js'; import Dialog from '../packages/dialog/index.js'; @@ -64,6 +64,11 @@ import CollapseItem from '../packages/collapse-item/index.js'; import Cascader from '../packages/cascader/index.js'; import ColorPicker from '../packages/color-picker/index.js'; import Transfer from '../packages/transfer/index.js'; +import Container from '../packages/container/index.js'; +import Header from '../packages/header/index.js'; +import Aside from '../packages/aside/index.js'; +import Main from '../packages/main/index.js'; +import Footer from '../packages/footer/index.js'; import locale from 'element-ui/src/locale'; import CollapseTransition from 'element-ui/src/transitions/collapse-transition'; @@ -128,6 +133,11 @@ const components = [ Cascader, ColorPicker, Transfer, + Container, + Header, + Aside, + Main, + Footer, CollapseTransition ]; @@ -226,5 +236,10 @@ module.exports = { CollapseItem, Cascader, ColorPicker, - Transfer + Transfer, + Container, + Header, + Aside, + Main, + Footer }; diff --git a/test/unit/specs/container.spec.js b/test/unit/specs/container.spec.js new file mode 100644 index 000000000..a9eb361c4 --- /dev/null +++ b/test/unit/specs/container.spec.js @@ -0,0 +1,106 @@ +import { createTest, createVue, destroyVM } from '../util'; +import Container from 'packages/container'; +import Header from 'packages/header'; +import Main from 'packages/main'; +import Aside from 'packages/aside'; +import Footer from 'packages/footer'; + +describe('Container', () => { + let vm; + afterEach(() => { + destroyVM(vm); + }); + + it('create', () => { + vm = createTest(Container, true); + expect(vm.$el).to.exist; + }); + + it('vertical', () => { + vm = createVue({ + template: ` + + + + + ` + }, true); + expect(vm.$children[0].$el.classList.contains('is-vertical')).to.true; + }); +}); + +describe('Header', () => { + let vm; + afterEach(() => { + destroyVM(vm); + }); + + it('create', () => { + vm = createTest(Header, true); + expect(vm.$el).to.exist; + }); + + it('height', () => { + vm = createVue({ + template: ` + + ` + }, true); + expect(vm.$children[0].$el.style.height).to.equal('100px'); + }); +}); + +describe('Aside', () => { + let vm; + afterEach(() => { + destroyVM(vm); + }); + + it('create', () => { + vm = createTest(Aside, true); + expect(vm.$el).to.exist; + }); + + it('width', () => { + vm = createVue({ + template: ` + + ` + }, true); + expect(vm.$children[0].$el.style.width).to.equal('200px'); + }); +}); + +describe('Main', () => { + let vm; + afterEach(() => { + destroyVM(vm); + }); + + it('create', () => { + vm = createTest(Main, true); + expect(vm.$el).to.exist; + }); +}); + +describe('Footer', () => { + let vm; + afterEach(() => { + destroyVM(vm); + }); + + it('create', () => { + vm = createTest(Footer, true); + expect(vm.$el).to.exist; + }); + + it('height', () => { + vm = createVue({ + template: ` + + ` + }, true); + expect(vm.$children[0].$el.style.height).to.equal('100px'); + }); +}); +