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

feat: update layout

pull/1845/head
tangjinzhou 2020-02-20 19:54:46 +08:00
parent 6b6bacc7a1
commit 45ff6701e6
7 changed files with 207 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/config.js
View File

@ -1,5 +1,5 @@
module.exports = { module.exports = {
dev: { dev: {
componentName: 'input-number', // dev components componentName: 'layout', // dev components
}, },
}; };

53
components/layout/Sider.jsx
View File

@ -1,3 +1,17 @@
import classNames from 'classnames';
import PropTypes from '../_util/vue-types';
import {
initDefaultProps,
getOptionProps,
hasProp,
getComponentFromProp,
getListeners,
} from '../_util/props-util';
import BaseMixin from '../_util/BaseMixin';
import isNumeric from '../_util/isNumeric';
import { ConfigConsumerProps } from '../config-provider';
import Icon from '../icon';
// matchMedia polyfill for // matchMedia polyfill for
// https://github.com/WickyNilliams/enquire.js/issues/82 // https://github.com/WickyNilliams/enquire.js/issues/82
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
@ -12,27 +26,13 @@ if (typeof window !== 'undefined') {
window.matchMedia = window.matchMedia || matchMediaPolyfill; window.matchMedia = window.matchMedia || matchMediaPolyfill;
} }
import classNames from 'classnames'; const dimensionMaxMap = {
import PropTypes from '../_util/vue-types'; xs: '479.98px',
import Icon from '../icon'; sm: '575.98px',
import { md: '767.98px',
initDefaultProps, lg: '991.98px',
getOptionProps, xl: '1199.98px',
hasProp, xxl: '1599.98px',
getComponentFromProp,
getListeners,
} from '../_util/props-util';
import BaseMixin from '../_util/BaseMixin';
import isNumeric from '../_util/isNumeric';
import { ConfigConsumerProps } from '../config-provider';
const dimensionMap = {
xs: '480px',
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
xxl: '1600px',
}; };
// export type CollapseType = 'clickTrigger' | 'responsive'; // export type CollapseType = 'clickTrigger' | 'responsive';
@ -44,6 +44,7 @@ export const SiderProps = {
defaultCollapsed: PropTypes.bool, defaultCollapsed: PropTypes.bool,
reverseArrow: PropTypes.bool, reverseArrow: PropTypes.bool,
// onCollapse?: (collapsed: boolean, type: CollapseType) => void; // onCollapse?: (collapsed: boolean, type: CollapseType) => void;
zeroWidthTriggerStyle: PropTypes.object,
trigger: PropTypes.any, trigger: PropTypes.any,
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
collapsedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), collapsedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@ -91,8 +92,8 @@ export default {
matchMedia = window.matchMedia; matchMedia = window.matchMedia;
} }
const props = getOptionProps(this); const props = getOptionProps(this);
if (matchMedia && props.breakpoint && props.breakpoint in dimensionMap) { if (matchMedia && props.breakpoint && props.breakpoint in dimensionMaxMap) {
this.mql = matchMedia(`(max-width: ${dimensionMap[props.breakpoint]})`); this.mql = matchMedia(`(max-width: ${dimensionMaxMap[props.breakpoint]})`);
} }
let sCollapsed; let sCollapsed;
if ('collapsed' in props) { if ('collapsed' in props) {
@ -187,6 +188,7 @@ export default {
reverseArrow, reverseArrow,
width, width,
collapsedWidth, collapsedWidth,
zeroWidthTriggerStyle,
} = getOptionProps(this); } = getOptionProps(this);
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('layout-sider', customizePrefixCls); const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
@ -203,6 +205,7 @@ export default {
class={`${prefixCls}-zero-width-trigger ${prefixCls}-zero-width-trigger-${ class={`${prefixCls}-zero-width-trigger ${prefixCls}-zero-width-trigger-${
reverseArrow ? 'right' : 'left' reverseArrow ? 'right' : 'left'
}`} }`}
style={zeroWidthTriggerStyle}
> >
<Icon type="bars" /> <Icon type="bars" />
</span> </span>
@ -240,10 +243,10 @@ export default {
style: divStyle, style: divStyle,
}; };
return ( return (
<div {...divProps}> <aside {...divProps}>
<div class={`${prefixCls}-children`}>{this.$slots.default}</div> <div class={`${prefixCls}-children`}>{this.$slots.default}</div>
{collapsible || (this.below && zeroWidthTrigger) ? triggerDom : null} {collapsible || (this.below && zeroWidthTrigger) ? triggerDom : null}
</div> </aside>
); );
}, },
}; };

234
components/layout/__tests__/__snapshots__/demo.test.js.snap
View File

@ -2,47 +2,47 @@
exports[`renders ./components/layout/demo/basic.md correctly 1`] = ` exports[`renders ./components/layout/demo/basic.md correctly 1`] = `
<div id="components-layout-demo-basic"> <div id="components-layout-demo-basic">
<div class="ant-layout"> <section class="ant-layout">
<div class="ant-layout-header">Header</div> <header class="ant-layout-header">Header</header>
<div class="ant-layout-content">Content</div> <main class="ant-layout-content">Content</main>
<div class="ant-layout-footer">Footer</div> <footer class="ant-layout-footer">Footer</footer>
</div> </section>
<div class="ant-layout"> <section class="ant-layout">
<div class="ant-layout-header">Header</div> <header class="ant-layout-header">Header</header>
<div class="ant-layout"> <section class="ant-layout">
<div class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"> <aside class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
<div class="ant-layout-sider-children">Sider</div> <div class="ant-layout-sider-children">Sider</div>
</div> </aside>
<div class="ant-layout-content">Content</div> <main class="ant-layout-content">Content</main>
</div> </section>
<div class="ant-layout-footer">Footer</div> <footer class="ant-layout-footer">Footer</footer>
</div> </section>
<div class="ant-layout"> <section class="ant-layout">
<div class="ant-layout-header">Header</div> <header class="ant-layout-header">Header</header>
<div class="ant-layout"> <section class="ant-layout">
<div class="ant-layout-content">Content</div> <main class="ant-layout-content">Content</main>
<div class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"> <aside class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
<div class="ant-layout-sider-children">Sider</div> <div class="ant-layout-sider-children">Sider</div>
</div> </aside>
</div> </section>
<div class="ant-layout-footer">Footer</div> <footer class="ant-layout-footer">Footer</footer>
</div> </section>
<div class="ant-layout"> <section class="ant-layout">
<div class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"> <aside class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
<div class="ant-layout-sider-children">Sider</div> <div class="ant-layout-sider-children">Sider</div>
</div> </aside>
<div class="ant-layout"> <section class="ant-layout">
<div class="ant-layout-header">Header</div> <header class="ant-layout-header">Header</header>
<div class="ant-layout-content">Content</div> <main class="ant-layout-content">Content</main>
<div class="ant-layout-footer">Footer</div> <footer class="ant-layout-footer">Footer</footer>
</div> </section>
</div> </section>
</div> </div>
`; `;
exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = ` exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
<div class="ant-layout" id="components-layout-demo-custom-trigger"> <section class="ant-layout" id="components-layout-demo-custom-trigger">
<div class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"> <aside class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
<div class="ant-layout-sider-children"> <div class="ant-layout-sider-children">
<div class="logo"></div> <div class="logo"></div>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark">
@ -57,21 +57,21 @@ exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
</svg></i> <span>nav 3</span></li> </svg></i> <span>nav 3</span></li>
</ul> </ul>
</div> </div>
</div> </aside>
<div class="ant-layout"> <section class="ant-layout">
<div class="ant-layout-header" style="background: rgb(255, 255, 255); padding: 0px;"><i aria-label="icon: menu-fold" tabindex="-1" class="trigger anticon anticon-menu-fold"><svg viewBox="64 64 896 896" data-icon="menu-fold" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""> <header class="ant-layout-header" style="background: rgb(255, 255, 255); padding: 0px;"><i aria-label="icon: menu-fold" tabindex="-1" class="trigger anticon anticon-menu-fold"><svg viewBox="64 64 896 896" data-icon="menu-fold" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 0 0 0 13.8z"></path> <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 0 0 0 13.8z"></path>
</svg></i></div> </svg></i></header>
<div class="ant-layout-content" style="margin: 24px 16px; padding: 24px; background: rgb(255, 255, 255); min-height: 280px;"> <main class="ant-layout-content" style="margin: 24px 16px; padding: 24px; background: rgb(255, 255, 255); min-height: 280px;">
Content Content
</div> </main>
</div> </section>
</div> </section>
`; `;
exports[`renders ./components/layout/demo/fixed.md correctly 1`] = ` exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
<div class="ant-layout" id="components-layout-demo-fixed"> <section class="ant-layout" id="components-layout-demo-fixed">
<div class="ant-layout-header" style="position: fixed; z-index: 1; width: 100%;"> <header class="ant-layout-header" style="position: fixed; z-index: 1; width: 100%;">
<div class="logo"></div> <div class="logo"></div>
<ul role="menu" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" style="line-height: 64px;"> <ul role="menu" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" style="line-height: 64px;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;"> <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
@ -90,20 +90,20 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
<div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div> <div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div>
</li> </li>
</ul> </ul>
</div> </header>
<div class="ant-layout-content" style="padding: 0px 50px; margin-top: 64px;"> <main class="ant-layout-content" style="padding: 0px 50px; margin-top: 64px;">
<div class="ant-breadcrumb" style="margin: 16px 0px;"><span class=""><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator">/</span></span><span class=""><span class="ant-breadcrumb-link">List</span><span class="ant-breadcrumb-separator">/</span></span><span class=""><span class="ant-breadcrumb-link">App</span><span class="ant-breadcrumb-separator">/</span></span></div> <div class="ant-breadcrumb" style="margin: 16px 0px;"><span class=""><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator">/</span></span><span class=""><span class="ant-breadcrumb-link">List</span><span class="ant-breadcrumb-separator">/</span></span><span class=""><span class="ant-breadcrumb-link">App</span><span class="ant-breadcrumb-separator">/</span></span></div>
<div style="background: rgb(255, 255, 255); padding: 24px; min-height: 380px;">Content</div> <div style="background: rgb(255, 255, 255); padding: 24px; min-height: 380px;">Content</div>
</div> </main>
<div class="ant-layout-footer" style="text-align: center;"> <footer class="ant-layout-footer" style="text-align: center;">
Ant Design ©2018 Created by Ant UED Ant Design ©2018 Created by Ant UED
</div> </footer>
</div> </section>
`; `;
exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = ` exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
<div class="ant-layout" id="components-layout-demo-fixed-sider"> <section class="ant-layout" id="components-layout-demo-fixed-sider">
<div class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; overflow: auto; height: 100vh; position: fixed; left: 0px; flex: 0 0 200px;"> <aside class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; overflow: auto; height: 100vh; position: fixed; left: 0px; flex: 0 0 200px;">
<div class="ant-layout-sider-children"> <div class="ant-layout-sider-children">
<div class="logo"></div> <div class="logo"></div>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark">
@ -133,10 +133,10 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
</svg></i> <span class="nav-text">nav 8</span></li> </svg></i> <span class="nav-text">nav 8</span></li>
</ul> </ul>
</div> </div>
</div> </aside>
<div class="ant-layout" style="margin-left: 200px;"> <section class="ant-layout" style="margin-left: 200px;">
<div class="ant-layout-header" style="background: rgb(255, 255, 255); padding: 0px;"></div> <header class="ant-layout-header" style="background: rgb(255, 255, 255); padding: 0px;"></header>
<div class="ant-layout-content" style="margin: 24px 16px 0px; overflow: initial;"> <main class="ant-layout-content" style="margin: 24px 16px 0px; overflow: initial;">
<div style="padding: 24px; background: rgb(255, 255, 255); text-align: center;"> <div style="padding: 24px; background: rgb(255, 255, 255); text-align: center;">
... ...
<br> <br>
@ -152,17 +152,17 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
<br>...<br>...<br>...<br>...<br>...<br> <br>...<br>...<br>...<br>...<br>...<br>
content content
</div> </div>
</div> </main>
<div class="ant-layout-footer" style="text-align: center;"> <footer class="ant-layout-footer" style="text-align: center;">
Ant Design ©2018 Created by Ant UED Ant Design ©2018 Created by Ant UED
</div> </footer>
</div> </section>
</div> </section>
`; `;
exports[`renders ./components/layout/demo/responsive.md correctly 1`] = ` exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
<div class="ant-layout" id="components-layout-demo-responsive"> <section class="ant-layout" id="components-layout-demo-responsive">
<div class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"> <aside class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
<div class="ant-layout-sider-children"> <div class="ant-layout-sider-children">
<div class="logo"></div> <div class="logo"></div>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark">
@ -180,24 +180,24 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
</svg></i> <span class="nav-text">nav 4</span></li> </svg></i> <span class="nav-text">nav 4</span></li>
</ul> </ul>
</div> </div>
</div> </aside>
<div class="ant-layout"> <section class="ant-layout">
<div class="ant-layout-header" style="background: rgb(255, 255, 255); padding: 0px;"></div> <header class="ant-layout-header" style="background: rgb(255, 255, 255); padding: 0px;"></header>
<div class="ant-layout-content" style="margin: 24px 16px 0px;"> <main class="ant-layout-content" style="margin: 24px 16px 0px;">
<div style="padding: 24px; background: rgb(255, 255, 255); min-height: 360px;"> <div style="padding: 24px; background: rgb(255, 255, 255); min-height: 360px;">
content content
</div> </div>
</div> </main>
<div class="ant-layout-footer" style="text-align: center;"> <footer class="ant-layout-footer" style="text-align: center;">
Ant Design ©2018 Created by Ant UED Ant Design ©2018 Created by Ant UED
</div> </footer>
</div> </section>
</div> </section>
`; `;
exports[`renders ./components/layout/demo/side.md correctly 1`] = ` exports[`renders ./components/layout/demo/side.md correctly 1`] = `
<div class="ant-layout" id="components-layout-demo-side" style="min-height: 100vh;"> <section class="ant-layout" id="components-layout-demo-side" style="min-height: 100vh;">
<div class="ant-layout-sider ant-layout-sider-dark ant-layout-sider-has-trigger" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"> <aside class="ant-layout-sider ant-layout-sider-dark ant-layout-sider-has-trigger" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
<div class="ant-layout-sider-children"> <div class="ant-layout-sider-children">
<div class="logo"></div> <div class="logo"></div>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark">
@ -223,25 +223,25 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
<div class="ant-layout-sider-trigger" style="width: 200px;"><i aria-label="icon: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""> <div class="ant-layout-sider-trigger" style="width: 200px;"><i aria-label="icon: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
<path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path> <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
</svg></i></div> </svg></i></div>
</div> </aside>
<div class="ant-layout"> <section class="ant-layout">
<div class="ant-layout-header" style="background: rgb(255, 255, 255); padding: 0px;"></div> <header class="ant-layout-header" style="background: rgb(255, 255, 255); padding: 0px;"></header>
<div class="ant-layout-content" style="margin: 0px 16px;"> <main class="ant-layout-content" style="margin: 0px 16px;">
<div class="ant-breadcrumb" style="margin: 16px 0px;"><span class=""><span class="ant-breadcrumb-link">User</span><span class="ant-breadcrumb-separator">/</span></span><span class=""><span class="ant-breadcrumb-link">Bill</span><span class="ant-breadcrumb-separator">/</span></span></div> <div class="ant-breadcrumb" style="margin: 16px 0px;"><span class=""><span class="ant-breadcrumb-link">User</span><span class="ant-breadcrumb-separator">/</span></span><span class=""><span class="ant-breadcrumb-link">Bill</span><span class="ant-breadcrumb-separator">/</span></span></div>
<div style="padding: 24px; background: rgb(255, 255, 255); min-height: 360px;"> <div style="padding: 24px; background: rgb(255, 255, 255); min-height: 360px;">
Bill is a cat. Bill is a cat.
</div> </div>
</div> </main>
<div class="ant-layout-footer" style="text-align: center;"> <footer class="ant-layout-footer" style="text-align: center;">
Ant Design ©2018 Created by Ant UED Ant Design ©2018 Created by Ant UED
</div> </footer>
</div> </section>
</div> </section>
`; `;
exports[`renders ./components/layout/demo/top.md correctly 1`] = ` exports[`renders ./components/layout/demo/top.md correctly 1`] = `
<div class="layout ant-layout" id="components-layout-demo-top"> <section class="layout ant-layout" id="components-layout-demo-top">
<div class="ant-layout-header"> <header class="ant-layout-header">
<div class="logo"></div> <div class="logo"></div>
<ul role="menu" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" style="line-height: 64px;"> <ul role="menu" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" style="line-height: 64px;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;"> <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
@ -260,20 +260,20 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
<div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div> <div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div>
</li> </li>
</ul> </ul>
</div> </header>
<div class="ant-layout-content" style="padding: 0px 50px;"> <main class="ant-layout-content" style="padding: 0px 50px;">
<div class="ant-breadcrumb" style="margin: 16px 0px;"><span class=""><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator">/</span></span><span class=""><span class="ant-breadcrumb-link">List</span><span class="ant-breadcrumb-separator">/</span></span><span class=""><span class="ant-breadcrumb-link">App</span><span class="ant-breadcrumb-separator">/</span></span></div> <div class="ant-breadcrumb" style="margin: 16px 0px;"><span class=""><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator">/</span></span><span class=""><span class="ant-breadcrumb-link">List</span><span class="ant-breadcrumb-separator">/</span></span><span class=""><span class="ant-breadcrumb-link">App</span><span class="ant-breadcrumb-separator">/</span></span></div>
<div style="background: rgb(255, 255, 255); padding: 24px; min-height: 280px;">Content</div> <div style="background: rgb(255, 255, 255); padding: 24px; min-height: 280px;">Content</div>
</div> </main>
<div class="ant-layout-footer" style="text-align: center;"> <footer class="ant-layout-footer" style="text-align: center;">
Ant Design ©2018 Created by Ant UED Ant Design ©2018 Created by Ant UED
</div> </footer>
</div> </section>
`; `;
exports[`renders ./components/layout/demo/top-side.md correctly 1`] = ` exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
<div class="ant-layout" id="components-layout-demo-top-side"> <section class="ant-layout" id="components-layout-demo-top-side">
<div class="header ant-layout-header"> <header class="header ant-layout-header">
<div class="logo"></div> <div class="logo"></div>
<ul role="menu" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" style="line-height: 64px;"> <ul role="menu" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" style="line-height: 64px;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;"> <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
@ -292,11 +292,11 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
<div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div> <div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div>
</li> </li>
</ul> </ul>
</div> </header>
<div class="ant-layout-content" style="padding: 0px 50px;"> <main class="ant-layout-content" style="padding: 0px 50px;">
<div class="ant-breadcrumb" style="margin: 16px 0px;"><span class=""><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator">/</span></span><span class=""><span class="ant-breadcrumb-link">List</span><span class="ant-breadcrumb-separator">/</span></span><span class=""><span class="ant-breadcrumb-link">App</span><span class="ant-breadcrumb-separator">/</span></span></div> <div class="ant-breadcrumb" style="margin: 16px 0px;"><span class=""><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator">/</span></span><span class=""><span class="ant-breadcrumb-link">List</span><span class="ant-breadcrumb-separator">/</span></span><span class=""><span class="ant-breadcrumb-link">App</span><span class="ant-breadcrumb-separator">/</span></span></div>
<div class="ant-layout" style="padding: 24px 0px; background: rgb(255, 255, 255);"> <section class="ant-layout" style="padding: 24px 0px; background: rgb(255, 255, 255);">
<div class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; flex: 0 0 200px; background: rgb(255, 255, 255);"> <aside class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; flex: 0 0 200px; background: rgb(255, 255, 255);">
<div class="ant-layout-sider-children"> <div class="ant-layout-sider-children">
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="height: 100%;"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="height: 100%;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected"> <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected">
@ -318,21 +318,21 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
</li> </li>
</ul> </ul>
</div> </div>
</div> </aside>
<div class="ant-layout-content" style="padding: 0px 24px; min-height: 280px;"> <main class="ant-layout-content" style="padding: 0px 24px; min-height: 280px;">
Content Content
</div> </main>
</div> </section>
</div> </main>
<div class="ant-layout-footer" style="text-align: center;"> <footer class="ant-layout-footer" style="text-align: center;">
Ant Design ©2018 Created by Ant UED Ant Design ©2018 Created by Ant UED
</div> </footer>
</div> </section>
`; `;
exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = ` exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
<div class="ant-layout" id="components-layout-demo-top-side-2"> <section class="ant-layout" id="components-layout-demo-top-side-2">
<div class="header ant-layout-header"> <header class="header ant-layout-header">
<div class="logo"></div> <div class="logo"></div>
<ul role="menu" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" style="line-height: 64px;"> <ul role="menu" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" style="line-height: 64px;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;"> <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
@ -351,9 +351,9 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
<div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div> <div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div>
</li> </li>
</ul> </ul>
</div> </header>
<div class="ant-layout"> <section class="ant-layout">
<div class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; flex: 0 0 200px; background: rgb(255, 255, 255);"> <aside class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; flex: 0 0 200px; background: rgb(255, 255, 255);">
<div class="ant-layout-sider-children"> <div class="ant-layout-sider-children">
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="height: 100%; border-right: 0;"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="height: 100%; border-right: 0;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected"> <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected">
@ -375,13 +375,13 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
</li> </li>
</ul> </ul>
</div> </div>
</div> </aside>
<div class="ant-layout" style="padding: 0px 24px 24px;"> <section class="ant-layout" style="padding: 0px 24px 24px;">
<div class="ant-breadcrumb" style="margin: 16px 0px;"><span class=""><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator">/</span></span><span class=""><span class="ant-breadcrumb-link">List</span><span class="ant-breadcrumb-separator">/</span></span><span class=""><span class="ant-breadcrumb-link">App</span><span class="ant-breadcrumb-separator">/</span></span></div> <div class="ant-breadcrumb" style="margin: 16px 0px;"><span class=""><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator">/</span></span><span class=""><span class="ant-breadcrumb-link">List</span><span class="ant-breadcrumb-separator">/</span></span><span class=""><span class="ant-breadcrumb-link">App</span><span class="ant-breadcrumb-separator">/</span></span></div>
<div class="ant-layout-content" style="background: rgb(255, 255, 255); padding: 24px; margin: 0px; min-height: 280px;"> <main class="ant-layout-content" style="background: rgb(255, 255, 255); padding: 24px; margin: 0px; min-height: 280px;">
Content Content
</div> </main>
</div> </section>
</div> </section>
</div> </section>
`; `;

