mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-17 19:00:15 +08:00
6ed0254ad5
* feat: support classNames and styles for card * feat: add lost info * docs: update context of card * feat: optimize classNames and styles code of card * test: update card test case * feat: remove headWrapper * test: correct test * feat: remove redundant snapshot * feat: update config provider for card * feat: update classNames and styles of card * feat: add warning for headStyle and bodyStyle of card * test: replace bodyStyle to styles.body in demo of flex * docs: add jsDoc about deprecated for headStyle and bodyStyle * snap: update table counts of card from 3 to 4 * docs: update version for styles and classnames of card --------- Signed-off-by: zhoulixiang <18366276315@163.com> Co-authored-by: vagusX <vagusxl@gmail.com>
34 lines
944 B
TypeScript
34 lines
944 B
TypeScript
import React from 'react';
|
|
import { Button, Card, Flex, Typography } from 'antd';
|
|
|
|
const cardStyle: React.CSSProperties = {
|
|
width: 620,
|
|
};
|
|
|
|
const imgStyle: React.CSSProperties = {
|
|
display: 'block',
|
|
width: 273,
|
|
};
|
|
|
|
const App: React.FC = () => (
|
|
<Card hoverable style={cardStyle} styles={{ body: { padding: 0, overflow: 'hidden' } }}>
|
|
<Flex justify="space-between">
|
|
<img
|
|
alt="avatar"
|
|
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
|
style={imgStyle}
|
|
/>
|
|
<Flex vertical align="flex-end" justify="space-between" style={{ padding: 32 }}>
|
|
<Typography.Title level={3}>
|
|
“antd is an enterprise-class UI design language and React UI library.”
|
|
</Typography.Title>
|
|
<Button type="primary" href="https://ant.design" target="_blank">
|
|
Get Started
|
|
</Button>
|
|
</Flex>
|
|
</Flex>
|
|
</Card>
|
|
);
|
|
|
|
export default App;
|