layout: 增加固定头部、固定侧边栏的demo

FE-Driver · Jul 14, 2017 · 68b9b0f · 68b9b0f
1 parent 6730864
commit 68b9b0f
Show file tree

Hide file tree

Showing 7 changed files with 355 additions and 22 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,35 +1,24 @@
 <template>
     <div class="page-wrapper">
-
         <header class="clearfix">
             <div class="ant-row">
                 <div class="ant-col-xs-24 ant-col-sm-7 ant-col-md-6 ant-col-lg-4">
                     <a id="logo" href="https://github.com/FE-Driver/vue-beauty" target="_blank" title="github"><img
                             alt="logo" src="./assets/VB-logo.png"><span>Vue Beauty</span></a>
                 </div>
             </div>
-
             <div class="nav  ant-col-xs-0 ant-col-sm-17 ant-col-md-18 ant-col-lg-20">
-
             </div>
         </header>
-
         <router-view keep-alive></router-view>
-
     </div>
-
 </template>
 
 <script>
-
-export default {
-}
-
-
+    export default {}
 </script>
 
 <style scoped lang="less">
-
     header {
         transition: opacity .5s;
         background: #fff;
@@ -60,5 +49,4 @@ export default {
             color: #666;
         }
     }
-
-</style>
+</style>
diff --git a/src/docs/zh-cn/layout.md b/src/docs/zh-cn/layout.md
@@ -99,6 +99,53 @@
     #components-layout-demo-responsive .ant-layout-sider-collapsed .nav-text {
         display: none;
     }
