ant-design/components/layout/__tests__/__snapshots__/demo.test.js.snap
MinJeong Kim feaf238dfa fix: set -has-trigger class in sider when -trigger div exists (#9399)
* fix: set `-has-trigger` class in sider when `-trigger` div exists

* fix: fix template expr lint error
2018-02-24 10:35:04 +08:00

1400 lines
29 KiB
Plaintext

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/layout/demo/basic.md correctly 1`] = `
<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
class="ant-layout"
>
<div
class="ant-layout-header"
>
Header
</div>
<div
class="ant-layout"
>
<div
class="ant-layout-sider"
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"
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"
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>
</div>
`;
exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
<div
class="ant-layout"
>
<div
class="ant-layout-sider"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div
class="ant-layout-sider-children"
>
<div
class="logo"
/>
<ul
aria-activedescendant=""
class="ant-menu ant-menu-dark ant-menu-root ant-menu-inline"
role="menu"
tabindex="0"
>
<li
aria-selected="true"
class="ant-menu-item ant-menu-item-selected"
role="menuitem"
style="padding-left:24px"
>
<i
class="anticon anticon-user"
/>
<span>
nav 1
</span>
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
style="padding-left:24px"
>
<i
class="anticon anticon-video-camera"
/>
<span>
nav 2
</span>
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
style="padding-left:24px"
>
<i
class="anticon anticon-upload"
/>
<span>
nav 3
</span>
</li>
</ul>
</div>
</div>
<div
class="ant-layout"
>
<div
class="ant-layout-header"
style="background:#fff;padding:0"
>
<i
class="anticon anticon-menu-fold trigger"
/>
</div>
<div
class="ant-layout-content"
style="margin:24px 16px;padding:24px;background:#fff;min-height:280px"
>
Content
</div>
</div>
</div>
`;
exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
<div
class="ant-layout"
>
<div
class="ant-layout-header"
style="position:fixed;width:100%"
>
<div
class="logo"
/>
<ul
aria-activedescendant=""
class="ant-menu ant-menu-dark ant-menu-root ant-menu-horizontal"
role="menu"
style="line-height:64px"
tabindex="0"
>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
>
nav 1
</li>
<li
aria-selected="true"
class="ant-menu-item ant-menu-item-selected"
role="menuitem"
>
nav 2
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
>
nav 3
</li>
</ul>
</div>
<div
class="ant-layout-content"
style="padding:0 50px;margin-top:64px"
>
<div
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<div
style="background:#fff;padding:24px;min-height:380px"
>
Content
</div>
</div>
<div
class="ant-layout-footer"
style="text-align:center"
>
Ant Design ©2016 Created by Ant UED
</div>
</div>
`;
exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
<div
class="ant-layout"
>
<div
class="ant-layout-sider"
style="overflow:auto;height:100vh;position:fixed;left:0;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div
class="ant-layout-sider-children"
>
<div
class="logo"
/>
<ul
aria-activedescendant=""
class="ant-menu ant-menu-dark ant-menu-root ant-menu-inline"
role="menu"
tabindex="0"
>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
style="padding-left:24px"
>
<i
class="anticon anticon-user"
/>
<span
class="nav-text"
>
nav 1
</span>
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
style="padding-left:24px"
>
<i
class="anticon anticon-video-camera"
/>
<span
class="nav-text"
>
nav 2
</span>
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
style="padding-left:24px"
>
<i
class="anticon anticon-upload"
/>
<span
class="nav-text"
>
nav 3
</span>
</li>
<li
aria-selected="true"
class="ant-menu-item ant-menu-item-selected"
role="menuitem"
style="padding-left:24px"
>
<i
class="anticon anticon-bar-chart"
/>
<span
class="nav-text"
>
nav 4
</span>
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
style="padding-left:24px"
>
<i
class="anticon anticon-cloud-o"
/>
<span
class="nav-text"
>
nav 5
</span>
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
style="padding-left:24px"
>
<i
class="anticon anticon-appstore-o"
/>
<span
class="nav-text"
>
nav 6
</span>
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
style="padding-left:24px"
>
<i
class="anticon anticon-team"
/>
<span
class="nav-text"
>
nav 7
</span>
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
style="padding-left:24px"
>
<i
class="anticon anticon-shop"
/>
<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:#fff;padding:0"
/>
<div
class="ant-layout-content"
style="margin:24px 16px 0;overflow:initial"
>
<div
style="padding:24px;background:#fff;text-align:center"
>
...
<br />
Really
<br />
...
<br />
...
<br />
...
<br />
long
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
content
</div>
</div>
<div
class="ant-layout-footer"
style="text-align:center"
>
Ant Design ©2016 Created by Ant UED
</div>
</div>
</div>
`;
exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
<div
class="ant-layout"
>
<div
class="ant-layout-sider"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div
class="ant-layout-sider-children"
>
<div
class="logo"
/>
<ul
aria-activedescendant=""
class="ant-menu ant-menu-dark ant-menu-root ant-menu-inline"
role="menu"
tabindex="0"
>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
style="padding-left:24px"
>
<i
class="anticon anticon-user"
/>
<span
class="nav-text"
>
nav 1
</span>
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
style="padding-left:24px"
>
<i
class="anticon anticon-video-camera"
/>
<span
class="nav-text"
>
nav 2
</span>
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
style="padding-left:24px"
>
<i
class="anticon anticon-upload"
/>
<span
class="nav-text"
>
nav 3
</span>
</li>
<li
aria-selected="true"
class="ant-menu-item ant-menu-item-selected"
role="menuitem"
style="padding-left:24px"
>
<i
class="anticon anticon-user"
/>
<span
class="nav-text"
>
nav 4
</span>
</li>
</ul>
</div>
</div>
<div
class="ant-layout"
>
<div
class="ant-layout-header"
style="background:#fff;padding:0"
/>
<div
class="ant-layout-content"
style="margin:24px 16px 0"
>
<div
style="padding:24px;background:#fff;min-height:360px"
>
content
</div>
</div>
<div
class="ant-layout-footer"
style="text-align:center"
>
Ant Design ©2016 Created by Ant UED
</div>
</div>
</div>
`;
exports[`renders ./components/layout/demo/side.md correctly 1`] = `
<div
class="ant-layout"
style="min-height:100vh"
>
<div
class="ant-layout-sider 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"
/>
<ul
aria-activedescendant=""
class="ant-menu ant-menu-dark ant-menu-root ant-menu-inline"
role="menu"
tabindex="0"
>
<li
aria-selected="true"
class="ant-menu-item ant-menu-item-selected"
role="menuitem"
style="padding-left:24px"
>
<i
class="anticon anticon-pie-chart"
/>
<span>
Option 1
</span>
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
style="padding-left:24px"
>
<i
class="anticon anticon-desktop"
/>
<span>
Option 2
</span>
</li>
<li
class="ant-menu-submenu ant-menu-submenu-inline"
>
<div
aria-expanded="false"
aria-haspopup="true"
aria-owns="sub1$Menu"
class="ant-menu-submenu-title"
style="padding-left:24px"
>
<span>
<i
class="anticon anticon-user"
/>
<span>
User
</span>
</span>
<i
class="ant-menu-submenu-arrow"
/>
</div>
</li>
<li
class="ant-menu-submenu ant-menu-submenu-inline"
>
<div
aria-expanded="false"
aria-haspopup="true"
aria-owns="sub2$Menu"
class="ant-menu-submenu-title"
style="padding-left:24px"
>
<span>
<i
class="anticon anticon-team"
/>
<span>
Team
</span>
</span>
<i
class="ant-menu-submenu-arrow"
/>
</div>
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
style="padding-left:24px"
>
<i
class="anticon anticon-file"
/>
<span>
File
</span>
</li>
</ul>
</div>
<div
class="ant-layout-sider-trigger"
style="width:200px"
>
<i
class="anticon anticon-left"
/>
</div>
</div>
<div
class="ant-layout"
>
<div
class="ant-layout-header"
style="background:#fff;padding:0"
/>
<div
class="ant-layout-content"
style="margin:0 16px"
>
<div
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
User
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
Bill
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<div
style="padding:24px;background:#fff;min-height:360px"
>
Bill is a cat.
</div>
</div>
<div
class="ant-layout-footer"
style="text-align:center"
>
Ant Design ©2016 Created by Ant UED
</div>
</div>
</div>
`;
exports[`renders ./components/layout/demo/top.md correctly 1`] = `
<div
class="layout ant-layout"
>
<div
class="ant-layout-header"
>
<div
class="logo"
/>
<ul
aria-activedescendant=""
class="ant-menu ant-menu-dark ant-menu-root ant-menu-horizontal"
role="menu"
style="line-height:64px"
tabindex="0"
>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
>
nav 1
</li>
<li
aria-selected="true"
class="ant-menu-item ant-menu-item-selected"
role="menuitem"
>
nav 2
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
>
nav 3
</li>
</ul>
</div>
<div
class="ant-layout-content"
style="padding:0 50px"
>
<div
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<div
style="background:#fff;padding:24px;min-height:280px"
>
Content
</div>
</div>
<div
class="ant-layout-footer"
style="text-align:center"
>
Ant Design ©2016 Created by Ant UED
</div>
</div>
`;
exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
<div
class="ant-layout"
>
<div
class="header ant-layout-header"
>
<div
class="logo"
/>
<ul
aria-activedescendant=""
class="ant-menu ant-menu-dark ant-menu-root ant-menu-horizontal"
role="menu"
style="line-height:64px"
tabindex="0"
>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
>
nav 1
</li>
<li
aria-selected="true"
class="ant-menu-item ant-menu-item-selected"
role="menuitem"
>
nav 2
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
>
nav 3
</li>
</ul>
</div>
<div
class="ant-layout-content"
style="padding:0 50px"
>
<div
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<div
class="ant-layout"
style="padding:24px 0;background:#fff"
>
<div
class="ant-layout-sider"
style="background:#fff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div
class="ant-layout-sider-children"
>
<ul
aria-activedescendant=""
class="ant-menu ant-menu-light ant-menu-root ant-menu-inline"
role="menu"
style="height:100%"
tabindex="0"
>
<li
class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected"
>
<div
aria-expanded="true"
aria-haspopup="true"
aria-owns="sub1$Menu"
class="ant-menu-submenu-title"
style="padding-left:24px"
>
<span>
<i
class="anticon anticon-user"
/>
subnav 1
</span>
<i
class="ant-menu-submenu-arrow"
/>
</div>
<ul
aria-activedescendant=""
class="ant-menu ant-menu-sub ant-menu-inline"
id="sub1$Menu"
role="menu"
>
<li
aria-selected="true"
class="ant-menu-item ant-menu-item-selected"
role="menuitem"
style="padding-left:48px"
>
option1
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
style="padding-left:48px"
>
option2
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
style="padding-left:48px"
>
option3
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
style="padding-left:48px"
>
option4
</li>
</ul>
</li>
<li
class="ant-menu-submenu ant-menu-submenu-inline"
>
<div
aria-expanded="false"
aria-haspopup="true"
aria-owns="sub2$Menu"
class="ant-menu-submenu-title"
style="padding-left:24px"
>
<span>
<i
class="anticon anticon-laptop"
/>
subnav 2
</span>
<i
class="ant-menu-submenu-arrow"
/>
</div>
</li>
<li
class="ant-menu-submenu ant-menu-submenu-inline"
>
<div
aria-expanded="false"
aria-haspopup="true"
aria-owns="sub3$Menu"
class="ant-menu-submenu-title"
style="padding-left:24px"
>
<span>
<i
class="anticon anticon-notification"
/>
subnav 3
</span>
<i
class="ant-menu-submenu-arrow"
/>
</div>
</li>
</ul>
</div>
</div>
<div
class="ant-layout-content"
style="padding:0 24px;min-height:280px"
>
Content
</div>
</div>
</div>
<div
class="ant-layout-footer"
style="text-align:center"
>
Ant Design ©2016 Created by Ant UED
</div>
</div>
`;
exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
<div
class="ant-layout"
>
<div
class="header ant-layout-header"
>
<div
class="logo"
/>
<ul
aria-activedescendant=""
class="ant-menu ant-menu-dark ant-menu-root ant-menu-horizontal"
role="menu"
style="line-height:64px"
tabindex="0"
>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
>
nav 1
</li>
<li
aria-selected="true"
class="ant-menu-item ant-menu-item-selected"
role="menuitem"
>
nav 2
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
>
nav 3
</li>
</ul>
</div>
<div
class="ant-layout"
>
<div
class="ant-layout-sider"
style="background:#fff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div
class="ant-layout-sider-children"
>
<ul
aria-activedescendant=""
class="ant-menu ant-menu-light ant-menu-root ant-menu-inline"
role="menu"
style="height:100%;border-right:0"
tabindex="0"
>
<li
class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected"
>
<div
aria-expanded="true"
aria-haspopup="true"
aria-owns="sub1$Menu"
class="ant-menu-submenu-title"
style="padding-left:24px"
>
<span>
<i
class="anticon anticon-user"
/>
subnav 1
</span>
<i
class="ant-menu-submenu-arrow"
/>
</div>
<ul
aria-activedescendant=""
class="ant-menu ant-menu-sub ant-menu-inline"
id="sub1$Menu"
role="menu"
>
<li
aria-selected="true"
class="ant-menu-item ant-menu-item-selected"
role="menuitem"
style="padding-left:48px"
>
option1
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
style="padding-left:48px"
>
option2
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
style="padding-left:48px"
>
option3
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
style="padding-left:48px"
>
option4
</li>
</ul>
</li>
<li
class="ant-menu-submenu ant-menu-submenu-inline"
>
<div
aria-expanded="false"
aria-haspopup="true"
aria-owns="sub2$Menu"
class="ant-menu-submenu-title"
style="padding-left:24px"
>
<span>
<i
class="anticon anticon-laptop"
/>
subnav 2
</span>
<i
class="ant-menu-submenu-arrow"
/>
</div>
</li>
<li
class="ant-menu-submenu ant-menu-submenu-inline"
>
<div
aria-expanded="false"
aria-haspopup="true"
aria-owns="sub3$Menu"
class="ant-menu-submenu-title"
style="padding-left:24px"
>
<span>
<i
class="anticon anticon-notification"
/>
subnav 3
</span>
<i
class="ant-menu-submenu-arrow"
/>
</div>
</li>
</ul>
</div>
</div>
<div
class="ant-layout"
style="padding:0 24px 24px"
>
<div
class="ant-breadcrumb"
style="margin:16px 0"
>
<span>
<span
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
List
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
App
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
<div
class="ant-layout-content"
style="background:#fff;padding:24px;margin:0;min-height:280px"
>
Content
</div>
</div>
</div>
</div>
`;