mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 04:36:19 +08:00
Code Issues Actions 13 Packages Projects Releases Wiki Activity
cf4ad5ddb8
ant-design/docs/spec/layout/index.en-US.md
Gray Choi bde7d1c624 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
2017-01-23 11:08:46 +08:00

2.4 KiB
Raw Blame History

template category order cols title
component Design Fundamental 4 1 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: