2022-11-22 22:52:40 +08:00
|
|
|
import React, { useState } from 'react';
|
2024-04-08 14:04:08 +08:00
|
|
|
import { CopyOutlined, DownloadOutlined, SettingOutlined } from '@ant-design/icons';
|
2022-11-22 22:52:40 +08:00
|
|
|
import {
|
2024-04-08 14:04:08 +08:00
|
|
|
Button,
|
2022-11-22 22:52:40 +08:00
|
|
|
Cascader,
|
2024-04-08 14:04:08 +08:00
|
|
|
DatePicker,
|
|
|
|
Divider,
|
|
|
|
Drawer,
|
|
|
|
Dropdown,
|
2022-11-22 22:52:40 +08:00
|
|
|
Input,
|
2024-04-08 14:04:08 +08:00
|
|
|
InputNumber,
|
|
|
|
Modal,
|
|
|
|
Popover,
|
2022-11-22 22:52:40 +08:00
|
|
|
Select,
|
|
|
|
Space,
|
|
|
|
Tooltip,
|
|
|
|
} from 'antd';
|
2022-11-09 12:28:04 +08:00
|
|
|
|
|
|
|
const { Option } = Select;
|
|
|
|
|
|
|
|
const selectBefore = (
|
|
|
|
<Select defaultValue="http://" className="select-before">
|
|
|
|
<Option value="http://">http://</Option>
|
|
|
|
<Option value="https://">https://</Option>
|
|
|
|
</Select>
|
|
|
|
);
|
|
|
|
const selectAfter = (
|
|
|
|
<Select defaultValue=".com" className="select-after">
|
|
|
|
<Option value=".com">.com</Option>
|
|
|
|
<Option value=".jp">.jp</Option>
|
|
|
|
<Option value=".cn">.cn</Option>
|
|
|
|
<Option value=".org">.org</Option>
|
|
|
|
</Select>
|
|
|
|
);
|
|
|
|
|
2022-11-22 22:52:40 +08:00
|
|
|
const App: React.FC = () => {
|
|
|
|
const [showModal, setShowModal] = useState(false);
|
|
|
|
const [showDrawer, setShowDrawer] = useState(false);
|
|
|
|
return (
|
|
|
|
<Space direction="vertical">
|
|
|
|
<Space.Compact block>
|
|
|
|
<Button>default Button</Button>
|
|
|
|
<Button danger>danger Button</Button>
|
|
|
|
<Button type="dashed">dashed Button</Button>
|
|
|
|
<Button type="text">text Button</Button>
|
|
|
|
<Button type="link">Link Button</Button>
|
|
|
|
<Tooltip title="Tooltip">
|
|
|
|
<Button icon={<DownloadOutlined />} disabled />
|
|
|
|
</Tooltip>
|
|
|
|
</Space.Compact>
|
|
|
|
<br />
|
|
|
|
<Space.Compact>
|
|
|
|
<Button>Prefix</Button>
|
|
|
|
<Input addonBefore="http://" addonAfter=".com" defaultValue="mysite" />
|
|
|
|
<Button type="primary">Submit</Button>
|
|
|
|
</Space.Compact>
|
|
|
|
<Space.Compact>
|
|
|
|
<Input placeholder="prefix" />
|
|
|
|
<Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
|
|
|
|
<Button icon={<CopyOutlined />} />
|
|
|
|
</Space.Compact>
|
|
|
|
<Space.Compact>
|
|
|
|
<Input.Search />
|
|
|
|
<Input.Search />
|
|
|
|
<Button icon={<CopyOutlined />} />
|
|
|
|
</Space.Compact>
|
|
|
|
<Space.Compact>
|
|
|
|
<Input addonAfter={<SettingOutlined />} defaultValue="mysite" />
|
|
|
|
<Button type="primary">Submit</Button>
|
|
|
|
<Input placeholder="suffix" addonAfter={<SettingOutlined />} />
|
|
|
|
</Space.Compact>
|
|
|
|
<Space.Compact>
|
|
|
|
<Input addonBefore="http://" suffix=".com" defaultValue="mysite" />
|
|
|
|
<Button type="primary">Submit</Button>
|
|
|
|
</Space.Compact>
|
|
|
|
<Space.Compact>
|
|
|
|
<Button>Prefix</Button>
|
|
|
|
<Input
|
|
|
|
addonBefore={<Cascader placeholder="cascader" style={{ width: 150 }} />}
|
|
|
|
defaultValue="mysite"
|
|
|
|
/>
|
|
|
|
<Button type="primary">Submit</Button>
|
|
|
|
</Space.Compact>
|
2024-01-27 20:36:50 +08:00
|
|
|
<Space.Compact>
|
|
|
|
<Input addonBefore="Prefix" defaultValue="mysite" showCount />
|
|
|
|
<Button type="primary">Submit</Button>
|
|
|
|
<Input
|
|
|
|
addonBefore="Prefix"
|
|
|
|
defaultValue="mysite"
|
|
|
|
showCount
|
|
|
|
addonAfter={<SettingOutlined />}
|
|
|
|
/>
|
|
|
|
<Input addonBefore="Prefix" defaultValue="mysite" showCount />
|
|
|
|
</Space.Compact>
|
2022-11-22 22:52:40 +08:00
|
|
|
<br />
|
|
|
|
<Space.Compact>
|
|
|
|
<Button onClick={() => setShowModal(true)}>debug Modal context</Button>
|
2022-11-24 12:10:54 +08:00
|
|
|
{showModal && (
|
|
|
|
<Modal title="Basic Modal" open={showModal} onCancel={() => setShowModal(false)}>
|
|
|
|
<Button>normal button A</Button>
|
|
|
|
<Button>normal button B</Button>
|
|
|
|
<br />
|
|
|
|
<br />
|
|
|
|
<Input />
|
|
|
|
<br />
|
|
|
|
<br />
|
|
|
|
<Space.Compact>
|
|
|
|
<Button>compact button A</Button>
|
|
|
|
<Button>compact button B</Button>
|
|
|
|
</Space.Compact>
|
|
|
|
</Modal>
|
|
|
|
)}
|
2022-11-22 22:52:40 +08:00
|
|
|
</Space.Compact>
|
|
|
|
<Space.Compact>
|
|
|
|
<Dropdown.Button
|
|
|
|
menu={{
|
|
|
|
items: [
|
|
|
|
{
|
|
|
|
key: '1',
|
|
|
|
label: <Button>menu button</Button>,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: '2',
|
|
|
|
label: 'normal menu item',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
debug Dropdown.Button context
|
|
|
|
</Dropdown.Button>
|
|
|
|
</Space.Compact>
|
|
|
|
<Space.Compact>
|
|
|
|
<Button onClick={() => setShowDrawer(true)}>debug Drawer context</Button>
|
2022-11-24 12:10:54 +08:00
|
|
|
{showDrawer && (
|
|
|
|
<Drawer
|
|
|
|
title="Basic Drawer"
|
|
|
|
placement="right"
|
|
|
|
onClose={() => setShowDrawer(false)}
|
|
|
|
open={showDrawer}
|
|
|
|
>
|
|
|
|
<Button>normal button A</Button>
|
|
|
|
<Button>normal button B</Button>
|
|
|
|
<br />
|
|
|
|
<br />
|
|
|
|
<Space.Compact>
|
|
|
|
<Button>compact button A</Button>
|
|
|
|
<Button>compact button B</Button>
|
|
|
|
</Space.Compact>
|
|
|
|
</Drawer>
|
|
|
|
)}
|
2022-11-22 22:52:40 +08:00
|
|
|
</Space.Compact>
|
2023-04-11 22:26:21 +08:00
|
|
|
<Space.Compact>
|
|
|
|
<Input placeholder="Debug Popover context" />
|
|
|
|
<Popover
|
|
|
|
content={
|
|
|
|
<>
|
|
|
|
<Input placeholder="Left Border" />
|
|
|
|
<Divider />
|
|
|
|
<DatePicker />
|
|
|
|
<Divider />
|
|
|
|
<InputNumber />
|
|
|
|
<Divider />
|
|
|
|
<Select />
|
|
|
|
</>
|
|
|
|
}
|
|
|
|
trigger={['click']}
|
|
|
|
placement="bottom"
|
|
|
|
>
|
|
|
|
<Button>Settings</Button>
|
|
|
|
</Popover>
|
|
|
|
</Space.Compact>
|
2022-11-22 22:52:40 +08:00
|
|
|
<Space.Compact>
|
|
|
|
<InputNumber addonBefore="+" addonAfter="$" defaultValue={100} />
|
|
|
|
</Space.Compact>
|
2022-11-24 12:10:54 +08:00
|
|
|
<Space.Compact>
|
|
|
|
<Select defaultValue="Sign Up">
|
|
|
|
<Option value="Sign Up">Sign Up</Option>
|
|
|
|
<Option value="Sign In">Sign In</Option>
|
|
|
|
</Select>
|
|
|
|
</Space.Compact>
|
|
|
|
<Space.Compact>
|
|
|
|
<DatePicker.RangePicker style={{ width: '70%' }} />
|
|
|
|
</Space.Compact>
|
|
|
|
<Space.Compact>
|
|
|
|
<InputNumber defaultValue={12} />
|
|
|
|
</Space.Compact>
|
|
|
|
<Space.Compact>
|
|
|
|
<Cascader
|
|
|
|
style={{ width: '70%' }}
|
|
|
|
options={[
|
|
|
|
{
|
|
|
|
value: 'zhejiang',
|
|
|
|
label: 'Zhejiang',
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
value: 'hangzhou',
|
|
|
|
label: 'Hangzhou',
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
value: 'xihu',
|
|
|
|
label: 'West Lake',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: 'jiangsu',
|
|
|
|
label: 'Jiangsu',
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
value: 'nanjing',
|
|
|
|
label: 'Nanjing',
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
value: 'zhonghuamen',
|
|
|
|
label: 'Zhong Hua Men',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
placeholder="Select Address"
|
|
|
|
/>
|
|
|
|
</Space.Compact>
|
|
|
|
<Space.Compact direction="vertical">
|
|
|
|
<Button>vertical compact button A</Button>
|
|
|
|
</Space.Compact>
|
2022-11-22 22:52:40 +08:00
|
|
|
</Space>
|
|
|
|
);
|
|
|
|
};
|
2022-11-09 12:28:04 +08:00
|
|
|
|
|
|
|
export default App;
|