ant-design/components/input/demo/filled-debug.tsx
MadCcc 3af521d422
feat: Input/InputNumber/Mentions support filled variant (#46435)
* feat: Input filled variant

* feat: InputNumber filled variant

* feat: mentions variant

* fix: TextArea status with affix

* chore: update snapshot

* chore: update snapshot

* feat: pagination input

* fix: fix diff

* feat: input-number disabled

* fixL InputNumber

* chore: update snapshot

* feat: better style

* chore: update

* chore: update snapshot

* feat: use variant classNames

* chore: update snapshot

* feat: mentions affix style

* chore
2023-12-18 17:53:31 +08:00

73 lines
2.2 KiB
TypeScript

import React from 'react';
import { Flex, Input } from 'antd';
const { TextArea } = Input;
const App: React.FC = () => (
<Flex vertical gap={20}>
<Flex gap={12}>
<Input placeholder="Filled" variant="filled" />
<Input placeholder="Filled" variant="filled" disabled />
<Input placeholder="Filled" variant="filled" status="error" value="Filled Error" />
</Flex>
<Flex gap={12}>
<Input prefix="$" placeholder="Filled" variant="filled" />
<Input prefix="$" placeholder="Filled" variant="filled" disabled />
<Input prefix="$" placeholder="Filled" variant="filled" status="error" value="Filled Error" />
</Flex>
<Flex gap={12}>
<Input addonBefore="http://" addonAfter=".com" placeholder="Filled" variant="filled" />
<Input
addonBefore="http://"
addonAfter=".com"
placeholder="Filled"
variant="filled"
disabled
/>
<Input
addonBefore="http://"
addonAfter=".com"
placeholder="Filled"
variant="filled"
status="error"
value="Filled Error"
/>
</Flex>
<Flex gap={12}>
<Input addonAfter=".com" placeholder="Filled" variant="filled" />
<Input addonAfter=".com" placeholder="Filled" variant="filled" disabled />
<Input
addonAfter=".com"
placeholder="Filled"
variant="filled"
status="error"
value="Filled Error"
/>
</Flex>
<Flex gap={12}>
<Input addonBefore="http://" placeholder="Filled" variant="filled" />
<Input addonBefore="http://" placeholder="Filled" variant="filled" disabled />
<Input
addonBefore="http://"
placeholder="Filled"
variant="filled"
status="error"
value="Filled Error"
/>
</Flex>
<TextArea variant="filled" placeholder="Basic" />
<TextArea variant="filled" placeholder="Basic" status="error" value="Filled Error" />
<TextArea variant="filled" placeholder="Allow Clear" allowClear />
<TextArea variant="filled" placeholder="Show Count" showCount />
<TextArea
variant="filled"
placeholder="Show Count"
showCount
status="error"
value="Filled Error"
/>
</Flex>
);
export default App;