tangjinzhou
7 years ago
14 changed files with 861 additions and 16 deletions
@ -0,0 +1,239 @@
|
||||
// matchMedia polyfill for |
||||
// https://github.com/WickyNilliams/enquire.js/issues/82 |
||||
if (typeof window !== 'undefined') { |
||||
const matchMediaPolyfill = (mediaQuery) => { |
||||
return { |
||||
media: mediaQuery, |
||||
matches: false, |
||||
addListener () { |
||||
}, |
||||
removeListener () { |
||||
}, |
||||
} |
||||
} |
||||
window.matchMedia = window.matchMedia || matchMediaPolyfill |
||||
} |
||||
|
||||
import classNames from 'classnames' |
||||
import PropTypes from '../_util/vue-types' |
||||
import Icon from '../icon' |
||||
import { initDefaultProps, getOptionProps, hasProp, getComponentFromProp } from '../_util/props-util' |
||||
import BaseMixin from '../_util/BaseMixin' |
||||
|
||||
const dimensionMap = { |
||||
xs: '480px', |
||||
sm: '576px', |
||||
md: '768px', |
||||
lg: '992px', |
||||
xl: '1200px', |
||||
xxl: '1600px', |
||||
} |
||||
|
||||
// export type CollapseType = 'clickTrigger' | 'responsive'; |
||||
|
||||
export const SiderProps = { |
||||
prefixCls: PropTypes.string, |
||||
collapsible: PropTypes.bool, |
||||
collapsed: PropTypes.bool, |
||||
defaultCollapsed: PropTypes.bool, |
||||
reverseArrow: PropTypes.bool, |
||||
// onCollapse?: (collapsed: boolean, type: CollapseType) => void; |
||||
trigger: PropTypes.any, |
||||
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), |
||||
collapsedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), |
||||
breakpoint: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'xxl']), |
||||
} |
||||
|
||||
// export interface SiderState { |
||||
// collapsed?: boolean; |
||||
// below: boolean; |
||||
// belowShow?: boolean; |
||||
// } |
||||
|
||||
// export interface SiderContext { |
||||
// siderCollapsed: boolean; |
||||
// } |
||||
|
||||
const generateId = (() => { |
||||
let i = 0 |
||||
return (prefix = '') => { |
||||
i += 1 |
||||
return `${prefix}${i}` |
||||
} |
||||
})() |
||||
|
||||
export default { |
||||
name: 'ALayoutSider', |
||||
__ANT_LAYOUT_SIDER: true, |
||||
mixins: [BaseMixin], |
||||
props: initDefaultProps(SiderProps, { |
||||
prefixCls: 'ant-layout-sider', |
||||
collapsible: false, |
||||
defaultCollapsed: false, |
||||
reverseArrow: false, |
||||
width: 200, |
||||
collapsedWidth: 80, |
||||
}), |
||||
|
||||
// static childContextTypes = { |
||||
// siderCollapsed: PropTypes.bool, |
||||
// collapsedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), |
||||
// }; |
||||
|
||||
// static contextTypes = { |
||||
// siderHook: PropTypes.object, |
||||
// }; |
||||
|
||||
// private mql: MediaQueryList; |
||||
// private uniqueId: string; |
||||
|
||||
data () { |
||||
this.uniqueId = generateId('ant-sider-') |
||||
let matchMedia |
||||
if (typeof window !== 'undefined') { |
||||
matchMedia = window.matchMedia |
||||
} |
||||
const props = getOptionProps(this) |
||||
if (matchMedia && props.breakpoint && props.breakpoint in dimensionMap) { |
||||
this.mql = matchMedia(`(max-width: ${dimensionMap[props.breakpoint]})`) |
||||
} |
||||
let sCollapsed |
||||
if ('collapsed' in props) { |
||||
sCollapsed = props.collapsed |
||||
} else { |
||||
sCollapsed = props.defaultCollapsed |
||||
} |
||||
return { |
||||
sCollapsed, |
||||
below: false, |
||||
belowShow: false, |
||||
} |
||||
}, |
||||
provide () { |
||||
return { |
||||
layoutSiderContext: this, // menu组件中使用 |
||||
} |
||||
}, |
||||
inject: { |
||||
siderHook: { default: {}}, |
||||
}, |
||||
// getChildContext() { |
||||
// return { |
||||
// siderCollapsed: this.state.collapsed, |
||||
// collapsedWidth: this.props.collapsedWidth, |
||||
// }; |
||||
// } |
||||
watch: { |
||||
collapsed (val) { |
||||
this.setState({ |
||||
sCollapsed: val, |
||||
}) |
||||
}, |
||||
}, |
||||
|
||||
mounted () { |
||||
this.$nextTick(() => { |
||||
if (this.mql) { |
||||
this.mql.addListener(this.responsiveHandler) |
||||
this.responsiveHandler(this.mql) |
||||
} |
||||
|
||||
if (this.siderHook.addSider) { |
||||
this.siderHook.addSider(this.uniqueId) |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
beforeDestroy () { |
||||
if (this.mql) { |
||||
this.mql.removeListener(this.responsiveHandler) |
||||
} |
||||
|
||||
if (this.siderHook.removeSider) { |
||||
this.siderHook.removeSider(this.uniqueId) |
||||
} |
||||
}, |
||||
model: { |
||||
prop: 'collapsed', |
||||
event: 'collapse', |
||||
}, |
||||
methods: { |
||||
responsiveHandler (mql) { |
||||
this.setState({ below: mql.matches }) |
||||
if (this.sCollapsed !== mql.matches) { |
||||
this.setCollapsed(mql.matches, 'responsive') |
||||
} |
||||
}, |
||||
|
||||
setCollapsed (collapsed, type) { |
||||
if (!hasProp(this, 'collapsed')) { |
||||
this.setState({ |
||||
sCollapsed: collapsed, |
||||
}) |
||||
} |
||||
this.$emit('collapse', collapsed, type) |
||||
}, |
||||
|
||||
toggle () { |
||||
const collapsed = !this.sCollapsed |
||||
this.setCollapsed(collapsed, 'clickTrigger') |
||||
}, |
||||
|
||||
belowShowChange () { |
||||
this.setState({ belowShow: !this.belowShow }) |
||||
}, |
||||
}, |
||||
|
||||
render () { |
||||
const { prefixCls, |
||||
collapsible, reverseArrow, width, collapsedWidth, |
||||
} = getOptionProps(this) |
||||
const trigger = getComponentFromProp(this, 'trigger') |
||||
let siderWidth = this.sCollapsed ? collapsedWidth : width |
||||
siderWidth = typeof siderWidth === 'string' ? siderWidth.replace('px', '') : siderWidth |
||||
// special trigger when collapsedWidth == 0 |
||||
const zeroWidthTrigger = collapsedWidth === 0 || collapsedWidth === '0' || collapsedWidth === '0px' ? ( |
||||
<span onClick={this.toggle} class={`${prefixCls}-zero-width-trigger`}> |
||||
<Icon type='bars' /> |
||||
</span> |
||||
) : null |
||||
const iconObj = { |
||||
'expanded': reverseArrow ? <Icon type='right' /> : <Icon type='left' />, |
||||
'collapsed': reverseArrow ? <Icon type='left' /> : <Icon type='right' />, |
||||
} |
||||
const status = this.sCollapsed ? 'collapsed' : 'expanded' |
||||
const defaultTrigger = iconObj[status] |
||||
const triggerDom = ( |
||||
trigger !== null |
||||
? zeroWidthTrigger || ( |
||||
<div className={`${prefixCls}-trigger`} onClick={this.toggle} style={{ width: `${siderWidth}px` }}> |
||||
{trigger || defaultTrigger} |
||||
</div> |
||||
) : null |
||||
) |
||||
const divStyle = { |
||||
// ...style, |
||||
flex: `0 0 ${siderWidth}px`, |
||||
maxWidth: `${siderWidth}px`, // Fix width transition bug in IE11 |
||||
minWidth: `${siderWidth}px`, // https://github.com/ant-design/ant-design/issues/6349 |
||||
width: `${siderWidth}px`, |
||||
} |
||||
const siderCls = classNames(prefixCls, { |
||||
[`${prefixCls}-collapsed`]: !!this.sCollapsed, |
||||
[`${prefixCls}-has-trigger`]: collapsible && trigger !== null && !zeroWidthTrigger, |
||||
[`${prefixCls}-below`]: !!this.below, |
||||
[`${prefixCls}-zero-width`]: siderWidth === 0 || siderWidth === '0' || siderWidth === '0px', |
||||
}) |
||||
const divProps = { |
||||
on: this.$listeners, |
||||
class: siderCls, |
||||
style: divStyle, |
||||
} |
||||
return ( |
||||
<div {...divProps}> |
||||
<div class={`${prefixCls}-children`}>{this.$slots.default}</div> |
||||
{collapsible || (this.below && zeroWidthTrigger) ? triggerDom : null} |
||||
</div> |
||||
) |
||||
}, |
||||
} |
||||
@ -0,0 +1,79 @@
|
||||
<cn> |
||||
#### 基本结构 |
||||
典型的页面布局。 |
||||
</cn> |
||||
|
||||
<us> |
||||
#### Basic Structure |
||||
Classic page layouts. |
||||
</us> |
||||
|
||||
```html |
||||
<template> |
||||
<div id="components-layout-demo-basic"> |
||||
<a-layout> |
||||
<a-layout-header>Header</a-layout-header> |
||||
<a-layout-content>Content</a-layout-content> |
||||
<a-layout-footer>Footer</a-layout-footer> |
||||
</a-layout> |
||||
|
||||
<a-layout> |
||||
<a-layout-header>Header</a-layout-header> |
||||
<a-layout> |
||||
<a-layout-sider>Sider</a-layout-sider> |
||||
<a-layout-content>Content</a-layout-content> |
||||
</a-layout> |
||||
<a-layout-footer>Footer</a-layout-footer> |
||||
</a-layout> |
||||
|
||||
<a-layout> |
||||
<a-layout-header>Header</a-layout-header> |
||||
<a-layout> |
||||
<a-layout-content>Content</a-layout-content> |
||||
<a-layout-sider>Sider</a-layout-sider> |
||||
</a-layout> |
||||
<a-layout-footer>Footer</a-layout-footer> |
||||
</a-layout> |
||||
|
||||
<a-layout> |
||||
<a-layout-sider>Sider</a-layout-sider> |
||||
<a-layout> |
||||
<a-layout-header>Header</a-layout-header> |
||||
<a-layout-content>Content</a-layout-content> |
||||
<a-layout-footer>Footer</a-layout-footer> |
||||
</a-layout> |
||||
</a-layout> |
||||
</div> |
||||
</template> |
||||
|
||||
<style> |
||||
#components-layout-demo-basic { |
||||
text-align: center; |
||||
} |
||||
#components-layout-demo-basic .ant-layout-header, |
||||
#components-layout-demo-basic .ant-layout-footer { |
||||
background: #7dbcea; |
||||
color: #fff; |
||||
} |
||||
#components-layout-demo-basic .ant-layout-footer { |
||||
line-height: 1.5; |
||||
} |
||||
#components-layout-demo-basic .ant-layout-sider { |
||||
background: #3ba0e9; |
||||
color: #fff; |
||||
line-height: 120px; |
||||
} |
||||
#components-layout-demo-basic .ant-layout-content { |
||||
background: rgba(16, 142, 233, 1); |
||||
color: #fff; |
||||
min-height: 120px; |
||||
line-height: 120px; |
||||
} |
||||
#components-layout-demo-basic > .ant-layout { |
||||
margin-bottom: 48px; |
||||
} |
||||
#components-layout-demo-basic > .ant-layout:last-child { |
||||
margin: 0; |
||||
} |
||||
</style> |
||||
``` |
||||
@ -0,0 +1,77 @@
|
||||
<cn> |
||||
#### 自定义触发器 |
||||
要使用自定义触发器，可以设置 `:trigger="null"` 来隐藏默认设定。 |
||||
</cn> |
||||
|
||||
<us> |
||||
#### Custom trigger |
||||
If you want to use a customized trigger, you can hide the default one by setting `:trigger="null"`. |
||||
</us> |
||||
|
||||
```html |
||||
<template> |
||||
<a-layout id="components-layout-demo-custom-trigger"> |
||||
<a-layout-sider |
||||
:trigger="null" |
||||
collapsible |
||||
v-model="collapsed" |
||||
> |
||||
<div class="logo" /> |
||||
<a-menu theme="dark" mode="inline" defaultSelectedKeys={['1']}> |
||||
<a-menu-item key="1"> |
||||
<a-icon type="user" /> |
||||
<span>nav 1</span> |
||||
</a-menu-item> |
||||
<a-menu-item key="2"> |
||||
<a-icon type="video-camera" /> |
||||
<span>nav 2</span> |
||||
</a-menu-item> |
||||
<a-menu-item key="3"> |
||||
<a-icon type="upload" /> |
||||
<span>nav 3</span> |
||||
</a-menu-item> |
||||
</a-menu> |
||||
</a-layout-sider> |
||||
<a-layout> |
||||
<a-header style="background: #fff; padding: 0"> |
||||
<a-icon |
||||
class="trigger" |
||||
:type="collapsed ? 'menu-unfold' : 'menu-fold'" |
||||
@click="()=> collapsed = !collapsed" |
||||
/> |
||||
</a-header> |
||||
<a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"> |
||||
Content |
||||
</a-layout-content> |
||||
</a-layout> |
||||
</a-layout> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
data(){ |
||||
return { |
||||
collapsed: false, |
||||
} |
||||
}, |
||||
} |
||||
</script> |
||||
<style> |
||||
#components-layout-demo-custom-trigger .trigger { |
||||
font-size: 18px; |
||||
line-height: 64px; |
||||
padding: 0 24px; |
||||
cursor: pointer; |
||||
transition: color .3s; |
||||
} |
||||
|
||||
#components-layout-demo-custom-trigger .trigger:hover { |
||||
color: #1890ff; |
||||
} |
||||
|
||||
#components-layout-demo-custom-trigger .logo { |
||||
height: 32px; |
||||
background: rgba(255,255,255,.2); |
||||
margin: 16px; |
||||
} |
||||
</style> |
||||
``` |
||||
@ -0,0 +1,113 @@
|
||||
--- |
||||
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 |
||||
|
||||
```jsx |
||||
<Layout> |
||||
<Header>header</Header> |
||||
<Layout> |
||||
<Sider>left sidebar</Sider> |
||||
<Content>main content</Content> |
||||
<Sider>right sidebar</Sider> |
||||
</Layout> |
||||
<Footer>footer</Footer> |
||||
</Layout> |
||||
``` |
||||
|
||||
### Layout |
||||
|
||||
The wrapper. |
||||
|
||||
| Property | Description | Type | Default | |
||||
| -------- | ----------- | ---- | ------- | |
||||
| className | container className | string | - | |
||||
| style | to customize the styles | object | - | |
||||
| 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`. |
||||
|
||||
### Layout.Sider |
||||
|
||||
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 | - | |
||||
| 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 | - | |
||||
| 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) => {} | - | |
||||
|
||||
#### breakpoint width |
||||
|
||||
```js |
||||
{ |
||||
xs: '480px', |
||||
sm: '576px', |
||||
md: '768px', |
||||
lg: '992px', |
||||
xl: '1200px', |
||||
xxl: '1600px', |
||||
} |
||||
``` |
||||
@ -0,0 +1,5 @@
|
||||
import Layout from './layout' |
||||
import Sider from './Sider' |
||||
|
||||
Layout.Sider = Sider |
||||
export default Layout |
||||
@ -0,0 +1,114 @@
|
||||
--- |
||||
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 |
||||
|
||||
```jsx |
||||
<Layout> |
||||
<Header>header</Header> |
||||
<Layout> |
||||
<Sider>left sidebar</Sider> |
||||
<Content>main content</Content> |
||||
<Sider>right sidebar</Sider> |
||||
</Layout> |
||||
<Footer>footer</Footer> |
||||
</Layout> |
||||
``` |
||||
|
||||
### Layout |
||||
|
||||
布局容器。 |
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| --- | --- | --- | --- | |
||||
| class | 容器 class | string | - | |
||||
| style | 指定样式 | object | - | |
||||
| hasSider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - | |
||||
|
||||
> `Layout.Header` `Layout.Footer` `Layout.Content` API 与 `Layout` 相同 |
||||
|
||||
### Layout.Sider |
||||
|
||||
侧边栏。 |
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| --- | --- | --- | --- | |
||||
| breakpoint | 触发响应式布局的[断点](/components/grid#api) | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - | |
||||
| class | 容器 class | string | - | |
||||
| collapsed | 当前收起状态 | boolean | - | |
||||
| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 64 | |
||||
| collapsible | 是否可收起 | boolean | false | |
||||
| defaultCollapsed | 是否默认收起 | boolean | false | |
||||
| reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false | |
||||
| style | 指定样式 | object | - | |
||||
| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string\|slot | - | |
||||
| width | 宽度 | number\|string | 200 | |
||||
| onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - | |
||||
|
||||
#### breakpoint width |
||||
|
||||
```js |
||||
{ |
||||
xs: '480px', |
||||
sm: '576px', |
||||
md: '768px', |
||||
lg: '992px', |
||||
xl: '1200px', |
||||
xxl: '1600px', |
||||
} |
||||
``` |
||||
@ -0,0 +1,98 @@
|
||||
import PropTypes from '../_util/vue-types' |
||||
import classNames from 'classnames' |
||||
import { getOptionProps } from '../_util/props-util' |
||||
|
||||
export const BasicProps = { |
||||
prefixCls: PropTypes.string, |
||||
hasSider: PropTypes.boolean, |
||||
} |
||||
|
||||
function generator (props, name) { |
||||
return (BasicComponent) => { |
||||
return { |
||||
name, |
||||
props: BasicComponent.props, |
||||
render () { |
||||
const { prefixCls } = props |
||||
const basicComponentProps = { |
||||
props: { |
||||
prefixCls, |
||||
...getOptionProps(this), |
||||
}, |
||||
on: this.$listeners, |
||||
} |
||||
return <BasicComponent {...basicComponentProps}>{this.$slots.default}</BasicComponent> |
||||
}, |
||||
} |
||||
} |
||||
} |
||||
|
||||
const Basic = { |
||||
props: BasicProps, |
||||
render () { |
||||
const { prefixCls, $slots, $listeners } = this |
||||
const divProps = { |
||||
class: prefixCls, |
||||
on: $listeners, |
||||
} |
||||
return ( |
||||
<div {...divProps}>{$slots.default}</div> |
||||
) |
||||
}, |
||||
} |
||||
|
||||
const BasicLayout = { |
||||
props: BasicProps, |
||||
data () { |
||||
return { |
||||
siders: [], |
||||
} |
||||
}, |
||||
provide () { |
||||
return { |
||||
siderHook: { |
||||
addSider: (id) => { |
||||
this.siders = [...this.siders, id] |
||||
}, |
||||
removeSider: (id) => { |
||||
this.siders = this.siders.filter(currentId => currentId !== id) |
||||
}, |
||||
}, |
||||
} |
||||
}, |
||||
render () { |
||||
const { prefixCls, $slots, hasSider, $listeners } = this |
||||
const divCls = classNames(prefixCls, { |
||||
[`${prefixCls}-has-sider`]: hasSider || this.siders.length > 0, |
||||
}) |
||||
const divProps = { |
||||
class: divCls, |
||||
on: $listeners, |
||||
} |
||||
return ( |
||||
<div {...divProps}>{$slots.default}</div> |
||||
) |
||||
}, |
||||
} |
||||
|
||||
const Layout = generator({ |
||||
prefixCls: 'ant-layout', |
||||
}, 'ALayout')(BasicLayout) |
||||
|
||||
const Header = generator({ |
||||
prefixCls: 'ant-layout-header', |
||||
}, 'ALayoutHeader')(Basic) |
||||
|
||||
const Footer = generator({ |
||||
prefixCls: 'ant-layout-footer', |
||||
}, 'ALayoutFooter')(Basic) |
||||
|
||||
const Content = generator({ |
||||
prefixCls: 'ant-layout-content', |
||||
}, 'ALayoutContent')(Basic) |
||||
|
||||
Layout.Header = Header |
||||
Layout.Footer = Footer |
||||
Layout.Content = Content |
||||
|
||||
export default Layout |
||||
@ -0,0 +1,2 @@
|
||||
import '../../style/index.less' |
||||
import './index.less' |
||||
@ -0,0 +1,112 @@
|
||||
@import "../../style/themes/default"; |
||||
@import "../../style/mixins/index"; |
||||
|
||||
@layout-prefix-cls: ~"@{ant-prefix}-layout"; |
||||
|
||||
.@{layout-prefix-cls} { |
||||
display: flex; |
||||
flex-direction: column; |
||||
flex: auto; |
||||
background: @layout-body-background; |
||||
|
||||
&, |
||||
* { |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
&&-has-sider { |
||||
flex-direction: row; |
||||
> .@{layout-prefix-cls}, |
||||
> .@{layout-prefix-cls}-content { |
||||
overflow-x: hidden; |
||||
} |
||||
} |
||||
|
||||
&-header, |
||||
&-footer { |
||||
flex: 0 0 auto; |
||||
} |
||||
|
||||
&-header { |
||||
background: @layout-header-background; |
||||
padding: @layout-header-padding; |
||||
height: @layout-header-height; |
||||
line-height: @layout-header-height; |
||||
} |
||||
|
||||
&-footer { |
||||
background: @layout-footer-background; |
||||
padding: @layout-footer-padding; |
||||
color: @text-color; |
||||
font-size: @font-size-base; |
||||
} |
||||
|
||||
&-content { |
||||
flex: auto; |
||||
} |
||||
|
||||
&-sider { |
||||
transition: all .2s; |
||||
position: relative; |
||||
background: @layout-sider-background; |
||||
|
||||
/* fix firefox can't set width smaller than content on flex item */ |
||||
min-width: 0; |
||||
|
||||
&-children { |
||||
height: 100%; |
||||
// Hack for fixing margin collaspe bug |
||||
// https://github.com/ant-design/ant-design/issues/7967 |
||||
// solution from https://stackoverflow.com/a/33132624/3040605 |
||||
padding-top: 0.1px; |
||||
margin-top: -0.1px; |
||||
} |
||||
|
||||
&-has-trigger { |
||||
padding-bottom: @layout-trigger-height; |
||||
} |
||||
|
||||
&-right { |
||||
order: 1; |
||||
} |
||||
|
||||
&-trigger { |
||||
position: fixed; |
||||
text-align: center; |
||||
bottom: 0; |
||||
cursor: pointer; |
||||
height: @layout-trigger-height; |
||||
line-height: @layout-trigger-height; |
||||
color: @layout-trigger-color; |
||||
background: @layout-trigger-background; |
||||
z-index: 1; |
||||
transition: all .2s; |
||||
} |
||||
|
||||
&-zero-width { |
||||
& > * { |
||||
overflow: hidden; |
||||
} |
||||
|
||||
&-trigger { |
||||
position: absolute; |
||||
top: @layout-header-height; |
||||
right: -@layout-zero-trigger-width; |
||||
text-align: center; |
||||
width: @layout-zero-trigger-width; |
||||
height: @layout-zero-trigger-height; |
||||
line-height: @layout-zero-trigger-height; |
||||
background: @layout-sider-background; |
||||
color: @layout-trigger-color; |
||||
font-size: @layout-zero-trigger-width / 2; |
||||
border-radius: 0 @border-radius-base @border-radius-base 0; |
||||
cursor: pointer; |
||||
transition: background .3s ease; |
||||
|
||||
&:hover { |
||||
background: tint(@layout-sider-background, 10%); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue