diff --git a/components/index.js b/components/index.js
index a69da8c32..d39c17f90 100644
--- a/components/index.js
+++ b/components/index.js
@@ -58,7 +58,7 @@ import { default as Input } from './input'
import { default as InputNumber } from './input-number'
-// import { default as Layout } from './layout'
+import { default as Layout } from './layout'
// import { default as List } from './list'
@@ -154,6 +154,11 @@ const components = [
Input.Search,
Input.TextArea,
InputNumber,
+ Layout,
+ Layout.Header,
+ Layout.Footer,
+ Layout.Sider,
+ Layout.Content,
LocaleProvider,
Menu,
Menu.Item,
@@ -235,6 +240,7 @@ export {
Icon,
Input,
InputNumber,
+ Layout,
LocaleProvider,
Menu,
Modal,
diff --git a/components/layout/Sider.jsx b/components/layout/Sider.jsx
new file mode 100644
index 000000000..f422f40a8
--- /dev/null
+++ b/components/layout/Sider.jsx
@@ -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' ? (
+
+
+
+ ) : null
+ const iconObj = {
+ 'expanded': reverseArrow ? : ,
+ 'collapsed': reverseArrow ? : ,
+ }
+ const status = this.sCollapsed ? 'collapsed' : 'expanded'
+ const defaultTrigger = iconObj[status]
+ const triggerDom = (
+ trigger !== null
+ ? zeroWidthTrigger || (
+
+ {trigger || defaultTrigger}
+
+ ) : 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 (
+
+
{this.$slots.default}
+ {collapsible || (this.below && zeroWidthTrigger) ? triggerDom : null}
+
+
+ Header
+ Content
+ Footer
+
+
+
+ Header
+
+ Sider
+ Content
+
+ Footer
+
+
+
+ Header
+
+ Content
+ Sider
+
+ Footer
+
+
+
+ Sider
+
+ Header
+ Content
+ Footer
+
+
+
{$slots.default}
+ )
+ },
+}
+
+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 (
+ {$slots.default}
+ )
+ },
+}
+
+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
diff --git a/components/layout/style/index.js b/components/layout/style/index.js
new file mode 100644
index 000000000..cf31ed80f
--- /dev/null
+++ b/components/layout/style/index.js
@@ -0,0 +1,2 @@
+import '../../style/index.less'
+import './index.less'
diff --git a/components/layout/style/index.less b/components/layout/style/index.less
new file mode 100644
index 000000000..4ad899d78
--- /dev/null
+++ b/components/layout/style/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%);
+ }
+ }
+ }
+ }
+}
diff --git a/components/menu/index.jsx b/components/menu/index.jsx
index 6b2c134f2..ac7471036 100644
--- a/components/menu/index.jsx
+++ b/components/menu/index.jsx
@@ -38,20 +38,19 @@ export default {
ItemGroup: { ...ItemGroup, name: 'AMenuItemGroup' },
provide () {
return {
- inlineCollapsed: this.getInlineCollapsed(),
getInlineCollapsed: this.getInlineCollapsed,
}
},
mixins: [BaseMixin],
inject: {
- layoutContext: { default: {}},
+ layoutSiderContext: { default: {}},
},
model: {
prop: 'selectedKeys',
event: 'selectChange',
},
mounted () {
- this.preProps = { ...this.props }
+ this.preProps = { ...this.$props }
},
watch: {
'$props': {
@@ -80,7 +79,7 @@ export default {
},
deep: true,
},
- 'layoutContext.siderCollapsed': function (val) {
+ 'layoutSiderContext.sCollapsed': function (val) {
const { openKeys, sOpenKeys, prefixCls } = this
if (hasProp(this, 'openKeys')) {
this.setState({ sOpenKeys: openKeys })
@@ -150,8 +149,8 @@ export default {
},
getInlineCollapsed () {
const { inlineCollapsed } = this.$props
- if (this.layoutContext.siderCollapsed !== undefined) {
- return this.layoutContext.siderCollapsed
+ if (this.layoutSiderContext.sCollapsed !== undefined) {
+ return this.layoutSiderContext.sCollapsed
}
return inlineCollapsed
},
@@ -199,12 +198,8 @@ export default {
},
},
render () {
- const { layoutContext, $slots, $listeners } = this
- const { collapsedWidth, siderCollapsed } = layoutContext
- this.preLayoutContext = {
- siderCollapsed,
- collapsedWidth,
- }
+ const { layoutSiderContext, $slots, $listeners } = this
+ const { collapsedWidth } = layoutSiderContext
const { prefixCls, theme } = this.$props
const menuMode = this.getRealMenuMode()
const menuOpenAnimation = this.getMenuOpenAnimation(menuMode)
diff --git a/components/style.js b/components/style.js
index 02468dccd..e900685b8 100644
--- a/components/style.js
+++ b/components/style.js
@@ -42,3 +42,4 @@ import './input-number/style'
import './transfer/style'
import './tree/style'
import './upload/style'
+import './layout/style'
diff --git a/site/components.js b/site/components.js
index 8ecc6330e..4b20bfb63 100644
--- a/site/components.js
+++ b/site/components.js
@@ -23,7 +23,7 @@ import {
Icon,
Input,
InputNumber,
- // Layout,
+ Layout,
// List,
LocaleProvider,
message,
@@ -92,7 +92,11 @@ Vue.component(Input.Group.name, Input.Group)
Vue.component(Input.Search.name, Input.Search)
Vue.component(Input.TextArea.name, Input.TextArea)
Vue.component(InputNumber.name, InputNumber)
-// Vue.component(Layout.name, Layout)
+Vue.component(Layout.name, Layout)
+Vue.component(Layout.Header.name, Layout.Header)
+Vue.component(Layout.Footer.name, Layout.Footer)
+Vue.component(Layout.Sider.name, Layout.Sider)
+Vue.component(Layout.Content.name, Layout.Content)
// Vue.component(List.name, List)
Vue.component(LocaleProvider.name, LocaleProvider)
Vue.component(Menu.name, Menu)
diff --git a/site/routes.js b/site/routes.js
index 2b214efe2..e75bd2c35 100644
--- a/site/routes.js
+++ b/site/routes.js
@@ -3,7 +3,7 @@ import Layout from './components/layout.vue'
const AsyncTestComp = () => {
const d = window.location.hash.replace('#', '')
return {
- component: import(`../components/vc-upload/demo/${d}`),
+ component: import(`../components/layout/demo/${d}`),
}
}