ant-design/components/modal/demo/component-token.tsx
afc163 cece6e27df
style: fix Modal.confirm description long text layout (#45212)
* style: fix Modal.confirm description long text layout

* demo: update Modal demos
2023-10-08 16:38:54 +08:00

40 lines
1.1 KiB
TypeScript

import React from 'react';
import { ConfigProvider, Modal } from 'antd';
/** Test usage. Do not use in your production. */
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = Modal;
export default () => (
<ConfigProvider
theme={{
components: {
Modal: {
footerBg: '#f6ffed',
contentBg: '#e6fffb',
headerBg: '#f9f0ff',
titleLineHeight: 3,
titleFontSize: 12,
titleColor: '#1d39c4',
},
},
}}
>
<div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
<InternalPanel title="Hello World!" style={{ width: '100%' }}>
Hello World?!
</InternalPanel>
<ConfigProvider theme={{ token: { wireframe: true } }}>
<InternalPanel title="Hello World!" style={{ width: '100%' }}>
Hello World?!
</InternalPanel>
</ConfigProvider>
<InternalPanel type="success" style={{ width: 200 }}>
A good news!
</InternalPanel>
<InternalPanel title="Confirm This?" type="confirm" style={{ width: 300 }}>
Some descriptions.
</InternalPanel>
</div>
</ConfigProvider>
);