feat: update layout

build/config.js

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

components/layout/Sider.jsx

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

components/layout/__tests__/__snapshots__/demo.test.js.snap

@@ -2,47 +2,47 @@
 
 exports[`renders ./components/layout/demo/basic.md correctly 1`] = `
 <div id="components-layout-demo-basic">
-  <div class="ant-layout">
-    <div class="ant-layout-header">Header</div>
-    <div class="ant-layout-content">Content</div>
-    <div class="ant-layout-footer">Footer</div>
-  </div>
-  <div class="ant-layout">
-    <div class="ant-layout-header">Header</div>
-    <div 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;">
+  <section class="ant-layout">
+    <header class="ant-layout-header">Header</header>
+    <main class="ant-layout-content">Content</main>
+    <footer class="ant-layout-footer">Footer</footer>
+  </section>
+  <section class="ant-layout">
+    <header class="ant-layout-header">Header</header>
+    <section class="ant-layout">
+      <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>
-      <div class="ant-layout-content">Content</div>
-    </div>
-    <div class="ant-layout-footer">Footer</div>
-  </div>
-  <div class="ant-layout">
-    <div class="ant-layout-header">Header</div>
-    <div class="ant-layout">
-      <div class="ant-layout-content">Content</div>
-      <div class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
+      </aside>
+      <main class="ant-layout-content">Content</main>
+    </section>
+    <footer class="ant-layout-footer">Footer</footer>
+  </section>
+  <section class="ant-layout">
+    <header class="ant-layout-header">Header</header>
+    <section class="ant-layout">
+      <main class="ant-layout-content">Content</main>
+      <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>
-    </div>
-    <div class="ant-layout-footer">Footer</div>
-  </div>
-  <div 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>
+    </section>
+    <footer class="ant-layout-footer">Footer</footer>
+  </section>
+  <section class="ant-layout">
+    <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>
-    <div class="ant-layout">
-      <div class="ant-layout-header">Header</div>
-      <div class="ant-layout-content">Content</div>
-      <div class="ant-layout-footer">Footer</div>
-    </div>
-  </div>
+    </aside>
+    <section class="ant-layout">
+      <header class="ant-layout-header">Header</header>
+      <main class="ant-layout-content">Content</main>
+      <footer class="ant-layout-footer">Footer</footer>
+    </section>
+  </section>
 </div>
 `;
 
 exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
-<div 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;">
+<section class="ant-layout" id="components-layout-demo-custom-trigger">
+  <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="logo"></div>
       <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>
       </ul>
     </div>
-  </div>
-  <div 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="">
+  </aside>
+  <section class="ant-layout">
+    <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>
-        </svg></i></div>
-    <div class="ant-layout-content" style="margin: 24px 16px; padding: 24px; background: rgb(255, 255, 255); min-height: 280px;">
+        </svg></i></header>
+    <main class="ant-layout-content" style="margin: 24px 16px; padding: 24px; background: rgb(255, 255, 255); min-height: 280px;">
       Content
-    </div>
-  </div>
-</div>
+    </main>
+  </section>
+</section>
 `;
 
 exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
-<div class="ant-layout" id="components-layout-demo-fixed">
-  <div class="ant-layout-header" style="position: fixed; z-index: 1; width: 100%;">
+<section class="ant-layout" id="components-layout-demo-fixed">
+  <header class="ant-layout-header" style="position: fixed; z-index: 1; width: 100%;">
     <div class="logo"></div>
     <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;">
@@ -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>
       </li>
     </ul>
-  </div>
-  <div class="ant-layout-content" style="padding: 0px 50px; margin-top: 64px;">
+  </header>
+  <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 style="background: rgb(255, 255, 255); padding: 24px; min-height: 380px;">Content</div>
-  </div>
-  <div class="ant-layout-footer" style="text-align: center;">
+  </main>
+  <footer class="ant-layout-footer" style="text-align: center;">
     Ant Design ©2018 Created by Ant UED
-  </div>
-</div>
+  </footer>
+</section>
 `;
 
 exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
-<div 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;">
+<section class="ant-layout" id="components-layout-demo-fixed-sider">
+  <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="logo"></div>
       <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>
       </ul>
     </div>
-  </div>
-  <div class="ant-layout" style="margin-left: 200px;">
-    <div class="ant-layout-header" style="background: rgb(255, 255, 255); padding: 0px;"></div>
-    <div class="ant-layout-content" style="margin: 24px 16px 0px; overflow: initial;">
+  </aside>
+  <section class="ant-layout" style="margin-left: 200px;">
+    <header class="ant-layout-header" style="background: rgb(255, 255, 255); padding: 0px;"></header>
+    <main class="ant-layout-content" style="margin: 24px 16px 0px; overflow: initial;">
       <div style="padding: 24px; background: rgb(255, 255, 255); text-align: center;">
         ...
         <br>
@@ -152,17 +152,17 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
         <br>...<br>...<br>...<br>...<br>...<br>
         content
       </div>
-    </div>
-    <div class="ant-layout-footer" style="text-align: center;">
+    </main>
+    <footer class="ant-layout-footer" style="text-align: center;">
       Ant Design ©2018 Created by Ant UED
