mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

demo: update Card demo (#40357)

Browse Source
This commit is contained in:
lijianan 2023-01-21 12:39:02 +08:00 committed by GitHub
parent b6c32f6a58
commit ff0f0704e7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 313 additions and 315 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/calendar/demo/card.tsx
View File

@ -1,16 +1,16 @@
import React from 'react';
import type { Dayjs } from 'dayjs';
import { Calendar, theme } from 'antd';
import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
import type { Dayjs } from 'dayjs';
import React from 'react';
const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
console.log(value.format('YYYY-MM-DD'), mode);
};
const App: React.FC = () => {
const { token } = theme.useToken();
const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
console.log(value.format('YYYY-MM-DD'), mode);
};
const wrapperStyle = {
const wrapperStyle: React.CSSProperties = {
width: 300,
border: `1px solid ${token.colorBorderSecondary}`,
borderRadius: token.borderRadiusLG,

273
components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1,124 +1,131 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/card/demo/basic.tsx extend context correctly 1`] = `
Array [
<div
class="ant-space ant-space-vertical"
>
<div
class="ant-card ant-card-bordered"
style="width:300px"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered"
style="width:300px"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Default size card
</div>
<div
class="ant-card-extra"
>
<a
href="#"
<div
class="ant-card-head-title"
>
More
</a>
Default size card
</div>
<div
class="ant-card-extra"
>
<a
href="#"
>
More
</a>
</div>
</div>
</div>
<div
class="ant-card-body"
>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
</div>
</div>
<div
class="ant-card-body"
>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
</div>
</div>,
</div>
<div
class="ant-card ant-card-bordered ant-card-small"
style="width:300px"
class="ant-space-item"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
style="width:300px"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Small size card
</div>
<div
class="ant-card-extra"
>
<a
href="#"
<div
class="ant-card-head-title"
>
More
</a>
Small size card
</div>
<div
class="ant-card-extra"
>
<a
href="#"
>
More
</a>
</div>
</div>
</div>
<div
class="ant-card-body"
>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
</div>
</div>
<div
class="ant-card-body"
>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
</div>
</div>,
]
</div>
</div>
`;
exports[`renders ./components/card/demo/border-less.tsx extend context correctly 1`] = `
<div
class="site-card-border-less-wrapper"
class="ant-card"
style="width:300px"
>
<div
class="ant-card"
style="width:300px"
class="ant-card-head"
>
<div
class="ant-card-head"
class="ant-card-head-wrapper"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head-title"
>
<div
class="ant-card-head-title"
>
Card title
</div>
Card title
</div>
</div>
<div
class="ant-card-body"
>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
</div>
</div>
<div
class="ant-card-body"
>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
</div>
</div>
`;
@ -229,92 +236,88 @@ exports[`renders ./components/card/demo/grid-card.tsx extend context correctly 1
exports[`renders ./components/card/demo/in-column.tsx extend context correctly 1`] = `
<div
class="site-card-wrapper"
class="ant-row"
style="margin-left:-8px;margin-right:-8px"
>
<div
class="ant-row"
style="margin-left:-8px;margin-right:-8px"
class="ant-col ant-col-8"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-col ant-col-8"
style="padding-left:8px;padding-right:8px"
class="ant-card"
>
<div
class="ant-card"
class="ant-card-head"
>
<div
class="ant-card-head"
class="ant-card-head-wrapper"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head-title"
>
<div
class="ant-card-head-title"
>
Card title
</div>
Card title
</div>
</div>
<div
class="ant-card-body"
>
Card content
</div>
</div>
</div>
<div
class="ant-col ant-col-8"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-card"
class="ant-card-body"
>
<div
class="ant-card-head"
>
<div
class="ant-card-head-wrapper"
>
<div
class="ant-card-head-title"
>
Card title
</div>
</div>
</div>
<div
class="ant-card-body"
>
Card content
</div>
Card content
</div>
</div>
</div>
<div
class="ant-col ant-col-8"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-col ant-col-8"
style="padding-left:8px;padding-right:8px"
class="ant-card"
>
<div
class="ant-card"
class="ant-card-head"
>
<div
class="ant-card-head"
class="ant-card-head-wrapper"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head-title"
>
<div
class="ant-card-head-title"
>
Card title
</div>
Card title
</div>
</div>
</div>
<div
class="ant-card-body"
>
Card content
</div>
</div>
</div>
<div
class="ant-col ant-col-8"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-card"
>
<div
class="ant-card-head"
>
<div
class="ant-card-body"
class="ant-card-head-wrapper"
>
Card content
<div
class="ant-card-head-title"
>
Card title
</div>
</div>
</div>
<div
class="ant-card-body"
>
Card content
</div>
</div>
</div>
</div>

273
components/card/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -1,124 +1,131 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/card/demo/basic.tsx correctly 1`] = `
Array [
<div
class="ant-space ant-space-vertical"
>
<div
class="ant-card ant-card-bordered"
style="width:300px"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered"
style="width:300px"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Default size card
</div>
<div
class="ant-card-extra"
>
<a
href="#"
<div
class="ant-card-head-title"
>
More
</a>
Default size card
</div>
<div
class="ant-card-extra"
>
<a
href="#"
>
More
</a>
</div>
</div>
</div>
<div
class="ant-card-body"
>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
</div>
</div>
<div
class="ant-card-body"
>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
</div>
</div>,
</div>
<div
class="ant-card ant-card-bordered ant-card-small"
style="width:300px"
class="ant-space-item"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
style="width:300px"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Small size card
</div>
<div
class="ant-card-extra"
>
<a
href="#"
<div
class="ant-card-head-title"
>
More
</a>
Small size card
</div>
<div
class="ant-card-extra"
>
<a
href="#"
>
More
</a>
</div>
</div>
</div>
<div
class="ant-card-body"
>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
</div>
</div>
<div
class="ant-card-body"
>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
</div>
</div>,
]
</div>
</div>
`;
exports[`renders ./components/card/demo/border-less.tsx correctly 1`] = `
<div
class="site-card-border-less-wrapper"
class="ant-card"
style="width:300px"
>
<div
class="ant-card"
style="width:300px"
class="ant-card-head"
>
<div
class="ant-card-head"
class="ant-card-head-wrapper"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head-title"
>
<div
class="ant-card-head-title"
>
Card title
</div>
Card title
</div>
</div>
<div
class="ant-card-body"
>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
</div>
</div>
<div
class="ant-card-body"
>
<p>
Card content
</p>
<p>
Card content
</p>
<p>
Card content
</p>
</div>
</div>
`;
@ -229,92 +236,88 @@ exports[`renders ./components/card/demo/grid-card.tsx correctly 1`] = `
exports[`renders ./components/card/demo/in-column.tsx correctly 1`] = `
<div
class="site-card-wrapper"
class="ant-row"
style="margin-left:-8px;margin-right:-8px"
>
<div
class="ant-row"
style="margin-left:-8px;margin-right:-8px"
class="ant-col ant-col-8"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-col ant-col-8"
style="padding-left:8px;padding-right:8px"
class="ant-card"
>
<div
class="ant-card"
class="ant-card-head"
>
<div
class="ant-card-head"
class="ant-card-head-wrapper"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head-title"
>
<div
class="ant-card-head-title"
>
Card title
</div>
Card title
</div>
</div>
<div
class="ant-card-body"
>
Card content
</div>
</div>
</div>
<div
class="ant-col ant-col-8"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-card"
class="ant-card-body"
>
<div
class="ant-card-head"
>
<div
class="ant-card-head-wrapper"
>
<div
class="ant-card-head-title"
>
Card title
</div>
</div>
</div>
<div
class="ant-card-body"
>
Card content
</div>
Card content
</div>
</div>
</div>
<div
class="ant-col ant-col-8"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-col ant-col-8"
style="padding-left:8px;padding-right:8px"
class="ant-card"
>
<div
class="ant-card"
class="ant-card-head"
>
<div
class="ant-card-head"
class="ant-card-head-wrapper"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head-title"
>
<div
class="ant-card-head-title"
>
Card title
</div>
Card title
</div>
</div>
</div>
<div
class="ant-card-body"
>
Card content
</div>
</div>
</div>
<div
class="ant-col ant-col-8"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-card"
>
<div
class="ant-card-head"
>
<div
class="ant-card-body"
class="ant-card-head-wrapper"
>
Card content
<div
class="ant-card-head-title"
>
Card title
</div>
</div>
</div>
<div
class="ant-card-body"
>
Card content
</div>
</div>
</div>
</div>

6
components/card/demo/basic.tsx
View File

@ -1,8 +1,8 @@
import { Card, Space } from 'antd';
import React from 'react';
import { Card } from 'antd';
const App: React.FC = () => (
<>
<Space direction="vertical" size={16}>
<Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
<p>Card content</p>
<p>Card content</p>
@ -13,7 +13,7 @@ const App: React.FC = () => (
<p>Card content</p>
<p>Card content</p>
</Card>
</>
</Space>
);
export default App;

14
components/card/demo/border-less.tsx
View File

@ -1,14 +1,12 @@
import React from 'react';
import { Card } from 'antd';
import React from 'react';
const App: React.FC = () => (
<div className="site-card-border-less-wrapper">
<Card title="Card title" bordered={false} style={{ width: 300 }}>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
</div>
<Card title="Card title" bordered={false} style={{ width: 300 }}>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
);
export default App;

38
components/card/demo/in-column.tsx
View File

@ -1,26 +1,24 @@
import React from 'react';
import { Card, Col, Row } from 'antd';
import React from 'react';
const App: React.FC = () => (
<div className="site-card-wrapper">
<Row gutter={16}>
<Col span={8}>
<Card title="Card title" bordered={false}>
Card content
</Card>
</Col>
<Col span={8}>
<Card title="Card title" bordered={false}>
Card content
</Card>
</Col>
<Col span={8}>
<Card title="Card title" bordered={false}>
Card content
</Card>
</Col>
</Row>
</div>
<Row gutter={16}>
<Col span={8}>
<Card title="Card title" bordered={false}>
Card content
</Card>
</Col>
<Col span={8}>
<Card title="Card title" bordered={false}>
Card content
</Card>
</Col>
<Col span={8}>
<Card title="Card title" bordered={false}>
Card content
</Card>
</Col>
</Row>
);
export default App;

10
components/card/demo/tabs.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { Card } from 'antd';
import React, { useState } from 'react';
const tabList = [
{
@ -57,9 +57,7 @@ const App: React.FC = () => {
extra={<a href="#">More</a>}
tabList={tabList}
activeTabKey={activeTabKey1}
onTabChange={(key) => {
onTab1Change(key);
}}
onTabChange={onTab1Change}
>
{contentList[activeTabKey1]}
</Card>
@ -70,9 +68,7 @@ const App: React.FC = () => {
tabList={tabListNoTitle}
activeTabKey={activeTabKey2}
tabBarExtraContent={<a href="#">More</a>}
onTabChange={(key) => {
onTab2Change(key);
}}
onTabChange={onTab2Change}
>
{contentListNoTitle[activeTabKey2]}
</Card>