From e97349e3661ecc446c83ee1394208f35ef144199 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 9 Nov 2015 18:05:23 +0800 Subject: [PATCH 1/7] basic page and demos for common layout --- site/templates/component.html | 2 -- site/templates/demos.html | 2 +- spec/colors.md | 2 +- spec/font.md | 2 +- spec/introduce.md | 2 +- spec/layout/demo/aside.md | 20 ++++++++++++++++++++ spec/layout/demo/top-aside.md | 19 +++++++++++++++++++ spec/layout/demo/top.md | 18 ++++++++++++++++++ spec/layout/index.md | 10 ++++++++++ spec/typography.md | 2 +- 10 files changed, 72 insertions(+), 7 deletions(-) create mode 100644 spec/layout/demo/aside.md create mode 100644 spec/layout/demo/top-aside.md create mode 100644 spec/layout/demo/top.md create mode 100644 spec/layout/index.md diff --git a/site/templates/component.html b/site/templates/component.html index e87b19210..4d068c72d 100644 --- a/site/templates/component.html +++ b/site/templates/component.html @@ -14,9 +14,7 @@ {{ post.html|add_anchor }} - {%- if post.meta.template === 'component' %} {%- include "demos.html" %} - {%- endif %}
{% endblock %} diff --git a/site/templates/demos.html b/site/templates/demos.html index 98f76891d..4f0866f61 100644 --- a/site/templates/demos.html +++ b/site/templates/demos.html @@ -1,7 +1,7 @@ {%- set items = resource.pages|find_demo_in_component(post.meta.directory) %} {%- if items.length > 0 %}

