2023-08-08 14:03:31 +08:00
|
|
|
import React from 'react';
|
2023-10-29 02:11:17 +08:00
|
|
|
import { Button, ConfigProvider, Flex } from 'antd';
|
2023-08-08 14:03:31 +08:00
|
|
|
|
|
|
|
const App: React.FC = () => (
|
|
|
|
<ConfigProvider
|
|
|
|
theme={{
|
|
|
|
components: {
|
|
|
|
Button: {
|
|
|
|
algorithm: true,
|
|
|
|
colorPrimary: '#1976d2',
|
|
|
|
controlHeight: 36,
|
|
|
|
primaryShadow:
|
2023-10-29 02:11:17 +08:00
|
|
|
'0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12)',
|
2023-08-08 14:03:31 +08:00
|
|
|
fontWeight: 500,
|
|
|
|
defaultBorderColor: 'rgba(25, 118, 210, 0.5)',
|
|
|
|
colorText: '#1976d2',
|
|
|
|
defaultColor: '#1976d2',
|
|
|
|
borderRadius: 4,
|
|
|
|
colorTextDisabled: 'rgba(0, 0, 0, 0.26)',
|
|
|
|
colorBgContainerDisabled: 'rgba(0, 0, 0, 0.12)',
|
2024-01-11 11:18:21 +08:00
|
|
|
contentFontSizeSM: 12,
|
2023-08-08 14:03:31 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
}}
|
|
|
|
>
|
2023-10-29 02:11:17 +08:00
|
|
|
<Flex gap="small" vertical>
|
|
|
|
<Flex wrap="wrap" gap="small">
|
2023-08-08 14:03:31 +08:00
|
|
|
<Button type="text">TEXT</Button>
|
|
|
|
<Button type="primary">CONTAINED</Button>
|
|
|
|
<Button>OUTLINED</Button>
|
2023-10-29 02:11:17 +08:00
|
|
|
</Flex>
|
|
|
|
<Flex wrap="wrap" gap="small">
|
2023-08-08 14:03:31 +08:00
|
|
|
<Button type="text" disabled>
|
|
|
|
TEXT
|
|
|
|
</Button>
|
|
|
|
<Button type="primary" disabled>
|
|
|
|
CONTAINED
|
|
|
|
</Button>
|
|
|
|
<Button disabled>OUTLINED</Button>
|
2023-10-29 02:11:17 +08:00
|
|
|
</Flex>
|
2024-01-11 11:18:21 +08:00
|
|
|
<Flex wrap="wrap" gap="small">
|
|
|
|
<Button type="text" size="small">
|
|
|
|
TEXT
|
|
|
|
</Button>
|
|
|
|
<Button type="primary" size="small">
|
|
|
|
CONTAINED
|
|
|
|
</Button>
|
|
|
|
<Button size="small">OUTLINED</Button>
|
|
|
|
</Flex>
|
2023-10-29 02:11:17 +08:00
|
|
|
</Flex>
|
2023-08-08 14:03:31 +08:00
|
|
|
</ConfigProvider>
|
|
|
|
);
|
|
|
|
|
|
|
|
export default App;
|