component nav

examples/components/side-nav.vue

@@ -1,40 +1,86 @@
 <style>
+  .side-nav {
+    width: 100%;
+    box-sizing: border-box;
+    border-right: 1px solid #eaeefa;
+
+    li {
+      list-style: none;
+    }
+    ul {
+      padding: 0;
+    }
+
+    .nav-item {
+      a {
+        font-size:18px;
+        color:#5e6d82;
+        line-height: 32px;
+        height: 32px;
+        margin: 10px 0;
+        padding: 0 0 0 10px;
+        text-decoration: none;
+        border-left: 2px solid transparent;
+        display: block;
+
+        &.active {
+          color: #20a0ff;
+          border-left-color: #20a0ff;
+        }
+      }
+      .nav-item {
+        a {
+          font-size: 14px;
+          padding-left: 20px;
+
+          &:hover {
+            background-color: #eee;
+          }
+        }
+      }
+    }
+    .nav-group__title {
+      color: #99a9bf;
+      padding-left: 15px;
+      line-height: 32px;
+    }
+  }
 </style>
 <template>
   <div class="side-nav">
     <ul>
-      <li v-for="item in data">
-        <a href="">{{item.name}}</a>
-        
+      <li class="nav-item" v-for="item in data">
+        <a>{{item.name}}</a>
+        <ul class="pure-menu-list sub-nav" v-if="item.children">
+          <li class="nav-item" v-for="navItem in item.children">
+            <router-link
+              class=""
+              active-class="active"
+              :to="'/component' + navItem.path"
+              exact
+              v-text="navItem.title || item.name">
+            </router-link>
+          </li>
+        </ul>
+        <template v-if="item.groups">
+          <div class="nav-group" v-for="group in item.groups">
+            <div class="nav-group__title">{{group.groupName}}</div>
+            <ul class="pure-menu-list">
+              <li
+                class="nav-item"
+                v-for="item in group.list"
+                v-if="!item.disabled">
+                <router-link
+                  active-class="active"
+                  :to="'/component' + item.path"
+                  exact
+                  v-text="item.title"></router-link>
+              </li>
+            </ul>
+          </div>
+        </template>
       </li>
     </ul>
-    <template v-for="(nav, key) in navs">
-      <a
-        href="#"
-        @click.prevent="navState.$set(key, !navState[key] || false)"
-        class="pure-menu-heading app__menu__label"
-        :class="{ 'unfold': !navState[key] }"
-        v-text="nav.group"></a>
-      <ul
-        class="pure-menu-list"
-        transition="slidedown"
-        v-show="!navState[key]"
-        :style="{
-          maxHeight: nav.list.length * 44 + 'px'
-        }">
-        <li
-          class="pure-menu-item app__menu__item"
-          v-for="item in nav.list"
-          v-if="!item.disabled">
-          <router-link
-            class="pure-menu-link app__menu__link"
-            active-class="active"
-            :to="'/component' + item.path"
-            exact
-            v-text="item.name"></router-link>
-        </li>
-      </ul>
-    </template>
   </div>
 </template>
 <script>

examples/nav.config.json

