ant-design/components/space/demo/compact-debug.tsx
叶枫 502dac12aa
docs: format code ()
* docs: fix code

* feat: lint

* feat: prettier

* feat: test

* feat: review

* feat: format html

* feat: format html
2024-04-08 14:04:08 +08:00

235 lines
6.7 KiB
TypeScript

import React, { useState } from 'react';
import { CopyOutlined, DownloadOutlined, SettingOutlined } from '@ant-design/icons';
import {
Button,
Cascader,
DatePicker,
Divider,
Drawer,
Dropdown,
Input,
InputNumber,
Modal,
Popover,
Select,
Space,
Tooltip,
} from 'antd';
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>
);
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>
<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>
<br />
<Space.Compact>
<Button onClick={() => setShowModal(true)}>debug Modal context</Button>
{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>
)}
</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>
{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>
)}
</Space.Compact>
<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>
<Space.Compact>
<InputNumber addonBefore="+" addonAfter="$" defaultValue={100} />
</Space.Compact>
<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>
</Space>
);
};
export default App;