antd-components-mcp

## Empty 组件示例 ### 基本 简单的展示。 ```tsx import React from 'react'; import { Empty } from 'antd'; const App: React.FC = () => <Empty />; export default App; ``` ### 选择图片 可以通过设置 `image` 为 `Empty.PRESENTED_IMAGE_SIMPLE` 选择另一种风格的图片。 ```tsx import React from 'react'; import { Empty } from 'antd'; const App: React.FC = () => <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />; export default App; ``` ### 自定义 自定义图片链接、图片大小、描述、附属内容。 ```tsx import React from 'react'; import { Button, Empty, Typography } from 'antd'; const App: React.FC = () => ( <Empty image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg" styles={{ image: { height: 60 } }} description={ <Typography.Text> Customize <a href="#API">Description</a> </Typography.Text> } > <Button type="primary">Create Now</Button> </Empty> ); export default App; ``` ### 全局化配置 自定义全局组件的 Empty 样式。 ```tsx import React, { useState } from 'react'; import { SmileOutlined } from '@ant-design/icons'; import { Cascader, ConfigProvider, Divider, List, Select, Space, Switch, Table, Transfer, TreeSelect, } from 'antd'; const customizeRenderEmpty = () => ( <div style={{ textAlign: 'center' }}> <SmileOutlined style={{ fontSize: 20 }} /> <p>Data Not Found</p> </div> ); const style: React.CSSProperties = { width: 200 }; const App: React.FC = () => { const [customize, setCustomize] = useState(true); return ( <> <Switch unCheckedChildren="default" checkedChildren="customize" checked={customize} onChange={setCustomize} /> <Divider /> <ConfigProvider renderEmpty={customize ? customizeRenderEmpty : undefined}> <Space vertical style={{ width: '100%' }}> <h4>Select</h4> <Select style={style} /> <h4>TreeSelect</h4> <TreeSelect style={style} treeData={[]} /> <h4>Cascader</h4> <Cascader style={style} options={[]} showSearch /> <h4>Transfer</h4> <Transfer /> <h4>Table</h4> <Table style={{ marginTop: 8 }} columns={[ { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Age', dataIndex: 'age', key: 'age' }, ]} /> <h4>List</h4> <List /> </Space> </ConfigProvider> </> ); }; export default App; ``` ### 自定义语义结构的样式和类 通过 `classNames` 和 `styles` 传入对象/函数可以自定义 Empty 的[语义化结构](#semantic-dom)样式。 ```tsx import React from 'react'; import { Button, Empty, Flex } from 'antd'; import { createStyles } from 'antd-style'; import type { EmptyProps } from '..'; const emptySharedProps: EmptyProps = { image: Empty.PRESENTED_IMAGE_SIMPLE, children: <Button type="primary">Create Now</Button>, }; const useStyle = createStyles(({ css }) => ({ root: css` border: 1px dashed #ccc; padding: 16px; `, })); const stylesObject: EmptyProps['styles'] = { root: { backgroundColor: '#f5f5f5', borderRadius: '8px' }, image: { filter: 'grayscale(100%)' }, description: { color: '#1890ff', fontWeight: 'bold' }, footer: { marginTop: '16px' }, }; const stylesFn: EmptyProps['styles'] = ({ props }) => { if (props.description) { return { root: { backgroundColor: '#e6f7ff', border: '1px solid #91d5ff' }, description: { color: '#1890ff', fontWeight: 'bold' }, image: { filter: 'hue-rotate(180deg)' }, } satisfies EmptyProps['styles']; } return {}; }; const App: React.FC = () => { const { styles } = useStyle(); const classNames: EmptyProps['classNames'] = { root: styles.root, }; return ( <Flex vertical gap="middle"> <Empty {...emptySharedProps} description="Object styles" classNames={classNames} styles={stylesObject} /> <Empty {...emptySharedProps} description="Function styles" classNames={classNames} styles={stylesFn} /> </Flex> ); }; export default App; ``` ### 无描述 无描述展示。 ```tsx import React from 'react'; import { Empty } from 'antd'; const App: React.FC = () => <Empty description={false} />; export default App; ```