@@ -1,237 +1,243 @@
 [
   {
-    "group": "Basic",
-    "list": [
-      {
-        "path": "/button",
-        "name": "按钮 (button)",
-        "title": "Button 按钮",
-        "description": "常用的操作按钮"
-      },
-      {
-        "path": "/icon",
-        "name": "图标 (icon)",
-        "title": "Icon 图标"
-      },
-      {
-        "path": "/tag",
-        "name": "标签 (tag)",
-        "title": "Tag 标签",
-        "description": "Tag 标签"
-      },
-      {
-        "path": "/dialog",
-        "name": "对话框 (dialog)",
-        "title": "Dialog 对话框",
-        "description": "在保留当前页面状态的情况下, 告知用户信息并承载相关操作。"
-      },
-      {
-        "path": "/message-box",
-        "name": "弹框 (message-box)",
-        "title": "message-box 弹框"
-      },
-      {
-        "path": "/popover",
-        "name": "弹出框 (popover)",
-        "title": "popover 弹出框",
-        "description": "收纳具体内容和相关操作, 激活后弹出展现"
-      },
-      {
-        "path": "/tooltip",
-        "name": "文字提示 (tooltip)",
-        "title": "tooltip 文字提示",
-        "description": "优雅地展示文字提示信息"
-      },
-      {
-        "path": "/alert",
-        "name": "警告 (alert)",
-        "title": "alert 警告",
-        "description": "用于页面中展示重要的提示信息"
-      },
-      {
-        "path": "/notification",
-        "name": "通知 (notification)",
-        "title": "notification 通知",
-        "description": "悬浮出现在页面右上角, 显示全局的通知提醒消息"
-      },
-      {
-        "path": "/message",
-        "name": "消息提示 (message)",
-        "title": "message 消息提示",
-        "description": "对用户的操作进行反馈提示,包含成功、反馈或错误等消息提示"
-      },
-      {
-        "path": "/loading",
-        "name": "加载 (loading)",
-        "title": "loading 加载",
-        "description": "加载数据时显示"
-      },
-      {
-        "path": "/card",
-        "name": "卡片 (card)",
-        "title": "card 卡片",
-        "description": "将信息聚合在卡片容器中展示"
-      }
-    ]
+    "name": "基础组件",
+    "groups": [{
+      "groupName": "Basic",
+      "list": [
+        {
+          "path": "/layout",
+          "name": "按钮 (button)",
+          "title": "Layout 布局",
+          "description": ""
+        },
+        {
+          "path": "/icon",
+          "name": "图标 (icon)",
+          "title": "Icon 图标"
+        },
+        {
+          "path": "/button",
+          "name": "按钮 (button)",
+          "title": "Button 按钮",
+          "description": "常用的操作按钮"
+        },
+        {
+          "path": "/dialog",
+          "name": "对话框 (dialog)",
+          "title": "Dialog 对话框",
+          "description": "在保留当前页面状态的情况下, 告知用户信息并承载相关操作。"
+        },
+        {
+          "path": "/message-box",
+          "name": "弹框 (message-box)",
+          "title": "message-box 弹框"
+        },
+        {
+          "path": "/alert",
+          "name": "警告 (alert)",
+          "title": "alert 警告",
+          "description": "用于页面中展示重要的提示信息"
+        },
+        {
+          "path": "/notification",
+          "name": "通知 (notification)",
+          "title": "notification 通知",
+          "description": "悬浮出现在页面右上角, 显示全局的通知提醒消息"
+        },
+        {
+          "path": "/message",
+          "name": "消息提示 (message)",
+          "title": "message 消息提示",
+          "description": "对用户的操作进行反馈提示,包含成功、反馈或错误等消息提示"
+        },
+        {
+          "path": "/loading",
+          "name": "加载 (loading)",
+          "title": "loading 加载",
+          "description": "加载数据时显示"
+        },
+        {
+          "path": "/card",
+          "name": "卡片 (card)",
+          "title": "card 卡片",
+          "description": "将信息聚合在卡片容器中展示"
+        }
+      ]
+    },
+    {
+      "groupName": "Form",
+      "list": [
+        {
+          "path": "/radio",
+          "name": "单选框 (radio)",
+          "title": "Radio 单选框",
+          "description": "用于在多个备选项选中单个选项。"
+        },
+        {
+          "path": "/checkbox",
+          "name": "多选框 (checkbox)",
+          "title": "Checkbox 多选框",
+          "description": "用于在多个可选项中进行多项选择。"
+        },
+        {
+          "path": "/input",
+          "name": "输入框 (input)",
+          "title": "Input 输入框"
+        },
+        {
+          "path": "/input-number",
+          "name": "计数器 (input-number)",
+          "title": "Input Number 计数器"
+        },
+        {
+          "path": "/select",
+          "name": "选择器 (select)",
+          "title": "Select 选择器",
+          "description": "当选项过多时, 使用下拉菜单展示并选择内容"
+        },
+        {
+          "path": "/switch",
+          "name": "开关 (switch)",
+          "title": "Switch 开关",
+          "description": "用于两种对立状态的切换。"
+        },
+        {
+          "path": "/slider",
+          "name": "滑块 (slider)",
+          "title": "Slider 滑块",
+          "description": "通过拖动滑块在一个固定区间内进行选择"
+        },
+        {
+          "path": "/time-picker",
+          "name": "时间选择器（time-picker）",
+          "title": "TimePicker 时间选择器",
+          "description": "用于选择或输入时间"
+        },
+        {
+          "path": "/date-picker",
+          "name": "日期选择器（date-picker）",
+          "title": "DatePicker",
+          "description": "用于选择或输入时间"
+        },
+        {
+          "path": "/datetime-picker",
+          "name": "日期时间选择器",
+          "title": "DatetimePicker",
+          "description": "用于选择或输入日期时间"
+        },
+        {
+          "path": "/upload",
+          "name": "上传 (upload)",
+          "title": "Upload 上传",
+          "description": "文件上传组件"
+        },
+        {
+          "path": "/form",
+          "name": "表单 (form)",
+          "title": "Form 表单",
+          "description": "一个多功能的并带有字段验证的表单组件"
+        },
+        {
+          "path": "/autocomplete",
+          "name": "自动完成 (autocomplete)",
+          "title": "Autocomplete 自动完成"
+        },
+        {
+          "path": "/rate",
+          "name": "评分 (rate)",
+          "title": "Rate 评分组件"
+        }
+      ]
+    },
+    {
+      "groupName": "Data",
+      "list": [
+        {
+          "path": "/table",
+          "name": "表格 (table)",
+          "title": "Table 表格",
+          "description": "用于展示多条结构类似的数据, 可对数据进行排序、筛选、对比或其他自定义操作。"
+        },
+        {
+          "path": "/tag",
+          "name": "标签 (tag)",
+          "title": "Tag 标签",
+          "description": "Tag 标签"
+        },
+        {
+          "path": "/tooltip",
+          "name": "文字提示 (tooltip)",
+          "title": "Tooltip 文字提示",
+          "description": "优雅地展示文字提示信息"
+        },
+        {
+          "path": "/popover",
+          "name": "弹出框 (popover)",
+          "title": "Popover 弹出框",
+          "description": "收纳具体内容和相关操作, 激活后弹出展现"
+        },
+        {
+          "path": "/progress",
+          "name": "进度条 (progress)",
+          "title": "Progress 进度条",
+          "description": ""
+        },
+        {
+          "path": "/tree",
+          "name": "tree (tree)",
+          "title": "Tree 树形控件"
+        },
+        {
+          "path": "/pagination",
+          "name": "分页 (pagination)",
+          "title": "Pagination 分页",
+          "description": "当数据量过多时, 使用分页分解数据"
+        },
+        {
+          "path": "/badge",
+          "name": "标记 (badge)",
+          "title": " Badge 标记",
+          "description": "出现在按钮、图标旁的数字或状态标记"
+        }
+      ]
+    },
+    {
+      "groupName": "Nav",
+      "list": [
+        {
+          "path": "/tabs",
+          "name": "标签页 (tabs)",
+          "title": "Tabs 标签页",
+          "description": "富展现的标签页"
+        },
+        {
+          "path": "/breadcrumb",
+          "name": "面包屑 (breadcrumb)",
+          "title": "Breadcrumb 面包屑",
+          "description": ""
+        },
+        {
+          "path": "/dropdown",
+          "name": "下拉菜单 (dropdown)",
+          "title": "Dropdown 下拉菜单"
+        },
+        {
+          "path": "/steps",
+          "name": "步骤条 (steps)",
+          "title": "Steps 步骤",
+          "description": "引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。"
+        }
+      ]
+    }]
   },
   {
-    "group": "Form",
-    "list": [
-      {
-        "path": "/autocomplete",
-        "name": "自动完成 (autocomplete)",
-        "title": "Autocomplete 自动完成"
-      },
-      {
-        "path": "/select",
-        "name": "选择器 (select)",
-        "title": "Select 选择器",
-        "description": "当选项过多时, 使用下拉菜单展示并选择内容"
-      },
-      {
-        "path": "/checkbox",
-        "name": "多选框 (checkbox)",
-        "title": "Checkbox 多选框",
-        "description": "用于在多个可选项中进行多项选择。"
-      },
-      {
-        "path": "/radio",
-        "name": "单选框 (radio)",
-        "title": "Radio 单选框",
-        "description": "用于在多个备选项选中单个选项。"
-      },
-      {
-        "path": "/input",
-        "name": "输入框 (input)",
-        "title": "Input 输入框"
-      },
-      {
-        "path": "/input-number",
-        "name": "计数器 (input-number)",
-        "title": "Input Number 计数器"
-      },
-      {
-        "path": "/switch",
-        "name": "开关 (switch)",
-        "title": "Switch 开关",
-        "description": "用于两种对立状态的切换。"
-      },
-      {
-        "path": "/time-picker",
-        "name": "时间选择器（time-picker）",
-        "title": "时间选择器",
-        "description": "用于选择或输入时间"
-      },
-      {
-        "path": "/date-picker",
-        "name": "日期选择器（date-picker）",
-        "title": "日期选择器",
-        "description": "用于选择或输入时间"
-      },
-      {
-        "path": "/datetime-picker",
-        "name": "日期时间选择器",
-        "title": "日期时间选择器",
-        "description": "用于选择或输入日期时间"
-      },
-      {
-        "path": "/upload",
-        "name": "上传 (upload)",
-        "title": "upload 上传",
-        "description": "文件上传组件"
-      },
-      {
-        "path": "/form",
-        "name": "表单 (form)",
-        "title": "form 表单",
-        "description": "一个多功能的并带有字段验证的表单组件"
-      },
-      {
-        "path": "/slider",
-        "name": "滑块 (slider)",
-        "title": "slider 滑块",
-        "description": "通过拖动滑块在一个固定区间内进行选择"
-      },
-      {
-        "path": "/rate",
-        "name": "评分 (rate)",
-        "title": "评分组件"
-      }
-    ]
-  },
-  {
-    "group": "Nav",
-    "list": [
-      {
-        "path": "/tabs",
-        "name": "标签页 (tabs)",
-        "title": "tabs 标签页",
-        "description": "富展现的标签页"
-      },
-      {
-        "path": "/breadcrumb",
-        "name": "面包屑 (breadcrumb)",
-        "title": "breadcrumb 面包屑",
-        "description": ""
-      },
-      {
-        "path": "/dropdown",
-        "name": "下拉菜单 (dropdown)",
-        "title": "Dropdown 下拉菜单"
-      },
-      {
-        "path": "/steps",
-        "name": "步骤条 (steps)",
-        "title": "Steps 步骤",
-        "description": "引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。"
-      }
-    ]
-  },
-  {
-    "group": "Data",
-    "list": [
-      {
-        "path": "/table",
-        "name": "表格 (table)",
-        "title": "Table 表格",
-        "description": "用于展示多条结构类似的数据, 可对数据进行排序、筛选、对比或其他自定义操作。"
-      },
-      {
-        "path": "/progress",
-        "name": "进度条 (progress)",
-        "title": "progress 进度条",
-        "description": ""
-      },
-      {
-        "path": "/pagination",
-        "name": "分页 (pagination)",
-        "title": "Pagination 分页",
-        "description": "当数据量过多时, 使用分页分解数据"
-      },
-      {
-        "path": "/tree",
-        "name": "tree (tree)",
-        "title": "tree"
-      },
-      {
-        "path": "/badge",
-        "name": "标记 (badge)",
-        "title": " Badge 标记",
-        "description": "出现在按钮、图标旁的数字或状态标记"
-      }
-    ]
-  },
-  {
-    "group": "使用说明",
-    "list": [
-      {
-        "path": "/quickstart",
-        "name": "快速上手"
-      },
-      {
-        "path": "/development",
-        "name": "开发指南"
-      }
-    ]
+    "name": "安装指南",
+    "children": [{
+      "path": "/quickstart",
+      "name": "快速上手"
+    }, {
+      "path": "/development",
+      "name": "开发指南"
+    }]
   }
 ]

