-
+
+
+
+
+
`;
exports[`renders ./components/layout/demo/top.md correctly 1`] = `
-
-
-
+
+
Home/List/App/
Content
-
-
-
+
+
`;
exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
-
+
+
`;
exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
-
-
-
-
-
+
+
Home/List/App/
-
+
Content
-
-
-
-
+
+
+
+
`;
diff --git a/components/layout/__tests__/index.test.js b/components/layout/__tests__/index.test.js
index e4aee9f64..2022f4603 100644
--- a/components/layout/__tests__/index.test.js
+++ b/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() {
diff --git a/components/layout/index.en-US.md b/components/layout/index.en-US.md
index c309ded37..6bd204093 100644
--- a/components/layout/index.en-US.md
+++ b/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
diff --git a/components/layout/index.zh-CN.md b/components/layout/index.zh-CN.md
index 60a50f852..107de06bc 100644
--- a/components/layout/index.zh-CN.md
+++ b/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 |
### 事件
diff --git a/components/layout/layout.jsx b/components/layout/layout.jsx
index 4caa9755b..ab4255fab 100644
--- a/components/layout/layout.jsx
+++ b/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
{$slots.default}
;
+ return
{$slots.default};
},
};
@@ -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
{$slots.default}
;
+ return
{$slots.default};
},
};
-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;