6
components/layout/__tests__/index.test.js
View File

@ -1,10 +1,16 @@
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import Vue from 'vue'; import Vue from 'vue';
import Layout from '..'; import Layout from '..';
import Icon from '../../icon';
import Menu from '../../menu';
import mountTest from '../../../tests/shared/mountTest';
const { Sider, Content } = Layout; const { Sider, Content } = Layout;
describe('Layout', () => { describe('Layout', () => {
mountTest(Layout);
mountTest(Content);
mountTest(Sider);
it('detect the sider as children', done => { it('detect the sider as children', done => {
const wrapper = mount({ const wrapper = mount({
render() { render() {

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

@ -28,19 +28,20 @@ The wrapper.
The sidebar. The sidebar.
| Property | Description | Type | Default | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| breakpoint | [breakpoints](/ant-desing-vue/components/grid#api) of the responsive layout | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - | | breakpoint | [breakpoints](/ant-desing-vue/components/grid#api) of the responsive layout | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - | |
| class | container className | string | - | | class | container className | string | - | |
| collapsed(v-model) | to set the current status | boolean | - | | 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 | 80 | | collapsedWidth | width of the collapsed sidebar, by setting to `0` a special trigger will appear | number | 80 | |
| collapsible | whether can be collapsed | boolean | false | | collapsible | whether can be collapsed | boolean | false | |
| defaultCollapsed | to set the initial status | 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 | | reverseArrow | reverse direction of arrow, for a sider that expands from the right | boolean | false | |
| style | to customize the styles | object\|string | - | | style | to customize the styles | object\|string | - | |
| theme | color theme of the sidebar | string: `light` `dark` | `dark` | | theme | color theme of the sidebar | string: `light` `dark` | `dark` | |
| trigger | specify the customized trigger, set to null to hide the trigger | string\|slot | - | | trigger | specify the customized trigger, set to null to hide the trigger | string\|slot | - | |
| width | width of the sidebar | number\|string | 200 | | width | width of the sidebar | number\|string | 200 | |
| zeroWidthTriggerStyle | to customize the styles of the special trigger that appears when `collapsedWidth` is 0 | object | - | 1.5.0 |
### Events ### Events

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

@ -28,19 +28,20 @@
侧边栏。 侧边栏。
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| breakpoint | 触发响应式布局的[断点](/components/grid#API) | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - | | breakpoint | 触发响应式布局的[断点](/components/grid#API) | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - | |
| class | 容器 class | string | - | | class | 容器 class | string | - | |
| collapsed(v-model) | 当前收起状态 | boolean | - | | collapsed(v-model) | 当前收起状态 | boolean | - | |
| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 80 | | collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 80 | |
| collapsible | 是否可收起 | boolean | false | | collapsible | 是否可收起 | boolean | false | |
| defaultCollapsed | 是否默认收起 | boolean | false | | defaultCollapsed | 是否默认收起 | boolean | false | |
| reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false | | reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false | |
| style | 指定样式 | object\|string | - | | style | 指定样式 | object\|string | - | |
| theme | 主题颜色 | string: `light` `dark` | `dark` | | theme | 主题颜色 | string: `light` `dark` | `dark` | |
| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string\|slot | - | | trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string\|slot | - |
| width | 宽度 | number\|string | 200 | | width | 宽度 | number\|string | 200 | |
| zeroWidthTriggerStyle | 指定当 `collapsedWidth` 为 0 时出现的特殊 trigger 的样式 | object | - | 1.5.0 |
### 事件 ### 事件

59
components/layout/layout.jsx
View File

@ -6,9 +6,10 @@ import { ConfigConsumerProps } from '../config-provider';
export const BasicProps = { export const BasicProps = {
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
hasSider: PropTypes.boolean, hasSider: PropTypes.boolean,
tagName: PropTypes.string,
}; };
function generator(props, name) { function generator({ suffixCls, tagName, name }) {
return BasicComponent => { return BasicComponent => {
return { return {
name, name,
@ -17,7 +18,6 @@ function generator(props, name) {
configProvider: { default: () => ConfigConsumerProps }, configProvider: { default: () => ConfigConsumerProps },
}, },
render() { render() {
const { suffixCls } = props;
const { prefixCls: customizePrefixCls } = this.$props; const { prefixCls: customizePrefixCls } = this.$props;
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls(suffixCls, customizePrefixCls); const prefixCls = getPrefixCls(suffixCls, customizePrefixCls);
@ -26,6 +26,7 @@ function generator(props, name) {
props: { props: {
prefixCls, prefixCls,
...getOptionProps(this), ...getOptionProps(this),
tagName,
}, },
on: getListeners(this), on: getListeners(this),
}; };
@ -38,12 +39,12 @@ function generator(props, name) {
const Basic = { const Basic = {
props: BasicProps, props: BasicProps,
render() { render() {
const { prefixCls, $slots } = this; const { prefixCls, tagName: Tag, $slots } = this;
const divProps = { const divProps = {
class: prefixCls, class: prefixCls,
on: getListeners(this), on: getListeners(this),
}; };
return <div {...divProps}>{$slots.default}</div>; return <Tag {...divProps}>{$slots.default}</Tag>;
}, },
}; };
@ -67,45 +68,41 @@ const BasicLayout = {
}; };
}, },
render() { render() {
const { prefixCls, $slots, hasSider } = this; const { prefixCls, $slots, hasSider, tagName: Tag } = this;
const divCls = classNames(prefixCls, { const divCls = classNames(prefixCls, {
[`${prefixCls}-has-sider`]: hasSider || this.siders.length > 0, [`${prefixCls}-has-sider`]: typeof hasSider === 'boolean' ? hasSider : this.siders.length > 0,
}); });
const divProps = { const divProps = {
class: divCls, class: divCls,
on: getListeners, on: getListeners,
}; };
return <div {...divProps}>{$slots.default}</div>; return <Tag {...divProps}>{$slots.default}</Tag>;
}, },
}; };
const Layout = generator( const Layout = generator({
{ suffixCls: 'layout',
suffixCls: 'layout', tagName: 'section',
}, name: 'ALayout',
'ALayout', })(BasicLayout);
)(BasicLayout);
const Header = generator( const Header = generator({
{ suffixCls: 'layout-header',
suffixCls: 'layout-header', tagName: 'header',
}, name: 'ALayoutHeader',
'ALayoutHeader', })(Basic);
)(Basic);
const Footer = generator( const Footer = generator({
{ suffixCls: 'layout-footer',
suffixCls: 'layout-footer', tagName: 'footer',
}, name: 'ALayoutFooter',
'ALayoutFooter', })(Basic);
)(Basic);
const Content = generator( const Content = generator({
{ suffixCls: 'layout-content',
suffixCls: 'layout-content', tagName: 'main',
}, name: 'ALayoutContent',
'ALayoutContent', })(Basic);
)(Basic);
Layout.Header = Header; Layout.Header = Header;
Layout.Footer = Footer; Layout.Footer = Footer;