@ -20,10 +20,10 @@ The first level navigation is inclined left near a logo, and the secondary menu
### Interaction rules
- The first level navigation and the last level navigation should be distincted by visualization;
- The first level navigation and the last level navigation should be distinguishable 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 its parent level;
- The left side navigation bar has support for both the accordion and expanding styles, you can choose the one that fits your case best.
- When the current navigation item is collapsed, the style of the current navigation item is applied to its parent level;
- The left side navigation bar has support for both the accordion and expanding styles; you can choose the one that fits your case the best.
## Visualization rules
@ -31,27 +31,27 @@ The first level navigation is inclined left near a logo, and the secondary menu
- **Emphasis by colorblock**
When background color is a deep color, you can use this pattern for the parent level navigation item of current page.
When background color is a deep color, you can use this pattern for the parent level navigation item of the 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 using it for the last item of the navigation path.
When background color is a light color, you can use this pattern for the current page navigation item; we recommend using it for the last item of the navigation path.
- **Hightlighted font**
- **Highlighted font**
From the visualization aspect, hightlighted font is stronger than colorblock, this pattern is often used for the parent level of the current item.
From the visualization aspect, a highlighted 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,`14px` is used for the first and the second level of the navigation. You can choose a appropriate font size in terms of the level of your navigation.
`12px`、`14px` is a standard font size of navigations,`14px` is used for the first and the second level of the navigation. You can choose an appropriate font size regarding the level of your navigation.
## Component Overview
- `Layout`: The layout wrapper, in which `Header``Sider``Content``Footer` or `Layout` itself can be nested, and can be placed in any parent container.
- `Header`: The top layout with default style, in which any element can be nested, and must be placed in `Layout`.
- `Header`: The top layout with the default style, in which any element can be nested, and must be placed in `Layout`.
- `Sider`: The sidebar with default style and basic functions, in which any element can be nested, and must be placed in `Layout`.
- `Content`: The content layout with default style, in which any element can be nested, and must be placed in `Layout`.
- `Footer`: The bottom layout with default style, in which any element can be nested, and must be placed in `Layout`.
- `Content`: The content layout with the default style, in which any element can be nested, and must be placed in `Layout`.
- `Footer`: The bottom layout with the default style, in which any element can be nested, and must be placed in `Layout`.
> Based on `flex layout`, please pay attention to the [compatibility](http://caniuse.com/#search=flex).