+
+    /* Browser mockup code
+     * Contribute: https://gist.github.com/jarthod/8719db9fef8deb937f4f
+     * Live example: https://updown.io
+     */
+
+    .browser-mockup {
+      border-top: 2em solid rgba(230, 230, 230, 0.7);
+      box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
+      position: relative;
+      border-radius: 3px 3px 0 0;
+    }
+
+    .browser-mockup:before {
+      display: block;
+      position: absolute;
+      content: '';
+      top: -1.25em;
+      left: 1em;
+      width: 0.5em;
+      height: 0.5em;
+      border-radius: 50%;
+      background-color: #f44;
+      box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
+    }
+
+    .browser-mockup.with-url:after {
+      display: block;
+      position: absolute;
+      content: '';
+      top: -1.6em;
+      left: 5.5em;
+      width: calc(100% - 6em);
+      height: 1.2em;
+      border-radius: 2px;
+      background-color: white;
+    }
+
+    .browser-mockup > * {
+      display: block;
+    }
+
+    .browser-content {
+        position: relative;
+        width: 100%;
+        height: 360px;
+    }
 </style>
 <script>
     export default {
@@ -349,6 +396,7 @@
 <summary>
   #### 上下中布局
   最基本的『上-中-下』布局。
+  一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。
 </summary>
 
 ```html
@@ -607,7 +655,8 @@
 ::: demo
 <summary>
   #### 侧边布局
-  多用在两列式布局。
+  侧边两列式布局。页面横向空间有限时，侧边导航可收起。
+  侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。
 </summary>
 
 ```html
@@ -882,6 +931,106 @@
 ```
 :::
 
+::: demo
+<summary>
+  #### 固定头部
+  一般用于固定顶部导航，方便页面切换。
+</summary>
+
+```html
+<template>
+    <div class="browser-mockup with-url">
+        <iframe class="browser-content" src="/#/demo/layout-fixed" frameborder="0"></iframe>
+    </div>
+</template>
+
+<style>
+    #components-layout-demo-fixed .logo {
+        width: 120px;
+        height: 31px;
+        background: #333;
+        border-radius: 6px;
+        margin: 16px 24px 16px 0;
+        float: left;
+    }
+</style>
+<script>
+    export default {
+        data() {
+            return {
+                menuData6: [{
+                    name: 'nav 1'
+                },{
+                    name: 'nav 2',
+                    selected: true
+                },{
+                    name: 'nav 3'
+                }]
+            }
+        }
+    }
+</script>
+```
+:::
+
+::: demo
+<summary>
+  #### 固定侧边栏
+  当内容较长时，使用固定侧边栏可以提供更好的体验。
+</summary>
+
+```html
+<template>
+    <div class="browser-mockup with-url">
+        <iframe class="browser-content" src="/#/demo/layout-fixed-sider" frameborder="0"></iframe>
+    </div>
+</template>
+
+<style>
+    #components-layout-demo-fixed-sider .logo {
+        height: 32px;
+        background: #333;
+        border-radius: 6px;
+        margin: 16px;
+    }
+</style>
+<script>
+    export default {
+        data() {
+            return {
+                menuData7: [{
+                    name: 'nav 1',
+                    icon: 'user',
+                }, {
+                    name: 'nav 2',
+                    icon: 'video-camera',
+                }, {
+                    name: 'nav 3',
+                    icon: 'upload',
+                }, {
+                    name: 'nav 4',
+                    icon: 'bar-chart',
+                    selected: true,
+                }, {
+                    name: 'nav 5',
+                    icon: 'cloud-o',
+                }, {
+                    name: 'nav 6',
+                    icon: 'appstore-o',
+                }, {
+                    name: 'nav 7',
+                    icon: 'team',
+                }, {
+                    name: 'nav 8',
+                    icon: 'shop',
+                }]
+            }
+        }
+    }
+</script>
+```
+:::
+
 ## API
 
 ### Sider Props

diff --git a/src/routers.js b/src/routers.js
@@ -206,4 +206,12 @@ export default [{
         name: 'treeSelect',
         component: resolve => require(['./docs/zh-cn/tree-select.md'], resolve),
     }],
+}, {
+    path: '/demo/layout-fixed',
+    name: 'demo-layout-fixed',
+    component: resolve => require(['./views/layout-fixed.vue'], resolve),
+}, {
+    path: '/demo/layout-fixed-sider',
+    name: 'demo-layout-fixed-sider',
+    component: resolve => require(['./views/layout-fixed-sider.vue'], resolve),
 }];
diff --git a/src/views/layout-fixed-sider.vue b/src/views/layout-fixed-sider.vue
@@ -0,0 +1,90 @@
+<template>
+    <div id="components-layout-demo-fixed-sider">
+        <v-layout>
+            <v-sider :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
+                <div class="logo"></div>
+                <v-menu theme="dark" :mode="collapsed?'vertical':'inline'" :data="menuData">
+                    <template scope="{data}">
+                        <i v-if="data.icon" :class="'anticon anticon-' + data.icon"></i>
+                        <span :class="{'nav-text':data.icon}">{{data.name}}</span>
+                    </template>
+                    <template scope="{data}" slot="sub">
+                        <i v-if="data.icon" :class="'anticon anticon-' + data.icon"></i>
+                        <span class="nav-text">{{data.name}}</span>
+                    </template>
+                </v-menu>
+            </v-sider>
+            <v-layout :style="{ marginLeft: '200px' }">
+                <v-header :style="{ background: '#fff', padding: 0 }"></v-header>
+                <v-content :style="{ margin: '24px 16px 0', overflow: 'initial' }">
+                    <div :style="{ padding: 24, background: '#fff', textAlign: 'center' }">...
+                        <br />
+                        Really
+                        <br />...<br />...<br />...<br />
+                        long
+                        <br />...<br />...<br />...<br />...<br />...<br />...
+                        <br />...<br />...<br />...<br />...<br />...<br />...
+                        <br />...<br />...<br />...<br />...<br />...<br />...
+                        <br />...<br />...<br />...<br />...<br />...<br />...
+                        <br />...<br />...<br />...<br />...<br />...<br />...
+                        <br />...<br />...<br />...<br />...<br />...<br />...
+                        <br />...<br />...<br />...<br />...<br />...<br />
+                        content
+                    </div>
+                </v-content>
+                <v-footer :style="{ textAlign: 'center' }">
+                    Ant Design ©2016 Created by Ant UED
+                </v-footer>
+            </v-layout>
+        </v-layout>
+    </div>
+</template>
+
+<script lang="babel">
+    export default{
+        data() {
+            return {
+                menuData: [{
+                    name: 'nav 1',
+                    icon: 'user',
+                }, {
+                    name: 'nav 2',
+                    icon: 'video-camera',
+                }, {
+                    name: 'nav 3',
+                    icon: 'upload',
+                }, {
+                    name: 'nav 4',
+                    icon: 'bar-chart',
+                    selected: true,
+                }, {
+                    name: 'nav 5',
+                    icon: 'cloud-o',
+                }, {
+                    name: 'nav 6',
+                    icon: 'appstore-o',
+                }, {
+                    name: 'nav 7',
+                    icon: 'team',
+                }, {
+                    name: 'nav 8',
+                    icon: 'shop',
+                }]
+            }
+        },
+
+        mounted() {
+            let removeDom = document.querySelectorAll('.page-wrapper > header')[0];
+            if (removeDom) removeDom.remove();
+        }
+    }
+</script>
+
+<style lang="less">
+    #components-layout-demo-fixed-sider .logo {
+        height: 32px;
+        background: #333;
+        border-radius: 6px;
+        margin: 16px;
+    }
+</style>
diff --git a/src/views/layout-fixed.vue b/src/views/layout-fixed.vue
@@ -0,0 +1,55 @@
+<template>
+    <div id="components-layout-demo-fixed">
+        <v-layout>
+            <v-header :style="{position: 'fixed', width: '100%', top: 0}">
+                <div class="logo"></div>
+                <v-menu theme="dark" mode="horizontal" :data="menuData" :style="{lineHeight: '64px'}"></v-menu>
+            </v-header>
+
+            <v-content :style="{ padding: '0 50px', marginTop: '64px' }">
+                <v-breadcrumb :style="{ margin: '12px 0' }">
+                    <v-breadcrumb-item>Home</v-breadcrumb-item>
+                    <v-breadcrumb-item href="">List</v-breadcrumb-item>
+                    <v-breadcrumb-item href="">App</v-breadcrumb-item>
+                </v-breadcrumb>
+                <div style="padding: 24px; background: #fff; min-height: 360px;">Content</div>
+            </v-content>
+            <v-footer :style="{ textAlign: 'center' }">
+                Ant Design ©2016 Created by Ant UED
+            </v-footer>
+        </v-layout>
+    </div>
+</template>
+
+<script lang="babel">
+    export default{
+        data() {
+            return {
+                menuData: [{
+                    name: 'nav 1',
+                    selected: true
+                }, {
+                    name: 'nav 2',
+                }, {
+                    name: 'nav 3',
+                }],
+            };
+        },
+
+        mounted() {
+            let removeDom = document.querySelectorAll('.page-wrapper > header')[0];
+            if (removeDom) removeDom.remove();
+        }
+    }
+</script>
+
+<style lang="less">
+    #components-layout-demo-fixed .logo {
+        width: 120px;
+        height: 31px;
+        background: #333;
+        border-radius: 6px;
+        margin: 16px 24px 16px 0;
+        float: left;
+    }
+</style>