172 lines
6.2 KiB
Vue
172 lines
6.2 KiB
Vue
<script>
|
||
import Basic from './basic';
|
||
import CustomTrigger from './custom-trigger';
|
||
import FixedSider from './fixed-sider';
|
||
import Fixed from './fixed';
|
||
import Responsive from './responsive';
|
||
import Side from './side';
|
||
import TopSide2 from './top-side-2';
|
||
import TopSide from './top-side';
|
||
import Top from './top';
|
||
|
||
import CN from '../index.zh-CN.md';
|
||
import US from '../index.en-US.md';
|
||
|
||
const md = {
|
||
cn: `# 布局
|
||
协助进行页面级整体布局。
|
||
|
||
## 设计规则
|
||
|
||
### 尺寸
|
||
|
||
一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。
|
||
|
||
- 顶部导航（大部分系统）：一级导航高度 \`64px\`，二级导航 \`48px\`。
|
||
- 顶部导航（展示类页面）：一级导航高度 \`80px\`，二级导航 \`56px\`。
|
||
- 顶部导航高度的范围计算公式为：\`48+8n\`。
|
||
- 侧边导航宽度的范围计算公式：\`200+8n\`。
|
||
|
||
### 交互
|
||
|
||
- 一级导航和末级的导航需要在可视化的层面被强调出来；
|
||
- 当前项应该在呈现上优先级最高；
|
||
- 当导航收起的时候，当前项的样式自动赋予给它的上一个层级；
|
||
- 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。
|
||
|
||
### 视觉
|
||
|
||
导航样式上需要根据信息层级合理的选择样式：
|
||
|
||
- **大色块强调**
|
||
|
||
建议用于底色为深色系时，当前页面父级的导航项。
|
||
|
||
- **高亮火柴棍**
|
||
|
||
当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。
|
||
|
||
- **字体高亮变色**
|
||
|
||
从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。
|
||
|
||
- **字体放大**
|
||
|
||
\`12px\`、\`14px\` 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。
|
||
|
||
## 组件概述
|
||
|
||
- \`Layout\`：布局容器，其下可嵌套 \`Header\` \`Sider\` \`Content\` \`Footer\` 或 \`Layout\` 本身，可以放在任何父容器中。
|
||
- \`Header\`：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 \`Layout\` 中。
|
||
- \`Sider\`：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 \`Layout\` 中。
|
||
- \`Content\`：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 \`Layout\` 中。
|
||
- \`Footer\`：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 \`Layout\` 中。
|
||
|
||
> 注意：采用 flex 布局实现，请注意[浏览器兼容性](http://caniuse.com/#search=flex)问题。
|
||
|
||
## 代码演示`,
|
||
us: `# Layout
|
||
Handling the overall layout of a page.
|
||
|
||
## Specification
|
||
|
||
### Size
|
||
|
||
The first level navigation is inclined left near a logo, and the secondary menu is inclined right.
|
||
|
||
- Top Navigation (almost systems): the height of the first level navigation \`64px\`, the second level navigation \`48px\`.
|
||
- Top Navigation(contents page): the height of the first level navigation \`80px\`, the second level navigation \`56px\`.
|
||
- Calculation formula of a top navigation: \`48+8n\`.
|
||
- Calculation formula of an aside navigation: \`200+8n\`.
|
||
|
||
### Interaction rules
|
||
|
||
- 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 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
|
||
|
||
Style of a navigation should conform to its level.
|
||
|
||
- **Emphasis by colorblock**
|
||
|
||
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 recommend using it for the last item of the navigation path.
|
||
|
||
- **Highlighted font**
|
||
|
||
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 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 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 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).
|
||
|
||
## Examples
|
||
`,
|
||
};
|
||
export default {
|
||
category: 'Components',
|
||
subtitle: '布局',
|
||
type: 'Layout',
|
||
cols: 1,
|
||
title: 'Layout',
|
||
props: {
|
||
iframeName: String,
|
||
},
|
||
provide () {
|
||
return {
|
||
iframeDemo: !this.iframeName ? {
|
||
'fixed-sider': '/iframe/layout/#fixed-sider',
|
||
'fixed-header': '/iframe/layout/#fixed-header',
|
||
'sider': '/iframe/layout/#sider',
|
||
} : {},
|
||
};
|
||
},
|
||
render () {
|
||
const iframeName = this.iframeName;
|
||
if (iframeName === 'fixed-sider') {
|
||
return <FixedSider/>;
|
||
} else if (iframeName === 'fixed-header') {
|
||
return <Fixed />;
|
||
} else if (iframeName === 'sider') {
|
||
return <Side />;
|
||
}
|
||
return (
|
||
<div>
|
||
<md cn={md.cn} us={md.us}/>
|
||
<Basic />
|
||
<CustomTrigger />
|
||
<TopSide2/>
|
||
<TopSide/>
|
||
<Top/>
|
||
<Responsive />
|
||
<FixedSider />
|
||
<Fixed />
|
||
<Side/>
|
||
<api>
|
||
<template slot='cn'>
|
||
<CN/>
|
||
</template>
|
||
<US/>
|
||
</api>
|
||
</div>
|
||
);
|
||
},
|
||
};
|
||
</script>
|