GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Translate layout specification (#4542) 

* create english index file

* tanslated the index

* tanslated aside.md

* adjust code format

* translated aside-collapse.md

* translated ceiling.md

* translated top.md

* translated top-aside.md
pull/4693/head
Gray Choi 8 years ago
committed by 偏右
parent
cebf3a4c9e
commit
bde7d1c624
7 changed files with 171 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 30
      docs/spec/layout/demo/aside-collapse.md
  2. 52
      docs/spec/layout/demo/aside.md
  3. 15
      docs/spec/layout/demo/ceiling.md
  4. 62
      docs/spec/layout/demo/top-aside.md
  5. 33
      docs/spec/layout/demo/top.md
  6. 50
      docs/spec/layout/index.en-US.md
  7. 8
      docs/spec/layout/index.zh-CN.md

30
docs/spec/layout/demo/aside-collapse.md
View File

@ -1,10 +1,18 @@
---
order: 4
title: 可收起展开的侧边导航
title:
zh-CN: 可收起展开的侧边导航
en-US: Collapsed aside
---
## zh-CN
页面横向空间有限时使用。侧边导航默认收起，点击底部按钮时展开。
## en-US
This pattern is used when the horizontal space is limited. Aside navigation is default to be collapsed, you can click the button at the bottom to expand it.
````__react
import { Menu, Breadcrumb, Icon } from 'antd';
import BrowserDemo from 'site/theme/template/BrowserDemo';
@ -30,23 +38,23 @@ const AsideCollapse = React.createClass({
<Menu mode="inline" theme="dark" defaultSelectedKeys={['user']}>
<Menu.Item key="user">
<Icon type="user" />
{!collapse && <span className="nav-text">导航一</span>}
{!collapse && <span className="nav-text">Navigation 1</span>}
</Menu.Item>
<Menu.Item key="setting">
<Icon type="setting" />
{!collapse && <span className="nav-text">导航二</span>}
{!collapse && <span className="nav-text">Navigation 2</span>}
</Menu.Item>
<Menu.Item key="laptop">
<Icon type="laptop" />
{!collapse && <span className="nav-text">导航三</span>}
{!collapse && <span className="nav-text">Navigation 3</span>}
</Menu.Item>
<Menu.Item key="notification">
<Icon type="notification" />
{!collapse && <span className="nav-text">导航四</span>}
{!collapse && <span className="nav-text">Navigation 4</span>}
</Menu.Item>
<Menu.Item key="folder">
<Icon type="folder" />
{!collapse && <span className="nav-text">导航五</span>}
{!collapse && <span className="nav-text">Navigation 5</span>}
</Menu.Item>
</Menu>
<div className="aside-action" onClick={this.onCollapseChange}>
@ -57,18 +65,18 @@ const AsideCollapse = React.createClass({
<div className="layout-header"></div>
<div className="layout-container">
<Breadcrumb>
<Breadcrumb.Item>首页</Breadcrumb.Item>
<Breadcrumb.Item>应用列表</Breadcrumb.Item>
<Breadcrumb.Item>某应用</Breadcrumb.Item>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>App list</Breadcrumb.Item>
<Breadcrumb.Item>Any app</Breadcrumb.Item>
</Breadcrumb>
<div className="layout-content">
<div style={{ height: 220 }}>
内容区域
Contents
</div>
</div>
</div>
<div className="layout-footer">
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
Ant Design all rights reserved © 2015 Created by Ant UED
</div>
</div>
</div>

52
docs/spec/layout/demo/aside.md
View File

@ -1,12 +1,22 @@
---
order: 2
title: 侧边导航
title:
zh-CN: 侧边导航
en-US: Aside
---
## zh-CN
顶级导航在侧边栏。
侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。
## en-US
Aside top level navigation
A left-right structure of page layouts is used to Aside navigation, Generally, the mainnav is placed on the left side of the page, the secondary menu is placed on the top of the working area. Contens will adapts the layout to the viewing environment to imporve usage rates of horizaontal space, but the layout of the whole page is not stable. The level of the aisde navigation is scalable. The first, second, third level navigations could be present more fluently and relevantly, and aside navigation can be fixed to allows users quickly switch and spot the current position when they are operating or viewing, there is a high operational efficency. But such navigation will occupie some space of the contents in the horizontal space.
````__react
import { Menu, Breadcrumb, Icon } from 'antd';
import BrowserDemo from 'site/theme/template/BrowserDemo';
@ -19,23 +29,23 @@ ReactDOM.render(
<div className="layout-logo"></div>
<Menu mode="inline" theme="dark"
defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}>
<SubMenu key="sub1" title={<span><Icon type="user" />导航一</span>}>
<Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item>
<Menu.Item key="3">选项3</Menu.Item>
<Menu.Item key="4">选项4</Menu.Item>
<SubMenu key="sub1" title={<span><Icon type="user" />Navigation 1</span>}>
<Menu.Item key="1">item 1</Menu.Item>
<Menu.Item key="2">item 2</Menu.Item>
<Menu.Item key="3">item 3</Menu.Item>
<Menu.Item key="4">item 4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" title={<span><Icon type="laptop" />导航二</span>}>
<Menu.Item key="5">选项5</Menu.Item>
<Menu.Item key="6">选项6</Menu.Item>
<Menu.Item key="7">选项7</Menu.Item>
<Menu.Item key="8">选项8</Menu.Item>
<SubMenu key="sub2" title={<span><Icon type="laptop" />Navigation 2</span>}>
<Menu.Item key="5">item 5</Menu.Item>
<Menu.Item key="6">item 6</Menu.Item>
<Menu.Item key="7">item 7</Menu.Item>
<Menu.Item key="8">item 8</Menu.Item>
</SubMenu>
<SubMenu key="sub3" title={<span><Icon type="notification" />导航三</span>}>
<Menu.Item key="9">选项9</Menu.Item>
<Menu.Item key="10">选项10</Menu.Item>
<Menu.Item key="11">选项11</Menu.Item>
<Menu.Item key="12">选项12</Menu.Item>
<SubMenu key="sub3" title={<span><Icon type="notification" />Navigation 3</span>}>
<Menu.Item key="9">item 9</Menu.Item>
<Menu.Item key="10">item 10</Menu.Item>
<Menu.Item key="11">item 11</Menu.Item>
<Menu.Item key="12">item 12</Menu.Item>
</SubMenu>
</Menu>
</aside>
@ -43,18 +53,18 @@ ReactDOM.render(
<div className="layout-header"></div>
<div className="layout-container">
<Breadcrumb>
<Breadcrumb.Item>首页</Breadcrumb.Item>
<Breadcrumb.Item>应用列表</Breadcrumb.Item>
<Breadcrumb.Item>某应用</Breadcrumb.Item>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>App list</Breadcrumb.Item>
<Breadcrumb.Item>Any App</Breadcrumb.Item>
</Breadcrumb>
<div className="layout-content">
<div style={{ height: 590 }}>
内容区域
Contents
</div>
</div>
</div>
<div className="layout-footer">
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
Ant Design all rights reserved © 2015 Created by Ant UED
</div>
</div>
</div>

15
docs/spec/layout/demo/ceiling.md
View File

@ -1,12 +1,21 @@
---
order: 3
title: 吊顶规范
title:
zh-CN: 吊顶规范
en-US: Ceiling
---
## zh-CN
吊顶一般用于跨系统/应用场景，可以放置统一的登录/帮助信息。
吊顶背景深色，高度 `30px`，和浅色调的主导航配合使用。
## en-US
Generally, ceiling is used for cross system/application, you can put uniform login/help information in it.
Background color of a ceiling is a deep color, height is `30px`, generally to be used with a light color mainnav.
````__react
import { Menu, Breadcrumb } from 'antd';
import BrowserDemo from 'site/theme/template/BrowserDemo';
@ -19,9 +28,9 @@ ReactDOM.render(
<ul className="right">
<li>xxx@example.com</li>
<li>|</li>
<li>帮助中心</li>
<li>Help Center</li>
<li>|</li>
<li>客服/投诉电话：400-826-7710</li>
<li>Custom Service/Complaint Center phone：400-826-7710</li>
</ul>
</div>
</div>

62
docs/spec/layout/demo/top-aside.md
View File

@ -1,10 +1,18 @@
---
order: 1
title: 顶部导航 + 侧边栏
title:
zh-CN: 顶部导航 + 侧边栏
en-US: Top aside
---
## zh-CN
顶级导航在头部，次级导航在侧边栏。
## en-US
The top navigation is placed on the top, and the secondary navigation is placed on the aside.
````__react
import { Menu, Breadcrumb, Icon } from 'antd';
import BrowserDemo from 'site/theme/template/BrowserDemo';
@ -18,9 +26,9 @@ ReactDOM.render(
<div className="layout-logo"></div>
<Menu theme="dark" mode="horizontal"
defaultSelectedKeys={['2']} style={{lineHeight: '64px'}}>
<Menu.Item key="1">导航一</Menu.Item>
<Menu.Item key="2">导航二</Menu.Item>
<Menu.Item key="3">导航三</Menu.Item>
<Menu.Item key="1">Navigation 1</Menu.Item>
<Menu.Item key="2">Navigation 2</Menu.Item>
<Menu.Item key="3">Navigation 3</Menu.Item>
</Menu>
</div>
</div>
@ -28,49 +36,49 @@ ReactDOM.render(
<div className="layout-wrapper">
<Menu mode="horizontal"
defaultSelectedKeys={['1']} style={{marginLeft: 124}}>
<Menu.Item key="1">二级导航</Menu.Item>
<Menu.Item key="2">二级导航</Menu.Item>
<Menu.Item key="3">二级导航</Menu.Item>
<Menu.Item key="1">The second level navigation</Menu.Item>
<Menu.Item key="2">The second level navigation</Menu.Item>
<Menu.Item key="3">The second level navigation</Menu.Item>
</Menu>
</div>
</div>
<div className="layout-wrapper">
<Breadcrumb>
<Breadcrumb.Item>首页</Breadcrumb.Item>
<Breadcrumb.Item>应用列表</Breadcrumb.Item>
<Breadcrumb.Item>某应用</Breadcrumb.Item>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>App list</Breadcrumb.Item>
<Breadcrumb.Item>Any app</Breadcrumb.Item>
</Breadcrumb>
<div className="layout-container">
<aside className="layout-sider">
<Menu mode="inline" defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}>
<SubMenu key="sub1" title={<span><Icon type="user" />导航一</span>}>
<Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item>
<Menu.Item key="3">选项3</Menu.Item>
<Menu.Item key="4">选项4</Menu.Item>
<SubMenu key="sub1" title={<span><Icon type="user" />Navigation 1</span>}>
<Menu.Item key="1">item 1</Menu.Item>
<Menu.Item key="2">item 2</Menu.Item>
<Menu.Item key="3">item 3</Menu.Item>
<Menu.Item key="4">item 4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" title={<span><Icon type="laptop" />导航二</span>}>
<Menu.Item key="5">选项5</Menu.Item>
<Menu.Item key="6">选项6</Menu.Item>
<Menu.Item key="7">选项7</Menu.Item>
<Menu.Item key="8">选项8</Menu.Item>
<SubMenu key="sub2" title={<span><Icon type="laptop" />Navigation 2</span>}>
<Menu.Item key="5">item 5</Menu.Item>
<Menu.Item key="6">item 6</Menu.Item>
<Menu.Item key="7">item 7</Menu.Item>
<Menu.Item key="8">item 8</Menu.Item>
</SubMenu>
<SubMenu key="sub3" title={<span><Icon type="notification" />导航三</span>}>
<Menu.Item key="9">选项9</Menu.Item>
<Menu.Item key="10">选项10</Menu.Item>
<Menu.Item key="11">选项11</Menu.Item>
<Menu.Item key="12">选项12</Menu.Item>
<SubMenu key="sub3" title={<span><Icon type="notification" />Navigation 3</span>}>
<Menu.Item key="9">item 9</Menu.Item>
<Menu.Item key="10">item 10</Menu.Item>
<Menu.Item key="11">item 11</Menu.Item>
<Menu.Item key="12">item 12</Menu.Item>
</SubMenu>
</Menu>
</aside>
<div className="layout-content">
<div style={{ height: 240 }}>
<div style={{clear: 'both'}}>内容区域</div>
<div style={{clear: 'both'}}>Contents</div>
</div>
</div>
</div>
<div className="layout-footer">
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
Ant Design all rights reserved © 2015 Created by Ant UED
</div>
</div>
</div>

33
docs/spec/layout/demo/top.md
View File

@ -1,7 +1,10 @@
---
order: 0
title: 顶部导航
title:
zh-CN: 顶部导航
en-US: Top
---
## zh-CN
一二级导航都在顶部。
@ -9,6 +12,14 @@ title: 顶部导航
> `<BrowserDemo />` 做演示用，无须复制。
## en-US
The first and second level nav are both at the top.
A top-bottom structure of page layouts is used to top navigation. Generally, the mainnav is placed at the top of the page, and put log, the first level navigation, secondary menu(users, settings, notifications) from left to right in it. We always put contents in a fixed size navigation.( eg: `1200px`), the layout of the whole page is stable, it's not affected by viewing enviroment,; Top-bottom structure is conform to top-bottom viewing habit, it's a classical navigation pattern of websites. This pattern will bring demonstration efficiency up of the mian workarea, but it will also occupie some vertical spaces. And, because the horizontal space of the navigation is limited, this pattern is not suitable for the first level navigation which has too much information.
> `<BrowserDemo />` This is for demo, don't need to copy.
````__react
import { Menu, Breadcrumb } from 'antd';
import BrowserDemo from 'site/theme/template/BrowserDemo';
@ -21,9 +32,9 @@ ReactDOM.render(
<div className="layout-logo"></div>
<Menu theme="dark" mode="horizontal"
defaultSelectedKeys={['2']} style={{lineHeight: '64px'}}>
<Menu.Item key="1">导航一</Menu.Item>
<Menu.Item key="2">导航二</Menu.Item>
<Menu.Item key="3">导航三</Menu.Item>
<Menu.Item key="1">Navigation 1</Menu.Item>
<Menu.Item key="2">Navigation 2</Menu.Item>
<Menu.Item key="3">Navigation 3</Menu.Item>
</Menu>
</div>
</div>
@ -31,24 +42,24 @@ ReactDOM.render(
<div className="layout-wrapper">
<Menu mode="horizontal"
defaultSelectedKeys={['1']} style={{marginLeft: 124}}>
<Menu.Item key="1">二级导航</Menu.Item>
<Menu.Item key="2">二级导航</Menu.Item>
<Menu.Item key="3">二级导航</Menu.Item>
<Menu.Item key="1">The second level navigation</Menu.Item>
<Menu.Item key="2">The second level navigation</Menu.Item>
<Menu.Item key="3">The second level navigation</Menu.Item>
</Menu>
</div>
</div>
<div className="layout-wrapper">
<Breadcrumb>
<Breadcrumb.Item>首页</Breadcrumb.Item>
<Breadcrumb.Item>应用列表</Breadcrumb.Item>
<Breadcrumb.Item>某应用</Breadcrumb.Item>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>App list</Breadcrumb.Item>
<Breadcrumb.Item>Any app</Breadcrumb.Item>
</Breadcrumb>
<div className="layout-container">
<div style={{ height: 210 }}></div>
</div>
</div>
<div className="layout-footer">
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
Ant Design all rights reserved © 2015 Created by Ant UED
</div>
</div>
</BrowserDemo>

50
docs/spec/layout/index.en-US.md
View File

@ -0,0 +1,50 @@
---
template: component
category: Design Fundamental
order: 4
cols: 1
title: Layout
---
Layout and Navigation is the backbone of productions, it is one of the most important design pattern of a page,
and it is also a base when you create a page, it will establish a interactive and visual style for a production.
The Layout and Navigation design specification for Ant Design are as follows:
### The specification of size
The first level of the navigation is placed near by a logo inclined left, and the secondary menu is placed inclined right.
- Top Navigation (almost systems): the height of the first level navigation `64px`, the second level of navigation `48px`。
- Top Navigation(contents page): the height of the first level navigation `80px`,the second level of navigation `56px`。
- Calculation formula of a top navigation:`48+8n`.
- Calculation formula a aside navigation:`200+8n`.
### The principle of interaction
- The first level navigation and the last level navigation should be distincted by visualization;
- The current item should have the highest priority of visualization;
- When the current navigation item is collapsed, the stlye of the current navigation item will be applied to the parent level of it;
- The left side navigation bar support for both the according and the expanding style, you can choose the one of it case by case.
### The principle of visualization
Style of a navigation should conform to the level of it.
- **Emphasis by colorblock**
When background color is a deep color, you can use this pattern for the parent level navigation item of current page.
- **The highlight match stick**
When background color is a light color, you can use this pattern for the current page navigation item, we recommed to use it for the last item of the navigation path.
- **Hightlighted font**
From the visualization aspect, hightlighted font is stronger than colorblock, this pattern is often used for the parent level of the current item.
- **Enlarge the size of the font**
`12px`、`14px` is a standard font size of navigations，14 is used for the first and the second level of the navigation. You can choose a approprigate font size in terms of the level of your navigation.
In almost middle-back systems, Ant Design uses two general layouts of top navigation and aside navition, we collect some basic layouts of middle-back systems are designed by Ant Design as follows:

8
docs/spec/layout/index.md → docs/spec/layout/index.zh-CN.md
View File

@ -1,13 +1,9 @@
---
template: component
category:
zh-CN: 设计基础
en-US: Design Fundamental
category: 设计基础
order: 4
cols: 1
title:
zh-CN: 常用布局
en-US: Layout
title: 常用布局
---
布局和导航是产品的骨架，是页面的重要构成模式之一，是作为后续展开页面设计的基础，可以为产品奠定交互和视觉风格。
Write Preview
Loading…
Cancel
Save