examples/pages/component.vue

@@ -1,13 +1,20 @@
+<style>
+  .el-col {
+    box-sizing: border-box;
+  }
+</style>
 <template>
   <div class="container">
-    <el-col :span="5">
-      <side-nav :data="navsData"></side-nav>
-    </el-col>
-    <el-col :span="19">
-      <div class="content">
-        <router-view></router-view>
-      </div>
-    </el-col>
+    <el-row :gutter="25">
+      <el-col :span="6">
+        <side-nav :data="navsData"></side-nav>
+      </el-col>
+      <el-col :span="18">
+        <div class="content">
+          <router-view></router-view>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 <script>
@@ -15,23 +22,8 @@
   export default {
     data() {
       return {
-        navsData: [{
-          name: '组件',
-          children: []
-        }, {
-          name: '安装指南',
-          children: [{
-            path: '/component/quickstart',
-            name: '快速上手'
-          }, {
-            path: '/component/dev',
-            name: '开发指南'
-          }]
-        }]
+        navsData: navs
       };
-    },
-    created() {
-      this.navsData[0].children = navs;
     }
-  }
+  };
 </script>

examples/route.config.js

@@ -6,21 +6,33 @@ const registerRoute = (config) => {
     component: require('./pages/component.vue'),
     children: []
   }];
