diff --git a/examples/app.vue b/examples/app.vue index cbc1076bd..d7b1aa2ca 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -1,7 +1,4 @@ diff --git a/examples/components/side-nav.vue b/examples/components/side-nav.vue index 3936d59fb..6c3e11349 100644 --- a/examples/components/side-nav.vue +++ b/examples/components/side-nav.vue @@ -9,6 +9,7 @@ } ul { padding: 0; + margin: 0; } .nav-item { @@ -50,15 +51,22 @@
@@ -86,7 +94,11 @@ diff --git a/examples/pages/index.vue b/examples/pages/index.vue index bc1dc8115..62b7a96fe 100644 --- a/examples/pages/index.vue +++ b/examples/pages/index.vue @@ -1,6 +1,180 @@ + diff --git a/examples/pages/nav.vue b/examples/pages/nav.vue index c51234892..e8399e712 100644 --- a/examples/pages/nav.vue +++ b/examples/pages/nav.vue @@ -1,3 +1,152 @@ + \ No newline at end of file +
+

导航

+
+

导航可以解决用户在访问页面时:在哪里,去哪里,怎p去的问题。一般导航会有「侧栏导航」和「顶部导航」2种类型。

+
+
+

选择合适的导航

+

选择合适的导航可以让用户在产品的使用过程中非常流畅,相反若是不合适就会引起用户操作不适(方向不明确),以下是「侧栏导航」和 「顶部导航」的区别。

+
+
+

侧栏导航

+ + +

可将导航栏固定在左侧,提高导航可见性,方便页面之间切换;顶部可放置常用工具,如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。

+
+ + 一级类目 +
一级类目
+

适用于结构简单的网站:只有一级页面时,不需要使用面包屑。

+ 二级类目 +
二级类目
+

侧栏中最多可显示两级导航;当使用二级导航时,我们建议搭配使用面包屑,方便用户定位自己的位置和快速返回。

+ 三级类目 +
三级类目
+

适用于较复杂的工具型后台,左侧栏为一级导航,中间栏可显示其对应的二级导航,也可放置其他的工具型选项。

+
+
+
+
+

顶部导航

+ + +

顺应了从上至下的正常浏览顺序,方便浏览信息;顶部宽度限制了导航的数量和文本长度。

+
+ + +

适用于导航较少,页面篇幅较长的网站;

+
+
+
+
+
+ +
+ +
+
+
+
+ + diff --git a/examples/pages/resource.vue b/examples/pages/resource.vue index d59cdd2c9..bce29ae3b 100644 --- a/examples/pages/resource.vue +++ b/examples/pages/resource.vue @@ -1,3 +1,102 @@ + \ No newline at end of file +
+

资源

+

这里提供 Element 相关设计资源和设计工具的下载,更多设计资源正在整理和完善中。

+
+ +
+
+ diff --git a/examples/route.config.js b/examples/route.config.js index 0dfa73204..6468595e2 100644 --- a/examples/route.config.js +++ b/examples/route.config.js @@ -24,7 +24,7 @@ const registerRoute = (config) => { nav.groups.map(group => { group.list.map(page => { addRoute(page); - }) + }); }); } if (nav.children) { diff --git a/package.json b/package.json index 071ee27bd..52081fe86 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,8 @@ "url": "https://github.com/eleme/element-ui/issues" }, "dependencies": { - "object-assign": "^4.1.0" + "object-assign": "^4.1.0", + "typing.js": "^2.1.0" }, "devDependencies": { "babel-helper-vue-jsx-merge-props": "^1.0.1",