ant-design-vue/components/layout/demo/index.vue

172 lines
6.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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 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 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.
## 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 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.
- **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\`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.
## 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\`.
- \`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\`.
> 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': '/ant-design/iframe/layout/#fixed-sider',
'fixed-header': '/ant-design/iframe/layout/#fixed-header',
'sider': '/ant-design/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>