You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
349 lines
30 KiB
349 lines
30 KiB
1 year ago
|
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[1544],{967950:function(m,l,n){n.r(l);var _=n(502143),g=n(968521),v=n(720719),Z=n(28840),o=n(759907),a=n(828089),b=n(825673),h=n(902068),C=n(574399),f=n(863942),x=n(316073),y=n(24628),k=n(719260),E=n(956140),i=n(127179),d=n(905388),w=n(40428),P=n(606965),M=n(268696),T=n(587302),r=n(424128),O=n(249706),D=n(795127),A=n(116846),L=n(212039),I=n(73024),R=n(553913),c=n(606641),s=n(667294),t=n(370917);function u(){var p=(0,c.eL)(),e=p.texts;return(0,t.tZ)(c.dY,null,(0,t.tZ)(s.Fragment,null,(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("p",null,e[0].value),(0,t.tZ)("h2",{id:"when-to-use"},(0,t.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#when-to-use",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"When To Use"),(0,t.tZ)("p",null,e[1].value),(0,t.tZ)("h2",{id:"examples"},(0,t.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#examples",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Examples")),(0,t.tZ)(d.Z,{items:[{demo:{id:"components-card-demo-basic"},previewerProps:{title:"Basic card",filename:"components/card/demo/basic.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Card, Space } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
const App = () => (
|
||
|
|
<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>
|
||
|
|
<p>Card content</p>
|
||
|
|
</Card>
|
||
|
|
<Card
|
||
|
|
size="small"
|
||
|
|
title="Small size card"
|
||
|
|
extra={<a href="#">More</a>}
|
||
|
|
style={{
|
||
|
|
width: 300,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<p>Card content</p>
|
||
|
|
<p>Card content</p>
|
||
|
|
<p>Card content</p>
|
||
|
|
</Card>
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>A basic card containing a title, content and an extra corner content. Supports two sizes: <code>default</code> and <code>small</code>.</p>"}},{demo:{id:"components-card-demo-border-less"},previewerProps:{background:"grey",title:"No border",filename:"components/card/demo/border-less.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Card } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
const App = () => (
|
||
|
|
<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;
|
||
|
|
`,description:"<p>A borderless card on a gray background.</p>"}},{demo:{id:"components-card-demo-simple"},previewerProps:{title:"Simple card",filename:"components/card/demo/simple.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Card } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<Card
|
||
|
|
style={{
|
||
|
|
width: 300,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<p>Card content</p>
|
||
|
|
<p>Card content</p>
|
||
|
|
<p>Card content</p>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>A simple card only containing a content area.</p>"}},{demo:{id:"components-card-demo-flexible-content"},previewerProps:{title:"Customized content",filename:"components/card/demo/flexible-content.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Card } from 'antd';
|
||
|
|
const { Meta } = Card;
|
||
|
|
const App = () => (
|
||
|
|
<Card
|
||
|
|
hoverable
|
||
|
|
style={{
|
||
|
|
width: 240,
|
||
|
|
}}
|
||
|
|
cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
|
||
|
|
>
|
||
|
|
<Meta title="Europe Street beat" description="www.instagram.com" />
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>You can use <code>Card.Meta</code> to support more flexible content.</p>"}},{demo:{id:"components-card-demo-in-column"},previewerProps:{background:"grey",title:"Card in column",filename:"components/card/demo/in-column.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Card, Col, Row } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
const App = () => (
|
||
|
|
<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;
|
||
|
|
`,description:"<p>Cards usually cooperate with grid column layout in overview page.</p>"}},{demo:{id:"components-card-demo-loading"},previewerProps:{title:"Loading card",filename:"components/card/demo/loading.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
|
||
|
|
import { Avatar, Card, Skeleton, Switch } from 'antd';
|
||
|
|
import React, { useState } from 'react';
|
||
|
|
const { Meta } = Card;
|
||
|
|
const App = () => {
|
||
|
|
const [loading, setLoading] = useState(true);
|
||
|
|
const onChange = (checked) => {
|
||
|
|
setLoading(!checked);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Switch checked={!loading} onChange={onChange} />
|
||
|
|
<Card
|
||
|
|
style={{
|
||
|
|
width: 300,
|
||
|
|
marginTop: 16,
|
||
|
|
}}
|
||
|
|
loading={loading}
|
||
|
|
>
|
||
|
|
<Meta
|
||
|
|
avatar={<Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1" />}
|
||
|
|
title="Card title"
|
||
|
|
description="This is the description"
|
||
|
|
/>
|
||
|
|
</Card>
|
||
|
|
<Card
|
||
|
|
style={{
|
||
|
|
width: 300,
|
||
|
|
marginTop: 16,
|
||
|
|
}}
|
||
|
|
actions={[
|
||
|
|
<SettingOutlined key="setting" />,
|
||
|
|
<EditOutlined key="edit" />,
|
||
|
|
<EllipsisOutlined key="ellipsis" />,
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
<Skeleton loading={loading} avatar active>
|
||
|
|
<Meta
|
||
|
|
avatar={<Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2" />}
|
||
|
|
title="Card title"
|
||
|
|
description="This is the description"
|
||
|
|
/>
|
||
|
|
</Skeleton>
|
||
|
|
</Card>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Shows a loading indicator while the contents of the card is being fetched.</p>"}},{demo:{id:"components-card-demo-grid-card"},previewerProps:{title:"Grid card",filename:"components/card/demo/grid-card.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Card } from 'antd';
|
||
|
|
const gridStyle = {
|
||
|
|
width: '25%',
|
||
|
|
textAlign: 'center',
|
||
|
|
};
|
||
|
|
const App = () => (
|
||
|
|
<Card title="Card Title">
|
||
|
|
<Card.Grid style={gridStyle}>Content</Card.Grid>
|
||
|
|
<Card.Grid hoverable={false} style={gridStyle}>
|
||
|
|
Content
|
||
|
|
</Card.Grid>
|
||
|
|
<Card.Grid style={gridStyle}>Content</Card.Grid>
|
||
|
|
<Card.Grid style={gridStyle}>Content</Card.Grid>
|
||
|
|
<Card.Grid style={gridStyle}>Content</Card.Grid>
|
||
|
|
<Card.Grid style={gridStyle}>Content</Card.Grid>
|
||
|
|
<Card.Grid style={gridStyle}>Content</Card.Grid>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Grid style card content.</p>"}},{demo:{id:"components-card-demo-inner"},previewerProps:{title:"Inner card",filename:"components/card/demo/inner.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Card } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<Card title="Card title">
|
||
|
|
<Card type="inner" title="Inner Card title" extra={<a href="#">More</a>}>
|
||
|
|
Inner Card content
|
||
|
|
</Card>
|
||
|
|
<Card
|
||
|
|
style={{
|
||
|
|
marginTop: 16,
|
||
|
|
}}
|
||
|
|
type="inner"
|
||
|
|
title="Inner Card title"
|
||
|
|
extra={<a href="#">More</a>}
|
||
|
|
>
|
||
|
|
Inner Card content
|
||
|
|
</Card>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>It can be placed inside the ordinary card to display the information of the multilevel structure.</p>"}},{demo:{id:"components-card-demo-tabs"},previewerProps:{title:"With tabs",filename:"components/card/demo/tabs.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Card } from 'antd';
|
||
|
|
import React, { useState } from 'react';
|
||
|
|
const tabList = [
|
||
|
|
{
|
||
|
|
key: 'tab1',
|
||
|
|
tab: 'tab1',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 'tab2',
|
||
|
|
tab: 'tab2',
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const contentList = {
|
||
|
|
tab1: <p>content1</p>,
|
||
|
|
tab2: <p>content2</p>,
|
||
|
|
};
|
||
|
|
const tabListNoTitle = [
|
||
|
|
{
|
||
|
|
key: 'article',
|
||
|
|
label: 'article',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 'app',
|
||
|
|
label: 'app',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 'project',
|
||
|
|
label: 'project',
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const contentListNoTitle = {
|
||
|
|
article: <p>article content</p>,
|
||
|
|
app: <p>app content</p>,
|
||
|
|
project: <p>project content</p>,
|
||
|
|
};
|
||
|
|
const App = () => {
|
||
|
|
const [activeTabKey1, setActiveTabKey1] = useState('tab1');
|
||
|
|
const [activeTabKey2, setActiveTabKey2] = useState('app');
|
||
|
|
const onTab1Change = (key) => {
|
||
|
|
setActiveTabKey1(key);
|
||
|
|
};
|
||
|
|
const onTab2Change = (key) => {
|
||
|
|
setActiveTabKey2(key);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Card
|
||
|
|
style={{
|
||
|
|
width: '100%',
|
||
|
|
}}
|
||
|
|
title="Card title"
|
||
|
|
extra={<a href="#">More</a>}
|
||
|
|
tabList={tabList}
|
||
|
|
activeTabKey={activeTabKey1}
|
||
|
|
onTabChange={onTab1Change}
|
||
|
|
>
|
||
|
|
{contentList[activeTabKey1]}
|
||
|
|
</Card>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<Card
|
||
|
|
style={{
|
||
|
|
width: '100%',
|
||
|
|
}}
|
||
|
|
tabList={tabListNoTitle}
|
||
|
|
activeTabKey={activeTabKey2}
|
||
|
|
tabBarExtraContent={<a href="#">More</a>}
|
||
|
|
onTabChange={onTab2Change}
|
||
|
|
>
|
||
|
|
{contentListNoTitle[activeTabKey2]}
|
||
|
|
</Card>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>More content can be hosted.</p>"}},{demo:{id:"components-card-demo-meta"},previewerProps:{title:"Support more content configuration",filename:"components/card/demo/meta.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
|
||
|
|
import { Avatar, Card } from 'antd';
|
||
|
|
const { Meta } = Card;
|
||
|
|
const App = () => (
|
||
|
|
<Card
|
||
|
|
style={{
|
||
|
|
width: 300,
|
||
|
|
}}
|
||
|
|
cover={
|
||
|
|
<img
|
||
|
|
alt="example"
|
||
|
|
src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
|
||
|
|
/>
|
||
|
|
}
|
||
|
|
actions={[
|
||
|
|
<SettingOutlined key="setting" />,
|
||
|
|
<EditOutlined key="edit" />,
|
||
|
|
<EllipsisOutlined key="ellipsis" />,
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
<Meta
|
||
|
|
avatar={<Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel" />}
|
||
|
|
title="Card title"
|
||
|
|
description="This is the description"
|
||
|
|
/>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>A Card that supports <code>cover</code>, <code>avatar</code>, <code>title</code> and <code>description</code>.</p>"}},{demo:{id:"components-card-demo-component-token"},previewerProps:{debug:!0,title:"Component Token",filename:"components/card/demo/component-token.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
|
||
|
|
import { Card, ConfigProvider } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
export default () => (
|
||
|
|
<ConfigProvider
|
||
|
|
theme={{
|
||
|
|
components: {
|
||
|
|
Card: {
|
||
|
|
headerBg: '#e6f4ff',
|
||
|
|
headerFontSize: 20,
|
||
|
|
headerFontSizeSM: 20,
|
||
|
|
headerHeight: 60,
|
||
|
|
headerHeightSM: 60,
|
||
|
|
actionsBg: '#e6f4ff',
|
||
|
|
actionsLiMargin: \`2px 0\`,
|
||
|
|
tabsMarginBottom: 0,
|
||
|
|
extraColor: 'rgba(0,0,0,0.25)',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Card
|
||
|
|
title="Card title"
|
||
|
|
actions={[
|
||
|
|
<SettingOutlined key="setting" />,
|
||
|
|
<EditOutlined key="edit" />,
|
||
|
|
<EllipsisOutlined key="ellipsis" />,
|
||
|
|
]}
|
||
|
|
extra="More"
|
||
|
|
tabList={[
|
||
|
|
{
|
||
|
|
key: 'tab1',
|
||
|
|
label: 'tab1',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 'tab2',
|
||
|
|
label: 'tab2',
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
<p>Card content</p>
|
||
|
|
<p>Card content</p>
|
||
|
|
<p>Card content</p>
|
||
|
|
</Card>
|
||
|
|
<Card
|
||
|
|
size="small"
|
||
|
|
title="Small size card"
|
||
|
|
extra={<a href="#">More</a>}
|
||
|
|
style={{
|
||
|
|
width: 300,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<p>Card content</p>
|
||
|
|
<p>Card content</p>
|
||
|
|
<p>Card content</p>
|
||
|
|
</Card>
|
||
|
|
</ConfigProvider>
|
||
|
|
);
|
||
|
|
`,description:"<p>Component Token Debug.</p>"}}]}),(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("h2",{id:"api"},(0,t.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"API"),(0,t.tZ)(o.Z,{lang:"jsx"},e[2].value),(0,t.tZ)("h3",{id:"card"},(0,t.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#card",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Card"),(0,t.tZ)(a.Z,{className:"component-api-table"},(0,t.tZ)("thead",null,(0,t.tZ)("tr",null,(0,t.tZ)("th",null,e[3].value),(0,t.tZ)("th",null,e[4].value),(0,t.tZ)("th",null,e[5].value),(0,t.tZ)("th",null,e[6].value),(0,t.tZ)("th",null,e[7].value))),(0,t.tZ)("tbody",null,(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[8].value),(0,t.tZ)("td",null,e[9].value),(0,t.tZ)("td",null,e[10].value),(0,t.tZ)("td",null,e[11].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[12].value),(0,t.tZ)("td",null,e[13].value),(0,t.tZ)("td",null,e[14].value),(0,t.tZ)("td",null,e[15].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[16].value),(0,t.tZ)("td",null,e[17].value),(0,t.tZ)("td",null,e[18].value),(0,t.tZ)("td",null,e[19].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[20].value),(0,t.tZ)("td",null,e[21].value),(0,t.tZ)("td",null,e[22].value),(0,t.tZ)("td",null,e[23].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[24].value),(0,t.tZ)("td",null,e[25].value),(0,t.tZ)("td",null,e[26].value),(0,t.tZ)("td",null,e[27].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[28].value),(0,t.tZ)("td",null,e[29].value,(0,t.tZ)("code",null,e[30].value),e[31].value),(0,t.tZ)("td",null,e[32].value),(0,t.tZ)("td",null,e[33].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[34].value),(0,t.tZ)("td",null,e[35].value),(0,t.tZ)("td",null,e[36].value),(0,t.tZ)("td",null,e[37].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[38].value),(0,t.tZ)("td",null,e[39].value),(0,t.tZ)("td",null,e[40].value),(0,t.tZ)("td",null,e[41].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[42].value),(0,t.tZ)("td",null,e[43].value),(0,t.tZ)("td",null,e[44].value),(0,t.tZ)("td",null,e[45].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[46].value),(0,t.tZ)("td",null,e[47].value),(0,t.tZ)("td",null,e[48].value),(0,t.tZ)("td",null,e[49].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[50].value),(0,t.tZ)("td",null,e[51].value),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[52].value),e[53].value,(0,t.tZ)("code",null,e[54].value)),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[55].value)),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[56].value),(0,t.tZ)("td",null,e[57].value),(0,t.tZ)("td",null,e[58].value),(0,t.tZ)("td",null,e[59].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[60].value),(0,t.tZ)("td",null,e[61].value),(0,t.tZ)("td",null,(0,t.tZ)(r.Z,{to:"/components/tabs#tabitemtype",sourceType:"Link"},e[62].value),e[63].value),(0,t.tZ)("td",null,e[64].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[65].value),(0,t.tZ)("td",null,(0,t.tZ)(r.Z,{to:"/components/tabs/#tabs",sourceType:"Link"},e[66].value)),(0,t.tZ)("td",null,e[67].value),(0,t.tZ)("td",null,e[68].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[69].value),(0,t.tZ)("td",null,e[70].value),(0,t.tZ)("td",null,e[71].value),(0,t.tZ)("td",null,e[72].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[73].value),(0,t.tZ)("td",null,e[74].value,(0,t.tZ)("code",null,e[75].value),e[76].value),(0,t.tZ)("td",null,e[77].value),(0,t.tZ)("td",null,e[78].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[79].value),(0,t.tZ)("td",null,e[80].value),(0,t.tZ)("td",null,e[81].value),(0,t.tZ)("td",null,e[82].value),(0,t.tZ)("td",null)))),(0,t.tZ)("h3",{id:"cardgrid"},(0,t.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#cardgrid",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Card.Grid"),(0,t.tZ)(a.Z,{className:"component
|