ant-design/components/radio/demo/component-token.tsx
JiaQi f579e695bc
feat: migrate less to token for Radio (#42050)
* feat: migrate Radio less variables

* feat: token rename

---------

Co-authored-by: MadCcc <1075746765@qq.com>
2023-06-05 16:16:43 +08:00

52 lines
1.6 KiB
TypeScript

import { ConfigProvider, Radio, Space } from 'antd';
import React from 'react';
const App: React.FC = () => (
<ConfigProvider
theme={{
components: {
Radio: {
radioSize: 20,
dotSize: 10,
dotColorDisabled: 'grey',
buttonBg: '#f6ffed',
buttonCheckedBg: '#d9f7be',
buttonColor: '#faad14',
buttonPaddingInline: 20,
buttonCheckedBgDisabled: '#fffbe6',
buttonCheckedColorDisabled: '#ffe58f',
buttonSolidCheckedColor: '#ffa39e',
wrapperMarginInlineEnd: 20,
},
},
}}
>
<Space direction="vertical">
<Radio checked>Test</Radio>
<Radio checked disabled>
Disabled
</Radio>
<Radio.Group defaultValue="a">
<Radio.Button value="a">Hangzhou</Radio.Button>
<Radio.Button value="b">Shanghai</Radio.Button>
<Radio.Button value="c">Beijing</Radio.Button>
<Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>
<Radio.Group defaultValue="a" disabled>
<Radio.Button value="a">Hangzhou</Radio.Button>
<Radio.Button value="b">Shanghai</Radio.Button>
<Radio.Button value="c">Beijing</Radio.Button>
<Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>
<Radio.Group defaultValue="a" buttonStyle="solid">
<Radio.Button value="a">Hangzhou</Radio.Button>
<Radio.Button value="b">Shanghai</Radio.Button>
<Radio.Button value="c">Beijing</Radio.Button>
<Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>
</Space>
</ConfigProvider>
);
export default App;