From 2d9a77b474cd649c26ce31a3fc9e751bfc8b4543 Mon Sep 17 00:00:00 2001 From: baiyaaaaa Date: Tue, 23 Aug 2016 19:15:15 +0800 Subject: [PATCH] index --- examples/app.vue | 332 +----------- examples/assets/images/Axure-Components.svg | 41 ++ examples/assets/images/Module.svg | 62 +++ examples/assets/images/Sketch-Template.svg | 37 ++ examples/assets/images/banner-bg.svg | 559 ++++++++++++++++++++ examples/assets/images/fankui.svg | 28 + examples/assets/images/guide1.png | Bin 34079 -> 0 bytes examples/assets/images/guide2.png | Bin 50307 -> 0 bytes examples/assets/images/guide3.png | Bin 32934 -> 0 bytes examples/assets/images/guide4.png | Bin 31278 -> 0 bytes examples/assets/images/kekong.svg | 28 + examples/assets/images/navbar_0.png | Bin 0 -> 5178 bytes examples/assets/images/navbar_1.png | Bin 0 -> 5328 bytes examples/assets/images/navbar_2.png | Bin 0 -> 7935 bytes examples/assets/images/navbar_3.png | Bin 0 -> 5416 bytes examples/assets/images/xiaolv.svg | 36 ++ examples/assets/images/yizhi.svg | 58 ++ examples/assets/images/zhinan.svg | 45 ++ examples/assets/images/ziyuan.svg | 42 ++ examples/assets/images/zujian.svg | 67 +++ examples/components/footer.vue | 1 + examples/components/header.vue | 147 ++++- examples/components/side-nav.vue | 28 +- examples/docs/alert.md | 30 +- examples/entry.js | 6 +- examples/pages/component.vue | 46 +- examples/pages/design.vue | 81 ++- examples/pages/guide.vue | 82 ++- examples/pages/index.vue | 174 ++++++ examples/pages/nav.vue | 153 +++++- examples/pages/resource.vue | 103 +++- examples/route.config.js | 2 +- package.json | 3 +- 33 files changed, 1817 insertions(+), 374 deletions(-) create mode 100644 examples/assets/images/Axure-Components.svg create mode 100644 examples/assets/images/Module.svg create mode 100644 examples/assets/images/Sketch-Template.svg create mode 100644 examples/assets/images/banner-bg.svg create mode 100644 examples/assets/images/fankui.svg delete mode 100644 examples/assets/images/guide1.png delete mode 100644 examples/assets/images/guide2.png delete mode 100644 examples/assets/images/guide3.png delete mode 100644 examples/assets/images/guide4.png create mode 100644 examples/assets/images/kekong.svg create mode 100644 examples/assets/images/navbar_0.png create mode 100644 examples/assets/images/navbar_1.png create mode 100644 examples/assets/images/navbar_2.png create mode 100644 examples/assets/images/navbar_3.png create mode 100644 examples/assets/images/xiaolv.svg create mode 100644 examples/assets/images/yizhi.svg create mode 100644 examples/assets/images/zhinan.svg create mode 100644 examples/assets/images/ziyuan.svg create mode 100644 examples/assets/images/zujian.svg 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 相关设计资源和设计工具的下载,更多设计资源正在整理和完善中。

+
+
    +
  • +
    + +

    Axure Components

    +

    通过在 Axure 中导入 Element 组件库,可以在交互设计阶段方便地调用常用的组件

    + 下载 +
    +
  • +
  • +
    + +

    Sketch Template

    +

    从 Element Template 快速调用常用组件,在提升设计效率的同时,保证统一的视觉风格

    + 下载 +
    +
  • +
  • +
    + +

    组件交互文档

    +

    进一步查看 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",