test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 19:19:26 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

chore: update demo style (#40336)

Browse Source 
* fix: update demo style

* update snap
This commit is contained in:
lijianan 2023-01-19 22:36:27 +08:00 committed by GitHub
parent 4cace761da
commit c054a2bb80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 316 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

234
components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1,126 +1,160 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/layout/demo/basic.tsx extend context correctly 1`] = `
Array [
<section
class="ant-layout"
<div
class="ant-space ant-space-vertical"
style="width:100%"
>
<div
class="ant-space-item"
style="margin-bottom:0"
>
<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>
</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>
</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>
</aside>
<section
class="ant-layout"
>
<header
class="ant-layout-header"
style="text-align:center;color:#fff;height:64px;padding-inline:50px;line-height:64px;background-color:#7dbcea"
>
Header
</header>
<main
class="ant-layout-content"
style="text-align:center;min-height:120px;line-height:120px;color:#fff;background-color:#108ee9"
>
Content
</main>
<footer
class="ant-layout-footer"
style="text-align:center;color:#fff;background-color:#7dbcea"
>
Footer
</footer>
</section>
</section>,
]
</div>
<div
class="ant-space-item"
style="margin-bottom:0"
>
<section
class="ant-layout"
>
<header
class="ant-layout-header"
style="text-align:center;color:#fff;height:64px;padding-inline:50px;line-height:64px;background-color:#7dbcea"
>
Header
</header>
<section
class="ant-layout"
>
<aside
class="ant-layout-sider ant-layout-sider-dark"
style="text-align:center;line-height:120px;color:#fff;background-color:#3ba0e9;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div
class="ant-layout-sider-children"
>
Sider
</div>
</aside>
<main
class="ant-layout-content"
style="text-align:center;min-height:120px;line-height:120px;color:#fff;background-color:#108ee9"
>
Content
</main>
</section>
<footer
class="ant-layout-footer"
style="text-align:center;color:#fff;background-color:#7dbcea"
>
Footer
</footer>
</section>
</div>
<div
class="ant-space-item"
style="margin-bottom:0"
>
<section
class="ant-layout"
>
<header
class="ant-layout-header"
style="text-align:center;color:#fff;height:64px;padding-inline:50px;line-height:64px;background-color:#7dbcea"
>
Header
</header>
<section
class="ant-layout"
>
<main
class="ant-layout-content"
style="text-align:center;min-height:120px;line-height:120px;color:#fff;background-color:#108ee9"
>
Content
</main>
<aside
class="ant-layout-sider ant-layout-sider-dark"
style="text-align:center;line-height:120px;color:#fff;background-color:#3ba0e9;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div
class="ant-layout-sider-children"
>
Sider
</div>
</aside>
</section>
<footer
class="ant-layout-footer"
style="text-align:center;color:#fff;background-color:#7dbcea"
>
Footer
</footer>
</section>
</div>
<div
class="ant-space-item"
>
<section
class="ant-layout"
>
<aside
class="ant-layout-sider ant-layout-sider-dark"
style="text-align:center;line-height:120px;color:#fff;background-color:#3ba0e9;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div
class="ant-layout-sider-children"
>
Sider
</div>
</aside>
<section
class="ant-layout"
>
<header
class="ant-layout-header"
style="text-align:center;color:#fff;height:64px;padding-inline:50px;line-height:64px;background-color:#7dbcea"
>
Header
</header>
<main
class="ant-layout-content"
style="text-align:center;min-height:120px;line-height:120px;color:#fff;background-color:#108ee9"
>
Content
</main>
<footer
class="ant-layout-footer"
style="text-align:center;color:#fff;background-color:#7dbcea"
>
Footer
</footer>
</section>
</section>
</div>
</div>
`;
exports[`renders ./components/layout/demo/custom-trigger.tsx extend context correctly 1`] = `

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

@ -1,126 +1,160 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/layout/demo/basic.tsx correctly 1`] = `
Array [
<section
class="ant-layout"
<div
class="ant-space ant-space-vertical"
style="width:100%"
>
<div
class="ant-space-item"
style="margin-bottom:0"
>
<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>
</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>
</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>
</aside>
<section
class="ant-layout"
>
<header
class="ant-layout-header"
style="text-align:center;color:#fff;height:64px;padding-inline:50px;line-height:64px;background-color:#7dbcea"
>
Header
</header>
<main
class="ant-layout-content"
style="text-align:center;min-height:120px;line-height:120px;color:#fff;background-color:#108ee9"
>
Content
</main>
<footer
class="ant-layout-footer"
style="text-align:center;color:#fff;background-color:#7dbcea"
>
Footer
</footer>
</section>
</section>,
]
</div>
<div
class="ant-space-item"
style="margin-bottom:0"
>
<section
class="ant-layout"
>
<header
class="ant-layout-header"
style="text-align:center;color:#fff;height:64px;padding-inline:50px;line-height:64px;background-color:#7dbcea"
>
Header
</header>
<section
class="ant-layout"
>
<aside
class="ant-layout-sider ant-layout-sider-dark"
style="text-align:center;line-height:120px;color:#fff;background-color:#3ba0e9;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div
class="ant-layout-sider-children"
>
Sider
</div>
</aside>
<main
class="ant-layout-content"
style="text-align:center;min-height:120px;line-height:120px;color:#fff;background-color:#108ee9"
>
Content
</main>
</section>
<footer
class="ant-layout-footer"
style="text-align:center;color:#fff;background-color:#7dbcea"
>
Footer
</footer>
</section>
</div>
<div
class="ant-space-item"
style="margin-bottom:0"
>
<section
class="ant-layout"
>
<header
class="ant-layout-header"
style="text-align:center;color:#fff;height:64px;padding-inline:50px;line-height:64px;background-color:#7dbcea"
>
Header
</header>
<section
class="ant-layout"
>
<main
class="ant-layout-content"
style="text-align:center;min-height:120px;line-height:120px;color:#fff;background-color:#108ee9"
>
Content
</main>
<aside
class="ant-layout-sider ant-layout-sider-dark"
style="text-align:center;line-height:120px;color:#fff;background-color:#3ba0e9;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div
class="ant-layout-sider-children"
>
Sider
</div>
</aside>
</section>
<footer
class="ant-layout-footer"
style="text-align:center;color:#fff;background-color:#7dbcea"
>
Footer
</footer>
</section>
</div>
<div
class="ant-space-item"
>
<section
class="ant-layout"
>
<aside
class="ant-layout-sider ant-layout-sider-dark"
style="text-align:center;line-height:120px;color:#fff;background-color:#3ba0e9;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
>
<div
class="ant-layout-sider-children"
>
Sider
</div>
</aside>
<section
class="ant-layout"
>
<header
class="ant-layout-header"
style="text-align:center;color:#fff;height:64px;padding-inline:50px;line-height:64px;background-color:#7dbcea"
>
Header
</header>
<main
class="ant-layout-content"
style="text-align:center;min-height:120px;line-height:120px;color:#fff;background-color:#108ee9"
>
Content
</main>
<footer
class="ant-layout-footer"
style="text-align:center;color:#fff;background-color:#7dbcea"
>
Footer
</footer>
</section>
</section>
</div>
</div>
`;
exports[`renders ./components/layout/demo/custom-trigger.tsx correctly 1`] = `

69
components/layout/demo/basic.tsx
View File

@ -1,43 +1,70 @@
import React from 'react';
import { Layout } from 'antd';
import { Layout, Space } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
const headerStyle: React.CSSProperties = {
textAlign: 'center',
color: '#fff',
height: 64,
paddingInline: 50,
lineHeight: '64px',
backgroundColor: '#7dbcea',
};
const contentStyle: React.CSSProperties = {
textAlign: 'center',
minHeight: 120,
lineHeight: '120px',
color: '#fff',
backgroundColor: '#108ee9',
};
const siderStyle: React.CSSProperties = {
textAlign: 'center',
lineHeight: '120px',
color: '#fff',
backgroundColor: '#3ba0e9',
};
const footerStyle: React.CSSProperties = {
textAlign: 'center',
color: '#fff',
backgroundColor: '#7dbcea',
};
const App: React.FC = () => (
<>
<Space direction="vertical" style={{ width: '100%' }} size={[0, 48]}>
<Layout>
<Header>Header</Header>
<Content>Content</Content>
<Footer>Footer</Footer>
<Header style={headerStyle}>Header</Header>
<Content style={contentStyle}>Content</Content>
<Footer style={footerStyle}>Footer</Footer>
</Layout>
<Layout>
<Header>Header</Header>
<Header style={headerStyle}>Header</Header>
<Layout>
<Sider>Sider</Sider>
<Content>Content</Content>
<Sider style={siderStyle}>Sider</Sider>
<Content style={contentStyle}>Content</Content>
</Layout>
<Footer>Footer</Footer>
<Footer style={footerStyle}>Footer</Footer>
</Layout>
<Layout>
<Header>Header</Header>
<Header style={headerStyle}>Header</Header>
<Layout>
<Content>Content</Content>
<Sider>Sider</Sider>
<Content style={contentStyle}>Content</Content>
<Sider style={siderStyle}>Sider</Sider>
</Layout>
<Footer>Footer</Footer>
<Footer style={footerStyle}>Footer</Footer>
</Layout>
<Layout>
<Sider>Sider</Sider>
<Sider style={siderStyle}>Sider</Sider>
<Layout>
<Header>Header</Header>
<Content>Content</Content>
<Footer>Footer</Footer>
<Header style={headerStyle}>Header</Header>
<Content style={contentStyle}>Content</Content>
<Footer style={footerStyle}>Footer</Footer>
</Layout>
</Layout>
</>
</Space>
);
export default App;