github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

add layout demo and doc

pull/165/head
tangjinzhou 2018-04-20 16:58:40 +08:00
parent 4adc7a8868
commit 8d43e4acc0
18 changed files with 763 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/layout/Sider.jsx
View File

@ -206,7 +206,7 @@ export default {
const triggerDom = (
trigger !== null
? zeroWidthTrigger || (
<div className={`${prefixCls}-trigger`} onClick={this.toggle} style={{ width: `${siderWidth}px` }}>
<div class={`${prefixCls}-trigger`} onClick={this.toggle} style={{ width: `${siderWidth}px` }}>
{trigger || defaultTrigger}
</div>
) : null

6
components/layout/demo/custom-trigger.md
View File

@ -17,7 +17,7 @@ If you want to use a customized trigger, you can hide the default one by setting
v-model="collapsed"
>
<div class="logo" />
<a-menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
<a-menu theme="dark" mode="inline" :defaultSelectedKeys="['1']">
<a-menu-item key="1">
<a-icon type="user" />
<span>nav 1</span>
@ -33,13 +33,13 @@ If you want to use a customized trigger, you can hide the default one by setting
</a-menu>
</a-layout-sider>
<a-layout>
<a-header style="background: #fff; padding: 0">
<a-layout-header style="background: #fff; padding: 0">
<a-icon
class="trigger"
:type="collapsed ? 'menu-unfold' : 'menu-fold'"
@click="()=> collapsed = !collapsed"
/>
</a-header>
</a-layout-header>
<a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
Content
</a-layout-content>

83
components/layout/demo/fixed-sider.md Normal file
View File

@ -0,0 +1,83 @@
<cn>
#### 固定侧边栏
当内容较长时，使用固定侧边栏可以提供更好的体验。
</cn>
<us>
#### Fixed Sider
When dealing with long content, a fixed sider can provide a better user experience.
</us>
```html
<template>
<a-layout id="components-layout-demo-fixed-sider">
<a-layout-sider :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
<div class="logo" />
<a-menu theme="dark" mode="inline" :defaultSelectedKeys="['4']">
<a-menu-item key="1">
<a-icon type="user" />
<span class="nav-text">nav 1</span>
</a-menu-item>
<a-menu-item key="2">
<a-icon type="video-camera" />
<span class="nav-text">nav 2</span>
</a-menu-item>
<a-menu-item key="3">
<a-icon type="upload" />
<span class="nav-text">nav 3</span>
</a-menu-item>
<a-menu-item key="4">
<a-icon type="bar-chart" />
<span class="nav-text">nav 4</span>
</a-menu-item>
<a-menu-item key="5">
<a-icon type="cloud-o" />
<span class="nav-text">nav 5</span>
</a-menu-item>
<a-menu-item key="6">
<a-icon type="appstore-o" />
<span class="nav-text">nav 6</span>
</a-menu-item>
<a-menu-item key="7">
<a-icon type="team" />
<span class="nav-text">nav 7</span>
</a-menu-item>
<a-menu-item key="8">
<a-icon type="shop" />
<span class="nav-text">nav 8</span>
</a-menu-item>
</a-menu>
</a-layout-sider>
<a-layout :style="{ marginLeft: '200px' }">
<a-layout-header :style="{ background: '#fff', padding: 0 }" />
<a-layout-content :style="{ margin: '24px 16px 0', overflow: 'initial' }">
<div :style="{ padding: '24px', background: '#fff', textAlign: 'center' }">
...
<br />
Really
<br />...<br />...<br />...<br />
long
<br />...<br />...<br />...<br />...<br />...<br />...
<br />...<br />...<br />...<br />...<br />...<br />...
<br />...<br />...<br />...<br />...<br />...<br />...
<br />...<br />...<br />...<br />...<br />...<br />...
<br />...<br />...<br />...<br />...<br />...<br />...
<br />...<br />...<br />...<br />...<br />...<br />...
<br />...<br />...<br />...<br />...<br />...<br />
content
</div>
</a-layout-content>
<a-layout-footer :style="{ textAlign: 'center' }">
Ant Design ©2016 Created by Ant UED
</a-layout-footer>
</a-layout>
</a-layout>
<template>
<style>
#components-layout-demo-fixed-sider .logo {
height: 32px;
background: rgba(255,255,255,.2);
margin: 16px;
}
</style>
```

49
components/layout/demo/fixed.md Normal file
View File

@ -0,0 +1,49 @@
<cn>
#### 固定头部
一般用于固定顶部导航，方便页面切换。
</cn>
<us>
#### Fixed Header
Fixed Header is generally used to fix the top navigation to facilitate page switching.
</us>
```html
<template>
<a-layout id="components-layout-demo-fixed">
<a-layout-header :style="{ position: 'fixed', width: '100%' }">
<div class="logo" />
<a-menu
theme="dark"
mode="horizontal"
:defaultSelectedKeys="['2']"
:style="{ lineHeight: '64px' }"
>
<a-menu-item key="1">nav 1</a-menu-item>
<a-menu-item key="2">nav 2</a-menu-item>
<a-menu-item key="3">nav 3</a-menu-item>
</Menu>
</a-layout-header>
<a-layout-content :style="{ padding: '0 50px', marginTop: '64px' }">
<a-breadcrumb :style="{ margin: '16px 0' }">
<a-breadcrumb-item>Home</a-breadcrumb-item>
<a-breadcrumb-item>List</a-breadcrumb-item>
<a-breadcrumb-item>App</a-breadcrumb-item>
</a-breadcrumb>
<div :style="{ background: '#fff', padding: '24px', minHeight: '380px' }">Content</div>
</a-layout-content>
<a-layout-footer :style="{ textAlign: 'center' }">
Ant Design ©2016 Created by Ant UED
</a-layout-footer>
</a-layout>
<template>
<style>
#components-layout-demo-fixed .logo {
width: 120px;
height: 31px;
background: rgba(255,255,255,.2);
margin: 16px 24px 16px 0;
float: left;
}
</style>
```

171
components/layout/demo/index.vue Normal file
View File

@ -0,0 +1,171 @@
<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>

71
components/layout/demo/responsive.md Normal file
View File

@ -0,0 +1,71 @@
<cn>
#### 响应式布局
Layout.Sider 支持响应式布局。
> 说明：配置 `breakpoint` 属性即生效，视窗宽度小于 `breakpoint` 时 Sider 缩小为 `collapsedWidth` 宽度，若将 `collapsedWidth` 设置为零，会出现特殊 trigger。
</cn>
<us>
#### Responsive
Layout.Sider supports responsive layout.
> Note: You can get a responsive layout by setting `breakpoint`, the Sider will collapse to the width of `collapsedWidth` when window width is below the `breakpoint`. And a special trigger will appear if the `collapsedWidth` is set to `0`.
</us>
```html
<template>
<a-layout id="components-layout-demo-responsive">
<a-layout-sider
breakpoint="lg"
collapsedWidth="0"
@collapse="onCollapse"
>
<div class="logo" />
<a-menu theme="dark" mode="inline" :defaultSelectedKeys="['4']">
<a-menu-item key="1">
<a-icon type="user" />
<span class="nav-text">nav 1</span>
</a-menu-item>
<a-menu-item key="2">
<a-icon type="video-camera" />
<span class="nav-text">nav 2</span>
</a-menu-item>
<a-menu-item key="3">
<a-icon type="upload" />
<span class="nav-text">nav 3</span>
</a-menu-item>
<a-menu-item key="4">
<a-icon type="user" />
<span class="nav-text">nav 4</span>
</a-menu-item>
</a-menu>
</a-layout-sider>
<a-layout>
<a-layout-header :style="{ background: '#fff', padding: 0 }" />
<a-layout-content :style="{ margin: '24px 16px 0' }">
<div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
content
</div>
</a-layout-content>
<a-layout-footer style="textAlign: center">
Ant Design ©2016 Created by Ant UED
</a-layout-footer>
</a-layout>
</a-layout>
</template>
<script>
export default {
methods: {
onCollapse(collapsed, type) {
console.log(collapsed, type);
}
}
}
</script>
<style>
#components-layout-demo-responsive .logo {
height: 32px;
background: rgba(255,255,255,.2);
margin: 16px;
}
</style>
```

86
components/layout/demo/side.md Normal file
View File

@ -0,0 +1,86 @@
<cn>
#### 侧边布局
侧边两列式布局。页面横向空间有限时，侧边导航可收起。
侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。
</cn>
<us>
#### Sider
Two-columns layout. The sider menu can be collapsed when horizontal space is limited.
Generally, the mainnav is placed on the left side of the page, and the secondary menu is placed on the top of the working area. Contents will adapt the layout to the viewing area to improve the horizontal space usage, while the layout of the whole page is not stable.
The level of the aisde navigation is scalable. The first, second, and third level navigations could be present more fluently and relevantly, and aside navigation can be fixed, allowing the user to quickly switch and spot the current position, improving the user experience. However, this navigation occupies some horizontal space of the contents
</us>
```html
<template>
<a-layout id="components-layout-demo-side" style="min-height: 100vh">
<a-layout-sider
collapsible
v-model="collapsed"
>
<div class="logo" />
<a-menu theme="dark" :defaultSelectedKeys="['1']" mode="inline">
<a-menu-item key="1">
<a-icon type="pie-chart" />
<span>Option 1</span>
</a-menu-item>
<a-menu-item key="2">
<a-icon type="desktop" />
<span>Option 2</span>
</a-menu-item>
<a-sub-menu
key="sub1"
>
<span slot="title"><a-icon type="user" /><span>User</span></span>
<a-menu-item key="3">Tom</a-menu-item>
<a-menu-item key="4">Bill</a-menu-item>
<a-menu-item key="5">Alex</a-menu-item>
</a-sub-menu>
<a-sub-menu
key="sub2"
>
<span slot="title"><a-icon type="team" /><span>Team</span></span>
<a-menu-item key="6">Team 1</a-menu-item>
<a-menu-item key="8">Team 2</a-menu-item>
</a-sub-menu>
<a-menu-item key="9">
<a-icon type="file" />
<span>File</span>
</a-menu-item>
</a-menu>
</a-layout-sider>
<a-layout>
<a-layout-header style="background: #fff; padding: 0" />
<a-layout-content style="margin: 0 16px">
<a-breadcrumb style="margin: 16px 0">
<a-breadcrumb-item>User</a-breadcrumb-item>
<a-breadcrumb-item>Bill</a-breadcrumb-item>
</a-breadcrumb>
<div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
Bill is a cat.
</div>
</a-layout-content>
<a-layout-footer style="text-align: center">
Ant Design ©2016 Created by Ant UED
</a-layout-footer>
</a-layout>
</a-layout>
</template>
<script>
export default {
data() {
return {
collapsed: false,
}
},
}
</script>
<style>
#components-layout-demo-side .logo {
height: 32px;
background: rgba(255,255,255,.2);
margin: 16px;
}
</style>
```

90
components/layout/demo/top-side-2.md Normal file
View File

@ -0,0 +1,90 @@
<cn>
#### 顶部-侧边布局-通栏
同样拥有顶部导航及侧边栏，区别是两边未留边距，多用于应用型的网站。
</cn>
<us>
#### Header Sider 2
Both the top navigation and the sidebar, commonly used in application site.
</us>
```html
<template>
<a-layout id="components-layout-demo-top-side-2">
<a-layout-header class="header">
<div class="logo" />
<a-menu
theme="dark"
mode="horizontal"
:defaultSelectedKeys="['2']"
:style="{ lineHeight: '64px' }"
>
<a-menu-item key="1">nav 1</a-menu-item>
<a-menu-item key="2">nav 2</a-menu-item>
<a-menu-item key="3">nav 3</a-menu-item>
</a-menu>
</a-layout-header>
<a-layout>
<a-layout-sider width="200" style="background: #fff">
<a-menu
mode="inline"
:defaultSelectedKeys="['1']"
:defaultOpenKeys="['sub1']"
:style="{ height: '100%', borderRight: 0 }"
>
<a-sub-menu key="sub1">
<span slot="title"><a-icon type="user" />subnav 1</span>
<a-menu-item key="1">option1</a-menu-item>
<a-menu-item key="2">option2</a-menu-item>
<a-menu-item key="3">option3</a-menu-item>
<a-menu-item key="4">option4</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<span slot="title"><a-icon type="laptop" />subnav 2</span>
<a-menu-item key="5">option5</a-menu-item>
<a-menu-item key="6">option6</a-menu-item>
<a-menu-item key="7">option7</a-menu-item>
<a-menu-item key="8">option8</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub3">
<span slot="title"><a-icon type="notification" />subnav 3</span>
<a-menu-item key="9">option9</a-menu-item>
<a-menu-item key="10">option10</a-menu-item>
<a-menu-item key="11">option11</a-menu-item>
<a-menu-item key="12">option12</a-menu-item>
</a-sub-menu>
</a-layout-menu>
</a-layout-sider>
<a-layout style="padding: 0 24px 24px">
<a-breadcrumb style="margin: 16px 0">
<a-breadcrumb-item>Home</a-breadcrumb-item>
<a-breadcrumb-item>List</a-breadcrumb-item>
<a-breadcrumb-item>App</a-breadcrumb-item>
</a-breadcrumb>
<a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
Content
</a-layout-content>
</a-layout>
</a-layout>
</a-layout>
</template>
<script>
export default {
data() {
return {
collapsed: false,
}
},
}
</script>
<style>
#components-layout-demo-top-side-2 .logo {
width: 120px;
height: 31px;
background: rgba(255,255,255,.2);
margin: 16px 28px 16px 0;
float: left;
}
</style>
```

84
components/layout/demo/top-side.md Normal file
View File

@ -0,0 +1,84 @@
<cn>
#### 顶部-侧边布局
拥有顶部导航及侧边栏的页面，多用于展示类网站。
</cn>
<us>
#### Header-Sider
Both the top navigation and the sidebar, commonly used in documentation site.
</us>
```html
<template>
<a-layout id="components-layout-demo-top-side">
<a-layout-header class="header">
<div class="logo" />
<a-menu
theme="dark"
mode="horizontal"
:defaultSelectedKeys="['2']"
:style="{ lineHeight: '64px' }"
>
<a-menu-item key="1">nav 1</a-menu-item>
<a-menu-item key="2">nav 2</a-menu-item>
<a-menu-item key="3">nav 3</a-menu-item>
</a-menu>
</a-layout-header>
<a-layout-content style="padding: 0 50px">
<a-breadcrumb style="margin: 16px 0">
<a-breadcrumb-item>Home</a-breadcrumb-item>
<a-breadcrumb-item>List</a-breadcrumb-item>
<a-breadcrumb-item>App</a-breadcrumb-item>
</a-breadcrumb>
<a-layout style="padding: 24px 0; background: #fff">
<a-layout-sider width="200" style="background: #fff">
<a-menu
mode="inline"
:defaultSelectedKeys="['1']"
:defaultOpenKeys="['sub1']"
style="height: 100%"
>
<a-sub-menu key="sub1">
<span slot="title"><a-icon type="user" />subnav 1</span>
<a-menu-item key="1">option1</a-menu-item>
<a-menu-item key="2">option2</a-menu-item>
<a-menu-item key="3">option3</a-menu-item>
<a-menu-item key="4">option4</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<span slot="title"><a-icon type="laptop" />subnav 2</span>
<a-menu-item key="5">option5</a-menu-item>
<a-menu-item key="6">option6</a-menu-item>
<a-menu-item key="7">option7</a-menu-item>
<a-menu-item key="8">option8</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub3">
<span slot="title"><a-icon type="notification" />subnav 3</span>
<a-menu-item key="9">option9</a-menu-item>
<a-menu-item key="10">option10</a-menu-item>
<a-menu-item key="11">option11</a-menu-item>
<a-menu-item key="12">option12</a-menu-item>
</a-sub-menu>
</a-menu>
</a-layout-sider>
<a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
Content
</a-layout-content>
</a-layout>
</a-layout-content>
<a-layout-footer style="text-align: center">
Ant Design ©2016 Created by Ant UED
</a-layout-footer>
</a-layout>
</template>
<style>
#components-layout-demo-top-side .logo {
width: 120px;
height: 31px;
background: rgba(255,255,255,.2);
margin: 16px 28px 16px 0;
float: left;
}
</style>
```

54
components/layout/demo/top.md Normal file
View File

@ -0,0 +1,54 @@
<cn>
#### 上中下布局
最基本的『上-中-下』布局。
一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。
</cn>
<us>
#### Header-Content-Footer
The most basic "header-content-footer" layout.
Generally, the mainnav is placed at the top of the page, and includes the logo, the first level navigation, and the 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 area.
Top-bottom structure is conform with the top-bottom viewing habit, it's a classical navigation pattern of websites. This pattern demonstrates efficiency in the main workarea, while using some vertical space. And because the horizontal space of the navigation is limited, this pattern is not suitable for cases when the first level navigation contains many elements or links
</us>
```html
<template>
<a-layout id="components-layout-demo-top" class="layout">
<a-layout-header>
<div class="logo" />
<a-menu
theme="dark"
mode="horizontal"
:defaultSelectedKeys="['2']"
:style="{ lineHeight: '64px' }"
>
<a-menu-item key="1">nav 1</a-menu-item>
<a-menu-item key="2">nav 2</a-menu-item>
<a-menu-item key="3">nav 3</a-menu-item>
</a-menu>
</a-layout-header>
<a-layout-content style="padding: 0 50px">
<a-breadcrumb style="margin: 16px 0">
<a-breadcrumb-item>Home</a-breadcrumb-item>
<a-breadcrumb-item>List</a-breadcrumb-item>
<a-breadcrumb-item>App</a-breadcrumb-item>
</a-breadcrumb>
<div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">Content</div>
</a-layout-content>
<a-layout-footer style="text-align: center">
Ant Design ©2016 Created by Ant UED
</a-layout-footer>
</a-layout>
</template>
<style>
#components-layout-demo-top .logo {
width: 120px;
height: 31px;
background: rgba(255,255,255,.2);
margin: 16px 24px 16px 0;
float: left;
}
</style>
```

72
components/layout/index.en-US.md
View File

@ -1,59 +1,3 @@
---
category: Components
type: Layout
cols: 1
title: 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).
## API
@ -75,8 +19,8 @@ The wrapper.
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| className | container className | string | - |
| style | to customize the styles | object | - |
| class | container className | string | - |
| style | to customize the styles | object\|string | - |
| hasSider | whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering | boolean | - |
> APIs of `Layout.Header` `Layout.Footer` `Layout.Content` are the same as that of `Layout`.
@ -88,16 +32,20 @@ The sidebar.
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| breakpoint | [breakpoints](/components/grid#api) of the responsive layout | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - |
| className | container className | string | - |
| collapsed | to set the current status | boolean | - |
| class | container className | string | - |
| collapsed(v-model) | to set the current status | boolean | - |
| collapsedWidth | width of the collapsed sidebar, by setting to `0` a special trigger will appear | number | 64 |
| collapsible | whether can be collapsed | boolean | false |
| defaultCollapsed | to set the initial status | boolean | false |
| reverseArrow | reverse direction of arrow, for a sider that expands from the right | boolean | false |
| style | to customize the styles | object | - |
| style | to customize the styles | object\|string | - |
| trigger | specify the customized trigger, set to null to hide the trigger | string\|ReactNode | - |
| width | width of the sidebar | number\|string | 200 |
| onCollapse | the callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - |
### Events
| Events Name | Description | Arguments |
| --- | --- | --- |
| collapse | the callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} |
#### breakpoint width

67
components/layout/index.zh-CN.md
View File

@ -1,60 +1,3 @@
---
category: Components
subtitle: 布局
type: Layout
cols: 1
title: Layout
---
协助进行页面级整体布局。
## 设计规则
### 尺寸
一级导航项偏左靠近 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)问题。
## API
@ -90,15 +33,19 @@ title: Layout
| --- | --- | --- | --- |
| breakpoint | 触发响应式布局的[断点](/components/grid#api) | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - |
| class | 容器 class | string | - |
| collapsed | 当前收起状态 | boolean | - |
| collapsed(v-model) | 当前收起状态 | boolean | - |
| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 64 |
| collapsible | 是否可收起 | boolean | false |
| defaultCollapsed | 是否默认收起 | boolean | false |
| reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false |
| style | 指定样式 | object | - |
| style | 指定样式 | object\|string | - |
| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string\|slot | - |
| width | 宽度 | number\|string | 200 |
| onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |
### 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| collapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} |
#### breakpoint width

2
components/menu/index.jsx
View File

@ -80,7 +80,7 @@ export default {
deep: true,
},
'layoutSiderContext.sCollapsed': function (val) {
const { openKeys, sOpenKeys, prefixCls } = this
const { openKeys, sOpenKeys = [], prefixCls } = this
if (hasProp(this, 'openKeys')) {
this.setState({ sOpenKeys: openKeys })
return

13
site/components/demoBox.vue
View File

@ -1,7 +1,14 @@
<template>
<section :class="['code-box', isOpen ? 'expand': '']" :id="id">
<section class="code-box-demo">
<slot name="component"></slot>
<template v-if="iframeDemo[iframeDemoKey]">
<div class="browser-mockup with-url">
<iframe :src="iframeDemo[iframeDemoKey]" height="360"/>
</div>
</template>
<template v-else>
<slot name="component"></slot>
</template>
</section>
<section class="code-box-meta markdown">
<slot v-if="isZhCN" name="description"></slot>
@ -36,9 +43,11 @@ export default {
name: 'demoBox',
props: {
jsfiddle: Object,
isIframe: Boolean,
},
inject: {
_store: { default: {}},
iframeDemo: { default: {}},
},
data () {
const { name = '' } = this.$route.params
@ -53,6 +62,7 @@ export default {
`not have usTitle`,
)
}
const iframeDemoKey = usTitle.split(' ').join('-').toLowerCase()
const id = ['components', name.replace(/-cn\/?$/, ''), 'demo', ...usTitle.split(' ')].join('-').toLowerCase()
if (this._store.store) {
@ -67,6 +77,7 @@ export default {
copyTooltipVisible: false,
sourceCode,
id,
iframeDemoKey,
}
},
methods: {

24
site/components/iframe.vue Normal file
View File

@ -0,0 +1,24 @@
<script>
import * as AllDemo from '../demo'
export default {
props: {
name: String,
},
render () {
const name = this.name
const titleMap = {}
for (const [title] of Object.entries(AllDemo)) {
const key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
titleMap[key] = title
}
const Demo = AllDemo[titleMap[name.replace(/-cn\/?$/, '')]]
const hash = this.$route.hash.replace('#', '')
return (
<div id='iframe-page'>
<Demo iframeName={hash} />
</div>
)
},
}
</script>

1
site/demo.js
View File

@ -43,3 +43,4 @@ export { default as inputNumber } from 'antd/input-number/demo/index.vue'
export { default as transfer } from 'antd/transfer/demo/index.vue'
export { default as upload } from 'antd/upload/demo/index.vue'
export { default as tree } from 'antd/tree/demo/index.vue'
export { default as layout } from 'antd/layout/demo/index.vue'

14
site/index.less
View File

@ -70,3 +70,17 @@
box-shadow: none;
}
}
#iframe-page {
.code-box {
border: none;
margin: 0;
}
.code-box > * {
display: none;
}
.code-box > .code-box-demo {
display: block;
padding: 0;
border: none;
}
}

2
site/routes.js
View File

@ -1,4 +1,5 @@
import Layout from './components/layout.vue'
import Iframe from './components/iframe.vue'
const AsyncTestComp = () => {
const d = window.location.hash.replace('#', '')
@ -9,6 +10,7 @@ const AsyncTestComp = () => {
export default [
{ path: '/ant-design/components/:name/', component: Layout, props: true },
{ path: '/ant-design/iframe/:name/', component: Iframe, props: true },
{
path: '/ant-design',
component: Layout,