-  config
-    .map(nav =>
-      nav.list.map(page => {
-        const component = require(`./docs${page.path}.md`);
+  function addRoute(page) {
+    const component = require(`./docs${page.path}.md`);
 
-        route[0].children.push({
-          path: page.path.slice(1),
-          meta: {
-            title: page.title || page.name,
-            description: page.description
-          },
-          component: component.default || component
+    route[0].children.push({
+      path: page.path.slice(1),
+      meta: {
+        title: page.title || page.name,
+        description: page.description
+      },
+      component: component.default || component
+    });
+  }
+  config
+    .map(nav => {
+      if (nav.groups) {
+        nav.groups.map(group => {
+          group.list.map(page => {
+            addRoute(page);
+          })
+        });
+      }
+      if (nav.children) {
+        nav.children.map(page => {
+          addRoute(page);
         });
-      })
-    );
+      }
+    });
 
   return { route, navs: config };
 };
@@ -48,12 +60,18 @@ let resourceRoute = {
   component: require('./pages/resource.vue')
 };
 
+let indexRoute = {
+  path: '/',
+  name: '首页',
+  component: require('./pages/index.vue')
+};
+
 let changeLogRoute = {
   path: '/changelog',
   component: require('./pages/changelog.vue')
 };
 
-route.route = route.route.concat([guideRoute, resourceRoute, changeLogRoute]);
+route.route = route.route.concat([indexRoute, guideRoute, resourceRoute, changeLogRoute]);
 
 route.route.push({
   path: '*',