- 组件演示 + 代码演示 {%- if post.meta.sketch %} diff --git a/spec/colors.md b/spec/colors.md index 351823c88..befc19313 100644 --- a/spec/colors.md +++ b/spec/colors.md @@ -1,6 +1,6 @@ # 色彩 -- category: 风格 +- category: 基础 - order: 2 --- diff --git a/spec/font.md b/spec/font.md index 1755f5cd1..f31dc9adc 100644 --- a/spec/font.md +++ b/spec/font.md @@ -1,6 +1,6 @@ # 字体 -- category: 风格 +- category: 基础 - order: 0 --- diff --git a/spec/introduce.md b/spec/introduce.md index 95638ab49..d998945f5 100644 --- a/spec/introduce.md +++ b/spec/introduce.md @@ -1,6 +1,6 @@ # Ant Design -- category: top +- category: 0 - order: 0 --- diff --git a/spec/layout/demo/aside.md b/spec/layout/demo/aside.md new file mode 100644 index 000000000..8d800cd69 --- /dev/null +++ b/spec/layout/demo/aside.md @@ -0,0 +1,20 @@ +# 侧边导航 + +顶级导航在侧边栏。 + +--- + +````jsx +ReactDOM.render( +
+ 示例 +
+, document.getElementById('spec-layout-demo-aside')); +```` + + +````css + +``` + + diff --git a/spec/layout/demo/top-aside.md b/spec/layout/demo/top-aside.md new file mode 100644 index 000000000..0188b93e7 --- /dev/null +++ b/spec/layout/demo/top-aside.md @@ -0,0 +1,19 @@ +# 顶部导航 + 侧边栏 + +顶级导航在头部，次级导航在侧边栏。 + +--- + +````jsx +ReactDOM.render( +
+ 示例 +
+, document.getElementById('spec-layout-demo-top-aside')); +```` + + +````css + +``` + diff --git a/spec/layout/demo/top.md b/spec/layout/demo/top.md new file mode 100644 index 000000000..aabcff304 --- /dev/null +++ b/spec/layout/demo/top.md @@ -0,0 +1,18 @@ +# 顶部导航 + +一二级导航都在顶部。 + +--- + +````jsx +ReactDOM.render( +
+ 示例 +
+, document.getElementById('spec-layout-demo-top')); +```` + + +````css + +``` diff --git a/spec/layout/index.md b/spec/layout/index.md new file mode 100644 index 000000000..22fe89d48 --- /dev/null +++ b/spec/layout/index.md @@ -0,0 +1,10 @@ +# 常用布局 + +- template: component +- category: 基础 +- order: 4 +- cols: 1 + +--- + +收集和规范使用 Ant Design 设计的中后台产品的基本布局。 diff --git a/spec/typography.md b/spec/typography.md index f4bc4bbbb..2810a253e 100644 --- a/spec/typography.md +++ b/spec/typography.md @@ -1,6 +1,6 @@ # 排版 -- category: 风格 +- category: 基础 - order: 1 --- From 51a5a5d64dd0813f343450586f562134db1eb97d Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 9 Nov 2015 18:17:37 +0800 Subject: [PATCH 2/7] update demos --- spec/layout/demo/aside.md | 14 +++++++------- spec/layout/demo/top-aside.md | 12 +++++++----- spec/layout/demo/top.md | 12 +++++++----- 3 files changed, 21 insertions(+), 17 deletions(-) diff --git a/spec/layout/demo/aside.md b/spec/layout/demo/aside.md index 8d800cd69..ade74b409 100644 --- a/spec/layout/demo/aside.md +++ b/spec/layout/demo/aside.md @@ -6,15 +6,15 @@ ````jsx ReactDOM.render( -
- 示例 +
+ 布局示例
, document.getElementById('spec-layout-demo-aside')); ```` - ````css - -``` - - +.ant-common-layout { + background: #f9f9f9; + padding: 24px; +} +```` diff --git a/spec/layout/demo/top-aside.md b/spec/layout/demo/top-aside.md index 0188b93e7..8cd30c68d 100644 --- a/spec/layout/demo/top-aside.md +++ b/spec/layout/demo/top-aside.md @@ -6,14 +6,16 @@ ````jsx ReactDOM.render( -
- 示例 +
+ 布局示例
, document.getElementById('spec-layout-demo-top-aside')); ```` - ````css - -``` +.ant-common-layout { + background: #f9f9f9; + padding: 24px; +} +```` diff --git a/spec/layout/demo/top.md b/spec/layout/demo/top.md index aabcff304..9e38c5e7d 100644 --- a/spec/layout/demo/top.md +++ b/spec/layout/demo/top.md @@ -6,13 +6,15 @@ ````jsx ReactDOM.render( -
- 示例 +
+ 布局示例
, document.getElementById('spec-layout-demo-top')); ```` - ````css - -``` +.ant-common-layout { + background: #f9f9f9; + padding: 24px; +} +```` From 256c60fe8a7a14978fb6da07f7d0e8825c2be8f6 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 9 Nov 2015 19:40:35 +0800 Subject: [PATCH 3/7] Add basic layout code --- spec/layout/demo/aside.md | 59 ++++++++++++++++++++++++++--- spec/layout/demo/top-aside.md | 70 ++++++++++++++++++++++++++++++++--- spec/layout/demo/top.md | 53 +++++++++++++++++++++++--- 3 files changed, 166 insertions(+), 16 deletions(-) diff --git a/spec/layout/demo/aside.md b/spec/layout/demo/aside.md index ade74b409..eed08eb94 100644 --- a/spec/layout/demo/aside.md +++ b/spec/layout/demo/aside.md @@ -1,20 +1,69 @@ # 侧边导航 +- order: 2 + 顶级导航在侧边栏。 --- ````jsx +import { Menu, Breadcrumb } from 'antd'; + ReactDOM.render( -
- 布局示例 +
+ +
+
+
+
+ + 首页 + 应用列表 + 某应用 + +
+
+
+
+
+
, document.getElementById('spec-layout-demo-aside')); ```` ````css -.ant-common-layout { - background: #f9f9f9; - padding: 24px; +.ant-layout-aside { + background: #f4f4f4; + height: 400px; + overflow: hidden; + position: relative; +} + +.ant-layout-aside .ant-layout-sider { + width: 224px; + height: 100%; + position: absolute; + background: #373737; +} + +.ant-layout-aside .ant-layout-header { + background: #fff; + height: 64px; + border-bottom: 1px solid #e9e9e9; +} + +.ant-layout-aside .ant-layout-breadcrumb { + margin-top: 7px; + margin-bottom: -17px; +} + +.ant-layout-aside .ant-layout-container { + margin: 0 16px 16px 240px; +} + +.ant-layout-aside .ant-layout-content { + background: #fff; + margin-top: 24px; } ```` diff --git a/spec/layout/demo/top-aside.md b/spec/layout/demo/top-aside.md index 8cd30c68d..1b567eb61 100644 --- a/spec/layout/demo/top-aside.md +++ b/spec/layout/demo/top-aside.md @@ -1,21 +1,79 @@ # 顶部导航 + 侧边栏 +- order: 1 + 顶级导航在头部，次级导航在侧边栏。 --- ````jsx +import { Menu, Breadcrumb } from 'antd'; + ReactDOM.render( -
- 布局示例 +
+
+
+
+
+ + 首页 + 应用列表 + 某应用 + +
+
+ +
+
+
+
+
, document.getElementById('spec-layout-demo-top-aside')); ```` ````css -.ant-common-layout { - background: #f9f9f9; - padding: 24px; +.ant-layout-topaside { + background: #f4f4f4; + height: 400px; + overflow: hidden; +} + +.ant-layout-topaside .ant-layout-header { + background: #373737; + height: 64px; +} + +.ant-layout-topaside .ant-layout-subheader { + height: 48px; + border-bottom: 1px solid #e9e9e9; + background: #fff; +} + +.ant-layout-topaside .ant-layout-breadcrumb { + margin-top: 7px; + margin-bottom: -17px; +} + +.ant-layout-topaside .ant-layout-main { + padding: 0 50px; +} + +.ant-layout-topaside .ant-layout-container { + background: #fff; + margin-top: 24px; + position: relative; +} + +.ant-layout-topaside .ant-layout-sider { + width: 224px; + height: 100%; + position: absolute; +} + +.ant-layout-topaside .ant-layout-content { + border-left: 1px solid #e9e9e9; + margin-left: 224px; } ```` - diff --git a/spec/layout/demo/top.md b/spec/layout/demo/top.md index 9e38c5e7d..08e1ba192 100644 --- a/spec/layout/demo/top.md +++ b/spec/layout/demo/top.md @@ -1,20 +1,63 @@ # 顶部导航 +- order: 0 + 一二级导航都在顶部。 --- ````jsx +import { Menu, Breadcrumb } from 'antd'; + ReactDOM.render( -
- 布局示例 +
+
+
+
+
+ + 首页 + 应用列表 + 某应用 + +
+
+
+
+
, document.getElementById('spec-layout-demo-top')); ```` ````css -.ant-common-layout { - background: #f9f9f9; - padding: 24px; +.ant-layout-top { + background: #f4f4f4; + height: 400px; + overflow: hidden; +} + +.ant-layout-top .ant-layout-header { + background: #373737; + height: 64px; +} + +.ant-layout-top .ant-layout-subheader { + height: 48px; + border-bottom: 1px solid #e9e9e9; + background: #fff; +} + +.ant-layout-top .ant-layout-breadcrumb { + margin-top: 7px; + margin-bottom: -17px; +} + +.ant-layout-top .ant-layout-main { + padding: 0 50px; +} + +.ant-layout-top .ant-layout-container { + background: #fff; + margin-top: 24px; } ```` From 8ea8d8f547e4c25af1e623b737678a85d2144193 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 9 Nov 2015 21:00:30 +0800 Subject: [PATCH 4/7] Add browser picture --- scripts/demo.js | 20 +++++++ site/static/style.css | 98 +++++++++++++++++++++++++++++++++++ spec/layout/demo/aside.md | 38 +++++++------- spec/layout/demo/top-aside.md | 39 +++++++------- spec/layout/demo/top.md | 35 +++++++------ 5 files changed, 176 insertions(+), 54 deletions(-) diff --git a/scripts/demo.js b/scripts/demo.js index 2781c4fd2..31cf93a3d 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -81,4 +81,24 @@ InstantClickChangeFns.push(function () { , document.getElementById('versions-select')); }); +window.BrowserDemo = React.createClass({ + render() { + return ( +
+
+
+
+
+
+
+ +
+
+ {this.props.children} +
+
+ ); + } +}); + module.exports = antd; diff --git a/site/static/style.css b/site/static/style.css index 0e2928631..0ce34e40a 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -2003,3 +2003,101 @@ a.entry-link:hover .anticon-smile { position: relative; top: -2px; } + +.window-frame { + position: relative; + margin: 0; + padding: 0; + border-radius: 5px; + border: 1px solid #ccc; + background-color: white; + line-height: 1; +} + +.window-frame .top-bar { + background: #DCD9DC; + background-image: -webkit-linear-gradient(#F6F6F6, #dadada); + background-image: linear-gradient(#F6F6F6, #dadada); + min-height: 2rem; + border-radius: 0.35rem 0.35rem 0 0; + padding: 0.41528rem 0.83056rem; + border-bottom: 1px solid transparent; + border-bottom-color: #ccc; + color: rgba(0, 0, 0, 0.5); +} + +.window-frame .top-bar .address-bar { + border-radius: 0.245rem; + border: 1px solid rgba(0, 0, 0, 0.3); + color: black; + box-shadow: 0 0.5px 0 0 rgba(255, 255, 255, 0.75), inset 0 1px 1px rgba(0, 0, 0, 0.15); + display: inline-block; + padding: 0 0.5em 0 1em; + font-size: 0.75rem; + line-height: 2; + background: white; + width: 60%; + margin-left: 15%; +} + +.window-frame .top-bar .controls { + display: inline-block; + vertical-align: top; + position: relative; + padding-top: 0.2em; +} +.window-frame .top-bar .controls > * { + position: relative; + vertical-align: middle; + line-height: 1; + display: inline-block; + margin-right: 0.41528rem; + -webkit-transition: 0.1s linear; + transition: 0.1s linear; +} +.window-frame .top-bar .control { + width: 0.83056rem; + height: 0.83056rem; + background: #DCD9DC; + border-radius: 0.83056rem; + border: 1px solid rgba(0, 0, 0, 0.08); + cursor: pointer; +} +.window-frame .top-bar .control:hover { + background: #b0adb0; +} +.window-frame .top-bar .control:before, +.window-frame .top-bar .control:after { + line-height: 0.5; + color: black; + text-align: center; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + vertical-align: middle; + line-height: 0.5; +} +.window-frame .top-bar .control.close { + background: #FC625C; +} +.window-frame .top-bar .control.minify { + background: #FDC041; +} +.window-frame .top-bar .control.expand { + background: #35CD4B; +} +.window-frame .window-content { + padding: 0; + line-height: 1.5; + overflow: hidden; + height: 400px; + position: relative; + border-radius: 0 0 5px 5px; +} +.window-frame .status-bar { + height: 2rem; + border-radius: 0 0 0.35rem 0.35rem; + display: none; +} diff --git a/spec/layout/demo/aside.md b/spec/layout/demo/aside.md index eed08eb94..b328758a8 100644 --- a/spec/layout/demo/aside.md +++ b/spec/layout/demo/aside.md @@ -10,34 +10,34 @@ import { Menu, Breadcrumb } from 'antd'; ReactDOM.render( -
- -
-
-
-
- - 首页 - 应用列表 - 某应用 - -
-
-
+ +
+ +
+
+
+
+ + 首页 + 应用列表 + 某应用 + +
+
+
+
-
+ , document.getElementById('spec-layout-demo-aside')); ```` ````css .ant-layout-aside { background: #f4f4f4; - height: 400px; - overflow: hidden; - position: relative; + height: 100%; } .ant-layout-aside .ant-layout-sider { diff --git a/spec/layout/demo/top-aside.md b/spec/layout/demo/top-aside.md index 1b567eb61..996f6b087 100644 --- a/spec/layout/demo/top-aside.md +++ b/spec/layout/demo/top-aside.md @@ -10,34 +10,35 @@ import { Menu, Breadcrumb } from 'antd'; ReactDOM.render( -
-
-
-
-
- - 首页 - 应用列表 - 某应用 - -
-
- -
-
+ +
+
+
+
+
+ + 首页 + 应用列表 + 某应用 + +
+
+ +
+
+
-
+ , document.getElementById('spec-layout-demo-top-aside')); ```` ````css .ant-layout-topaside { background: #f4f4f4; - height: 400px; - overflow: hidden; + height: 100%; } .ant-layout-topaside .ant-layout-header { diff --git a/spec/layout/demo/top.md b/spec/layout/demo/top.md index 08e1ba192..fdfe1f940 100644 --- a/spec/layout/demo/top.md +++ b/spec/layout/demo/top.md @@ -4,36 +4,39 @@ 一二级导航都在顶部。 +> `` 做演示用，无须复制。 + --- ````jsx import { Menu, Breadcrumb } from 'antd'; ReactDOM.render( -
-
-
-
-
- - 首页 - 应用列表 - 某应用 - -
-
-
+ +
+
+
+
+
+ + 首页 + 应用列表 + 某应用 + +
+
+
+
-
+ , document.getElementById('spec-layout-demo-top')); ```` ````css .ant-layout-top { background: #f4f4f4; - height: 400px; - overflow: hidden; + height: 100%; } .ant-layout-top .ant-layout-header { From 2b59fbeded2aebad0107dff4cf13bcd9364513a1 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 14 Nov 2015 20:41:10 +0800 Subject: [PATCH 5/7] Add common layout --- site/static/style.css | 7 +-- spec/layout/demo/aside.md | 75 ++++++++++++++++++++++++------- spec/layout/demo/top-aside.md | 84 +++++++++++++++++++++++++++-------- spec/layout/demo/top.md | 55 +++++++++++++++++------ style/components/menu.less | 18 +++++--- 5 files changed, 181 insertions(+), 58 deletions(-) diff --git a/site/static/style.css b/site/static/style.css index 0ce34e40a..2732828bc 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -2010,7 +2010,7 @@ a.entry-link:hover .anticon-smile { padding: 0; border-radius: 5px; border: 1px solid #ccc; - background-color: white; + background-color: #fff; line-height: 1; } @@ -2091,10 +2091,11 @@ a.entry-link:hover .anticon-smile { .window-frame .window-content { padding: 0; line-height: 1.5; - overflow: hidden; - height: 400px; + overflow: auto; + height: 440px; position: relative; border-radius: 0 0 5px 5px; + background: #f4f4f4; } .window-frame .status-bar { height: 2rem; diff --git a/spec/layout/demo/aside.md b/spec/layout/demo/aside.md index b328758a8..cca50b6ee 100644 --- a/spec/layout/demo/aside.md +++ b/spec/layout/demo/aside.md @@ -7,25 +7,48 @@ --- ````jsx -import { Menu, Breadcrumb } from 'antd'; +import { Menu, Breadcrumb, Icon } from 'antd'; +const SubMenu = Menu.SubMenu; ReactDOM.render(
+
+ + 首页 + 应用列表 + 某应用 + +
-
- - 首页 - 应用列表 - 某应用 - -
-
+
@@ -36,15 +59,29 @@ ReactDOM.render( ````css .ant-layout-aside { - background: #f4f4f4; - height: 100%; + position: relative; + min-height: 100%; + overflow: hidden; +} + +.ant-layout-aside .ant-layout-logo { + width: 150px; + height: 32px; + background: #333; + border-radius: 6px; + margin: 16px 24px 16px 28px; } .ant-layout-aside .ant-layout-sider { width: 224px; - height: 100%; + background: #404040; position: absolute; - background: #373737; + padding-bottom: 24px; + min-height: 100%; +} + +.ant-layout-aside .ant-layout-sider > .ant-menu { + margin-bottom: 20px; } .ant-layout-aside .ant-layout-header { @@ -54,16 +91,20 @@ ReactDOM.render( } .ant-layout-aside .ant-layout-breadcrumb { - margin-top: 7px; - margin-bottom: -17px; + margin: 7px 0 -17px 24px; +} + +.ant-layout-aside .ant-layout-main { + margin-left: 224px; + margin-bottom: 24px; } .ant-layout-aside .ant-layout-container { - margin: 0 16px 16px 240px; + margin: 24px 16px; } .ant-layout-aside .ant-layout-content { background: #fff; - margin-top: 24px; + padding: 24px; } ```` diff --git a/spec/layout/demo/top-aside.md b/spec/layout/demo/top-aside.md index 996f6b087..2eb155ea4 100644 --- a/spec/layout/demo/top-aside.md +++ b/spec/layout/demo/top-aside.md @@ -7,14 +7,34 @@ --- ````jsx -import { Menu, Breadcrumb } from 'antd'; +import { Menu, Breadcrumb, Icon } from 'antd'; +const SubMenu = Menu.SubMenu; ReactDOM.render(
-
-
-
+
+
+
+ + 导航一 + 导航二 + 导航三 + +
+
+
+
+ + 二级导航 + 二级导航 + 二级导航 + +
+
+
首页 @@ -24,6 +44,26 @@ ReactDOM.render(
@@ -37,44 +77,52 @@ ReactDOM.render( ````css .ant-layout-topaside { - background: #f4f4f4; height: 100%; } +.ant-layout-topaside .ant-layout-wrapper { + padding: 0 50px; +} + .ant-layout-topaside .ant-layout-header { - background: #373737; + background: #404040; height: 64px; } +.ant-layout-topaside .ant-layout-logo { + width: 120px; + height: 32px; + background: #333; + border-radius: 6px; + margin: 16px 28px 16px 0; + float: left; +} + .ant-layout-topaside .ant-layout-subheader { height: 48px; - border-bottom: 1px solid #e9e9e9; + border-bottom: 1px solid #d9d9d9; background: #fff; } .ant-layout-topaside .ant-layout-breadcrumb { - margin-top: 7px; - margin-bottom: -17px; -} - -.ant-layout-topaside .ant-layout-main { - padding: 0 50px; + margin: 7px 0 -17px 24px; } .ant-layout-topaside .ant-layout-container { background: #fff; - margin-top: 24px; + margin: 24px 0; position: relative; + padding: 24px 0; + overflow: hidden; } .ant-layout-topaside .ant-layout-sider { width: 224px; - height: 100%; - position: absolute; + float: left; } .ant-layout-topaside .ant-layout-content { - border-left: 1px solid #e9e9e9; - margin-left: 224px; + border-left: 1px solid #d9d9d9; + margin-left: 223px; } ```` diff --git a/spec/layout/demo/top.md b/spec/layout/demo/top.md index fdfe1f940..7468993b0 100644 --- a/spec/layout/demo/top.md +++ b/spec/layout/demo/top.md @@ -14,9 +14,28 @@ import { Menu, Breadcrumb } from 'antd'; ReactDOM.render(
-
-
-
+
+
+
+ + 导航一 + 导航二 + 导航三 + +
+
+
+
+ + 二级导航 + 二级导航 + 二级导航 + +
+
+
首页 @@ -35,32 +54,42 @@ ReactDOM.render( ````css .ant-layout-top { - background: #f4f4f4; height: 100%; } +.ant-layout-top .ant-layout-wrapper { + padding: 0 50px; +} + .ant-layout-top .ant-layout-header { - background: #373737; + background: #404040; height: 64px; } +.ant-layout-top .ant-layout-logo { + width: 120px; + height: 32px; + background: #333; + border-radius: 6px; + margin: 16px 28px 16px 0; + float: left; +} + .ant-layout-top .ant-layout-subheader { height: 48px; - border-bottom: 1px solid #e9e9e9; + border-bottom: 1px solid #d9d9d9; background: #fff; } .ant-layout-top .ant-layout-breadcrumb { - margin-top: 7px; - margin-bottom: -17px; -} - -.ant-layout-top .ant-layout-main { - padding: 0 50px; + margin: 7px 0 -17px 24px; } .ant-layout-top .ant-layout-container { background: #fff; - margin-top: 24px; + margin: 24px 0; + position: relative; + padding-top: 24px; + overflow: hidden; } ```` diff --git a/style/components/menu.less b/style/components/menu.less index 26557cf4d..c9c937cb7 100644 --- a/style/components/menu.less +++ b/style/components/menu.less @@ -10,7 +10,7 @@ box-shadow: @overlay-shadow; color: @text-color; background: #fff; - line-height: 50px; + line-height: 46px; &-hidden { display: none; @@ -25,7 +25,7 @@ color: #999; line-height: 1.5; padding: 8px 10px; - border-bottom: 1px solid #dedede; + border-bottom: 1px solid #d9d9d9; } &-item, @@ -41,6 +41,11 @@ background-color: tint(@primary-color, 90%); } + &-horizontal &-item, + &-horizontal &-submenu { + margin-top: -1px; + } + &-horizontal > &-item-active, &-horizontal > &-submenu &-submenu-title:hover { background-color: transparent; @@ -52,7 +57,7 @@ &-inline, &-vertical { - border-right: 1px solid #e9e9e9; + border-right: 1px solid #d9d9d9; .@{menu-prefix-cls}-item { border-right: 2px solid transparent; margin-left: -1px; @@ -156,7 +161,7 @@ &-submenu-title { .anticon { width: 14px; - margin-right: 8px; + margin-right: 9px; top: 1px; } } @@ -165,7 +170,6 @@ border: none; border-bottom: 1px solid #d9d9d9; box-shadow: none; - padding-left: 20px; z-index: 0; > .@{menu-prefix-cls}-item, @@ -211,7 +215,7 @@ &-vertical, &-inline { & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { - padding: 0 20px; + padding: 0px 16px 0 28px; font-size: 12px; line-height: 42px; height: 42px; @@ -264,7 +268,7 @@ &-dark&-horizontal > &-item, &-dark&-horizontal > &-submenu { - border-bottom: 2px solid transparent; + border-bottom: 0; top: 0; } From 6978001367444dd2b0d5a790c37da9c1aee142c8 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 14 Nov 2015 21:08:43 +0800 Subject: [PATCH 6/7] Add footer --- spec/layout/demo/aside.md | 20 +++++++++++++++--- spec/layout/demo/top-aside.md | 14 +++++++++++-- spec/layout/demo/top.md | 14 ++++++++++++- spec/layout/index.md | 39 ++++++++++++++++++++++++++++++++++- style/components/menu.less | 6 +++--- 5 files changed, 83 insertions(+), 10 deletions(-) diff --git a/spec/layout/demo/aside.md b/spec/layout/demo/aside.md index cca50b6ee..15cec1972 100644 --- a/spec/layout/demo/aside.md +++ b/spec/layout/demo/aside.md @@ -4,6 +4,8 @@ 顶级导航在侧边栏。 +侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。 + --- ````jsx @@ -51,6 +53,9 @@ ReactDOM.render(
+
+ Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持 +
@@ -61,7 +66,6 @@ ReactDOM.render( .ant-layout-aside { position: relative; min-height: 100%; - overflow: hidden; } .ant-layout-aside .ant-layout-logo { @@ -76,8 +80,9 @@ ReactDOM.render( width: 224px; background: #404040; position: absolute; + overflow: auto; padding-bottom: 24px; - min-height: 100%; + height: 100%; } .ant-layout-aside .ant-layout-sider > .ant-menu { @@ -96,7 +101,6 @@ ReactDOM.render( .ant-layout-aside .ant-layout-main { margin-left: 224px; - margin-bottom: 24px; } .ant-layout-aside .ant-layout-container { @@ -107,4 +111,14 @@ ReactDOM.render( background: #fff; padding: 24px; } + +.ant-layout-aside .ant-layout-footer { + padding: 16px 0px; + text-align: center; + font-size: 12px; + color: #999; + background: #fff; + border-top: 1px solid #e9e9e9; + width: 100%; +} ```` diff --git a/spec/layout/demo/top-aside.md b/spec/layout/demo/top-aside.md index 2eb155ea4..469024b23 100644 --- a/spec/layout/demo/top-aside.md +++ b/spec/layout/demo/top-aside.md @@ -69,6 +69,9 @@ ReactDOM.render(
+
+ Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持 +
@@ -100,7 +103,7 @@ ReactDOM.render( .ant-layout-topaside .ant-layout-subheader { height: 48px; - border-bottom: 1px solid #d9d9d9; + border-bottom: 1px solid #e9e9e9; background: #fff; } @@ -122,7 +125,14 @@ ReactDOM.render( } .ant-layout-topaside .ant-layout-content { - border-left: 1px solid #d9d9d9; + border-left: 1px solid #e9e9e9; margin-left: 223px; } + +.ant-layout-topaside .ant-layout-footer { + margin: 24px 0; + text-align: center; + font-size: 12px; + color: #999; +} ```` diff --git a/spec/layout/demo/top.md b/spec/layout/demo/top.md index 7468993b0..12e7c260f 100644 --- a/spec/layout/demo/top.md +++ b/spec/layout/demo/top.md @@ -4,6 +4,8 @@ 一二级导航都在顶部。 +顶部导航在页面布局上采用的是上下的结构，一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。 + > `` 做演示用，无须复制。 --- @@ -47,6 +49,9 @@ ReactDOM.render(
+
+ Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持 +
, document.getElementById('spec-layout-demo-top')); @@ -77,7 +82,7 @@ ReactDOM.render( .ant-layout-top .ant-layout-subheader { height: 48px; - border-bottom: 1px solid #d9d9d9; + border-bottom: 1px solid #e9e9e9; background: #fff; } @@ -92,4 +97,11 @@ ReactDOM.render( padding-top: 24px; overflow: hidden; } + +.ant-layout-top .ant-layout-footer { + margin: 24px 0; + text-align: center; + font-size: 12px; + color: #999; +} ```` diff --git a/spec/layout/index.md b/spec/layout/index.md index 22fe89d48..b85c0422c 100644 --- a/spec/layout/index.md +++ b/spec/layout/index.md @@ -7,4 +7,41 @@ --- -收集和规范使用 Ant Design 设计的中后台产品的基本布局。 +布局和导航是一个页面的重要构成模式之一，是展开交互设计最早阶段需要确定下来的东西。 + +Ant Design 的布局和导航设计规范如下： + +### 尺寸规则 + +一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。 + +- 顶部导航（大部分系统）：一级导航高度 `64px`，二级导航 `48px`。 +- 顶部导航（展示类页面）：一级导航高度 `80px`,二级导航 `56px`。 +- 顶部导航高度的范围计算公式为：`48+8n`。 +- 侧边导航宽度的范围计算公式：`200+8n`。 + +### 交互原则 + +- 一级导航和末级的导航需要在可视化的层面被强调出来； +- 当前项应该在呈现上优先级最高； +- 当导航收起的时候，当前项的样式自动赋予给它的上一个层级； +- 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。 + +### 视觉原则 + +导航样式上需要根据信息层级合理的选择样式： + +- 大色块强调 + 建议用于底色为深色系时，当前页面父级的导航项。 + +- 高亮火柴棍 + 当导航栏底色为浅色系时使用，可用于当前页面对应导航项、建议尽量在导航路径的最终项使用。 + +- 字体高亮变色 + 从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。 + +- 字体放大 + `12px`、`14px`字体是导航栏的字体标准，字体的选择规律也应当考虑导航项的等级相应的做合理的使用。14 号字体在使用的时候只可用在一、二级导航中。 + + +Ant Design 使用两种常见的布局形式：顶部导航布局和侧边导航布局，以下收集了使用 Ant Design 设计的中后台产品的基本布局。 diff --git a/style/components/menu.less b/style/components/menu.less index c9c937cb7..775513be2 100644 --- a/style/components/menu.less +++ b/style/components/menu.less @@ -25,7 +25,7 @@ color: #999; line-height: 1.5; padding: 8px 10px; - border-bottom: 1px solid #d9d9d9; + border-bottom: 1px solid #e9e9e9; } &-item, @@ -57,7 +57,7 @@ &-inline, &-vertical { - border-right: 1px solid #d9d9d9; + border-right: 1px solid #e9e9e9; .@{menu-prefix-cls}-item { border-right: 2px solid transparent; margin-left: -1px; @@ -168,7 +168,7 @@ &-horizontal { border: none; - border-bottom: 1px solid #d9d9d9; + border-bottom: 1px solid #e9e9e9; box-shadow: none; z-index: 0; From b534cb4d3072cde876aca42b6848084b781f55e7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 14 Nov 2015 21:12:02 +0800 Subject: [PATCH 7/7] Fix footer height --- spec/layout/demo/aside.md | 3 ++- spec/layout/demo/top-aside.md | 5 +++-- spec/layout/demo/top.md | 5 +++-- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/spec/layout/demo/aside.md b/spec/layout/demo/aside.md index 15cec1972..e9299a8a0 100644 --- a/spec/layout/demo/aside.md +++ b/spec/layout/demo/aside.md @@ -113,7 +113,8 @@ ReactDOM.render( } .ant-layout-aside .ant-layout-footer { - padding: 16px 0px; + height; 64px; + line-height: 64px; text-align: center; font-size: 12px; color: #999; diff --git a/spec/layout/demo/top-aside.md b/spec/layout/demo/top-aside.md index 469024b23..ce9fa5a7d 100644 --- a/spec/layout/demo/top-aside.md +++ b/spec/layout/demo/top-aside.md @@ -113,7 +113,7 @@ ReactDOM.render( .ant-layout-topaside .ant-layout-container { background: #fff; - margin: 24px 0; + margin: 24px 0 0; position: relative; padding: 24px 0; overflow: hidden; @@ -130,7 +130,8 @@ ReactDOM.render( } .ant-layout-topaside .ant-layout-footer { - margin: 24px 0; + height; 64px; + line-height: 64px; text-align: center; font-size: 12px; color: #999; diff --git a/spec/layout/demo/top.md b/spec/layout/demo/top.md index 12e7c260f..c6d354e51 100644 --- a/spec/layout/demo/top.md +++ b/spec/layout/demo/top.md @@ -92,14 +92,15 @@ ReactDOM.render( .ant-layout-top .ant-layout-container { background: #fff; - margin: 24px 0; + margin: 24px 0 0; position: relative; padding-top: 24px; overflow: hidden; } .ant-layout-top .ant-layout-footer { - margin: 24px 0; + height; 64px; + line-height: 64px; text-align: center; font-size: 12px; color: #999;