-    </div>
-  </div>
-</div>
+    </footer>
+  </section>
+</section>
 `;
 
 exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
-<div 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;">
+<section class="ant-layout" id="components-layout-demo-responsive">
+  <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="logo"></div>
       <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>
       </ul>
     </div>
-  </div>
-  <div class="ant-layout">
-    <div class="ant-layout-header" style="background: rgb(255, 255, 255); padding: 0px;"></div>
-    <div class="ant-layout-content" style="margin: 24px 16px 0px;">
+  </aside>
+  <section class="ant-layout">
+    <header class="ant-layout-header" style="background: rgb(255, 255, 255); padding: 0px;"></header>
+    <main class="ant-layout-content" style="margin: 24px 16px 0px;">
       <div style="padding: 24px; background: rgb(255, 255, 255); min-height: 360px;">
         content
       </div>
-    </div>
-    <div class="ant-layout-footer" style="text-align: center;">
+    </main>
+    <footer class="ant-layout-footer" style="text-align: center;">
       Ant Design ©2018 Created by Ant UED
-    </div>
-  </div>
-</div>
+    </footer>
+  </section>
+</section>
 `;
 
 exports[`renders ./components/layout/demo/side.md correctly 1`] = `
-<div 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;">
+<section class="ant-layout" id="components-layout-demo-side" style="min-height: 100vh;">
+  <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="logo"></div>
       <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="">
           <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>
-  </div>
-  <div class="ant-layout">
-    <div class="ant-layout-header" style="background: rgb(255, 255, 255); padding: 0px;"></div>
-    <div class="ant-layout-content" style="margin: 0px 16px;">
+  </aside>
+  <section class="ant-layout">
+    <header class="ant-layout-header" style="background: rgb(255, 255, 255); padding: 0px;"></header>
+    <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 style="padding: 24px; background: rgb(255, 255, 255); min-height: 360px;">
         Bill is a cat.
       </div>
-    </div>
-    <div class="ant-layout-footer" style="text-align: center;">
+    </main>
+    <footer class="ant-layout-footer" style="text-align: center;">
       Ant Design ©2018 Created by Ant UED
-    </div>
-  </div>
-</div>
+    </footer>
+  </section>
+</section>
 `;
 
 exports[`renders ./components/layout/demo/top.md correctly 1`] = `
-<div class="layout ant-layout" id="components-layout-demo-top">
-  <div class="ant-layout-header">
+<section class="layout ant-layout" id="components-layout-demo-top">
+  <header class="ant-layout-header">
     <div class="logo"></div>
     <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;">
@@ -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>
       </li>
     </ul>
-  </div>
-  <div class="ant-layout-content" style="padding: 0px 50px;">
+  </header>
+  <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 style="background: rgb(255, 255, 255); padding: 24px; min-height: 280px;">Content</div>
-  </div>
-  <div class="ant-layout-footer" style="text-align: center;">
+  </main>
+  <footer class="ant-layout-footer" style="text-align: center;">
     Ant Design ©2018 Created by Ant UED
-  </div>
-</div>
+  </footer>
+</section>
 `;
 
 exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
-<div class="ant-layout" id="components-layout-demo-top-side">
-  <div class="header ant-layout-header">
+<section class="ant-layout" id="components-layout-demo-top-side">
+  <header class="header ant-layout-header">
     <div class="logo"></div>
     <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;">
@@ -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>
       </li>
     </ul>
-  </div>
-  <div class="ant-layout-content" style="padding: 0px 50px;">
+  </header>
+  <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-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);">
+    <section class="ant-layout" style="padding: 24px 0px; 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">
           <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">
@@ -318,21 +318,21 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
             </li>
           </ul>
         </div>
-      </div>
-      <div class="ant-layout-content" style="padding: 0px 24px; min-height: 280px;">
+      </aside>
+      <main class="ant-layout-content" style="padding: 0px 24px; min-height: 280px;">
         Content
-      </div>
-    </div>
-  </div>
-  <div class="ant-layout-footer" style="text-align: center;">
+      </main>
+    </section>
+  </main>
+  <footer class="ant-layout-footer" style="text-align: center;">
     Ant Design ©2018 Created by Ant UED
-  </div>
-</div>
+  </footer>
+</section>
 `;
 
 exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
-<div class="ant-layout" id="components-layout-demo-top-side-2">
-  <div class="header ant-layout-header">
+<section class="ant-layout" id="components-layout-demo-top-side-2">
+  <header class="header ant-layout-header">
     <div class="logo"></div>
     <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;">
@@ -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>
       </li>
     </ul>
-  </div>
-  <div 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);">
+  </header>
+  <section class="ant-layout">
+    <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">
         <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">
@@ -375,13 +375,13 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
           </li>
         </ul>
       </div>
-    </div>
-    <div class="ant-layout" style="padding: 0px 24px 24px;">
+    </aside>
+    <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-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
-      </div>
-    </div>
-  </div>
-</div>
+      </main>
+    </section>
+  </section>
+</section>
 `;

components/layout/__tests__/index.test.js

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

components/layout/index.en-US.md

@@ -28,19 +28,20 @@ The wrapper.
 
 The sidebar.
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| breakpoint | [breakpoints](/ant-desing-vue/components/grid#api) of the responsive layout | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - |
-| 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 | 80 |
-| 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\|string | - |
-| theme | color theme of the sidebar | string: `light` `dark` | `dark` |
-| trigger | specify the customized trigger, set to null to hide the trigger | string\|slot | - |
-| width | width of the sidebar | number\|string | 200 |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| breakpoint | [breakpoints](/ant-desing-vue/components/grid#api) of the responsive layout | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - |  |
+| 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 | 80 |  |
+| 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\|string | - |  |
+| theme | color theme of the sidebar | string: `light` `dark` | `dark` |  |
+| trigger | specify the customized trigger, set to null to hide the trigger | string\|slot | - |  |
+| 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
 

components/layout/index.zh-CN.md

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

components/layout/layout.jsx

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