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..2732828bc 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -2003,3 +2003,102 @@ 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: #fff; + 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: auto; + height: 440px; + position: relative; + border-radius: 0 0 5px 5px; + background: #f4f4f4; +} +.window-frame .status-bar { + height: 2rem; + border-radius: 0 0 0.35rem 0.35rem; + display: none; +} 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..e9299a8a0 --- /dev/null +++ b/spec/layout/demo/aside.md @@ -0,0 +1,125 @@ +# 侧边导航 + +- order: 2 + +顶级导航在侧边栏。 + +侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。 + +--- + +````jsx +import { Menu, Breadcrumb, Icon } from 'antd'; +const SubMenu = Menu.SubMenu; + +ReactDOM.render( + +
+ +
+
+
+ + 首页 + 应用列表 + 某应用 + +
+
+
+
+
+
+
+ Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持 +
+
+
+ +, document.getElementById('spec-layout-demo-aside')); +```` + +````css +.ant-layout-aside { + position: relative; + min-height: 100%; +} + +.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; + background: #404040; + position: absolute; + overflow: auto; + padding-bottom: 24px; + height: 100%; +} + +.ant-layout-aside .ant-layout-sider > .ant-menu { + margin-bottom: 20px; +} + +.ant-layout-aside .ant-layout-header { + background: #fff; + height: 64px; + border-bottom: 1px solid #e9e9e9; +} + +.ant-layout-aside .ant-layout-breadcrumb { + margin: 7px 0 -17px 24px; +} + +.ant-layout-aside .ant-layout-main { + margin-left: 224px; +} + +.ant-layout-aside .ant-layout-container { + margin: 24px 16px; +} + +.ant-layout-aside .ant-layout-content { + background: #fff; + padding: 24px; +} + +.ant-layout-aside .ant-layout-footer { + height; 64px; + line-height: 64px; + 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 new file mode 100644 index 000000000..ce9fa5a7d --- /dev/null +++ b/spec/layout/demo/top-aside.md @@ -0,0 +1,139 @@ +# 顶部导航 + 侧边栏 + +- order: 1 + +顶级导航在头部，次级导航在侧边栏。 + +--- + +````jsx +import { Menu, Breadcrumb, Icon } from 'antd'; +const SubMenu = Menu.SubMenu; + +ReactDOM.render( + +
+
+
+
+ + 导航一 + 导航二 + 导航三 + +
+
+
+
+ + 二级导航 + 二级导航 + 二级导航 + +
+
+
+
+ + 首页 + 应用列表 + 某应用 + +
+
+ +
+
+
+
+
+ Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持 +
+
+
+ +, document.getElementById('spec-layout-demo-top-aside')); +```` + +````css +.ant-layout-topaside { + height: 100%; +} + +.ant-layout-topaside .ant-layout-wrapper { + padding: 0 50px; +} + +.ant-layout-topaside .ant-layout-header { + 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; + background: #fff; +} + +.ant-layout-topaside .ant-layout-breadcrumb { + margin: 7px 0 -17px 24px; +} + +.ant-layout-topaside .ant-layout-container { + background: #fff; + margin: 24px 0 0; + position: relative; + padding: 24px 0; + overflow: hidden; +} + +.ant-layout-topaside .ant-layout-sider { + width: 224px; + float: left; +} + +.ant-layout-topaside .ant-layout-content { + border-left: 1px solid #e9e9e9; + margin-left: 223px; +} + +.ant-layout-topaside .ant-layout-footer { + 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 new file mode 100644 index 000000000..c6d354e51 --- /dev/null +++ b/spec/layout/demo/top.md @@ -0,0 +1,108 @@ +# 顶部导航 + +- order: 0 + +一二级导航都在顶部。 + +顶部导航在页面布局上采用的是上下的结构，一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。 + +> `` 做演示用，无须复制。 + +--- + +````jsx +import { Menu, Breadcrumb } from 'antd'; + +ReactDOM.render( + +
+
+
+
+ + 导航一 + 导航二 + 导航三 + +
+
+
+
+ + 二级导航 + 二级导航 + 二级导航 + +
+
+
+
+ + 首页 + 应用列表 + 某应用 + +
+
+
+
+
+
+ Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持 +
+
+ +, document.getElementById('spec-layout-demo-top')); +```` + +````css +.ant-layout-top { + height: 100%; +} + +.ant-layout-top .ant-layout-wrapper { + padding: 0 50px; +} + +.ant-layout-top .ant-layout-header { + 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; + background: #fff; +} + +.ant-layout-top .ant-layout-breadcrumb { + margin: 7px 0 -17px 24px; +} + +.ant-layout-top .ant-layout-container { + background: #fff; + margin: 24px 0 0; + position: relative; + padding-top: 24px; + overflow: hidden; +} + +.ant-layout-top .ant-layout-footer { + height; 64px; + line-height: 64px; + text-align: center; + font-size: 12px; + color: #999; +} +```` diff --git a/spec/layout/index.md b/spec/layout/index.md new file mode 100644 index 000000000..b85c0422c --- /dev/null +++ b/spec/layout/index.md @@ -0,0 +1,47 @@ +# 常用布局 + +- template: component +- category: 基础 +- order: 4 +- cols: 1 + +--- + +布局和导航是一个页面的重要构成模式之一，是展开交互设计最早阶段需要确定下来的东西。 + +Ant Design 的布局和导航设计规范如下： + +### 尺寸规则 + +一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。 + +- 顶部导航（大部分系统）：一级导航高度 `64px`，二级导航 `48px`。 +- 顶部导航（展示类页面）：一级导航高度 `80px`,二级导航 `56px`。 +- 顶部导航高度的范围计算公式为：`48+8n`。 +- 侧边导航宽度的范围计算公式：`200+8n`。 + +### 交互原则 + +- 一级导航和末级的导航需要在可视化的层面被强调出来； +- 当前项应该在呈现上优先级最高； +- 当导航收起的时候，当前项的样式自动赋予给它的上一个层级； +- 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。 + +### 视觉原则 + +导航样式上需要根据信息层级合理的选择样式： + +- 大色块强调 + 建议用于底色为深色系时，当前页面父级的导航项。 + +- 高亮火柴棍 + 当导航栏底色为浅色系时使用，可用于当前页面对应导航项、建议尽量在导航路径的最终项使用。 + +- 字体高亮变色 + 从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。 + +- 字体放大 + `12px`、`14px`字体是导航栏的字体标准，字体的选择规律也应当考虑导航项的等级相应的做合理的使用。14 号字体在使用的时候只可用在一、二级导航中。 + + +Ant Design 使用两种常见的布局形式：顶部导航布局和侧边导航布局，以下收集了使用 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 --- diff --git a/style/components/menu.less b/style/components/menu.less index 26557cf4d..775513be2 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 #e9e9e9; } &-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; @@ -156,16 +161,15 @@ &-submenu-title { .anticon { width: 14px; - margin-right: 8px; + margin-right: 9px; top: 1px; } } &-horizontal { border: none; - border-bottom: 1px solid #d9d9d9; + border-bottom: 1px solid #e9e9e9; 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; }