mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { Button, ConfigProvider, Form, InputNumber } from 'antd';
|
|
import { SketchPicker } from 'react-color';
|
|
|
|
type ThemeData = {
|
|
borderRadius: number;
|
|
colorPrimary: string;
|
|
};
|
|
|
|
const defaultData: ThemeData = {
|
|
borderRadius: 6,
|
|
colorPrimary: '#1677ff',
|
|
};
|
|
|
|
export default () => {
|
|
const [form] = Form.useForm();
|
|
|
|
const [data, setData] = React.useState<ThemeData>(defaultData);
|
|
|
|
return (
|
|
<ConfigProvider
|
|
theme={{ token: { colorPrimary: data.colorPrimary, borderRadius: data.borderRadius } }}
|
|
>
|
|
<Form
|
|
form={form}
|
|
onValuesChange={(_, nextData) => {
|
|
setData({ ...nextData, colorPrimary: nextData.colorPrimary.hex });
|
|
}}
|
|
name="theme"
|
|
initialValues={defaultData}
|
|
labelCol={{ span: 4 }}
|
|
wrapperCol={{ span: 20 }}
|
|
>
|
|
<Form.Item valuePropName="color" name="colorPrimary" label="Primary Color">
|
|
<SketchPicker />
|
|
</Form.Item>
|
|
<Form.Item name="borderRadius" label="Border Radius">
|
|
<InputNumber />
|
|
</Form.Item>
|
|
<Form.Item name="submit" wrapperCol={{ offset: 4, span: 20 }}>
|
|
<Button type="primary">Submit</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
</ConfigProvider>
|
|
);
|
|
};
|