mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 12:39:49 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

demo: fix Form variant demo (#51587)

Browse Source
This commit is contained in:
afc163 2024-11-12 15:23:44 +08:00 committed by GitHub
parent d80828ceff
commit c83f3ca411
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 6 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/form/demo/variant.tsx
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React from 'react';
import {
Button,
Cascader,
@ -11,7 +11,6 @@ import {
TreeSelect,
Segmented,
} from 'antd';
import type { FormProps } from 'antd';
const { RangePicker } = DatePicker;
@ -27,18 +26,15 @@ const formItemLayout = {
};
const App: React.FC = () => {
const [componentVariant, setComponentVariant] = useState<FormProps['variant']>('filled');
const onFormVariantChange = ({ variant }: { variant: FormProps['variant'] }) => {
setComponentVariant(variant);
};
const [form] = Form.useForm();
const variant = Form.useWatch('variant', form);
return (
<Form
{...formItemLayout}
onValuesChange={onFormVariantChange}
variant={componentVariant}
form={form}
variant={variant || 'filled'}
style={{ maxWidth: 600 }}
initialValues={{ variant: componentVariant }}
initialValues={{ variant: 'filled' }}
>
<Form.Item label="Form variant" name="variant">
<Segmented options={['outlined', 'filled', 'borderless']} />