ant-design/components/modal/demo/render-panel.tsx
EmilyyyLiu 47eb1b661e
feat(Space): unify orientation attribute usage (#53669)
* feat[Space]:Unified use of orientation attribute

* feat: use useOrientation and change doc, add test

* feat: add warning

* test: update snapshots

* Update components/space/Compact.tsx

Co-authored-by: thinkasany <480968828@qq.com>
Signed-off-by: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com>

* test: reset snapshots,delete direction default value

* feat: change demo direnction->orentation

* feat: demos direction ->orientation

* feat: add vertical, and change demos , doc

* feat: change demo space -> flex

* feat: change demo space -> flex

* feat: space -> flex

* Update components/space/index.tsx

Signed-off-by: thinkasany <480968828@qq.com>

* Update components/space/Compact.tsx

Signed-off-by: thinkasany <480968828@qq.com>

* add warning toHaveBeenCalledWith

---------

Signed-off-by: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com>
Signed-off-by: thinkasany <480968828@qq.com>
Co-authored-by: 刘欢 <lh01217311@antgroup.com>
Co-authored-by: thinkasany <480968828@qq.com>
2025-05-23 15:20:33 +08:00

46 lines
1.3 KiB
TypeScript

import React from 'react';
import { Button, Modal, Space, Typography } from 'antd';
import type { ModalFuncProps } from 'antd';
/** Test usage. Do not use in your production. */
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = Modal;
const customFooterFn: ModalFuncProps['footer'] = (originNode, { OkBtn, CancelBtn }) => (
<Space vertical>
<Space>{originNode}</Space>
<Space>
<CancelBtn />
<Button danger type="primary">
Custom
</Button>
<OkBtn />
</Space>
</Space>
);
export default () => (
<div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
<InternalPanel title="Hello World!" style={{ width: '100%', height: 200 }}>
Hello World?!
</InternalPanel>
<InternalPanel type="success" style={{ width: 200, height: 150 }}>
A good news!
</InternalPanel>
<InternalPanel title="Confirm This?" type="confirm" style={{ width: 300, height: 200 }}>
Some descriptions.
</InternalPanel>
<InternalPanel
title="Custom Footer Render"
style={{ width: 380, height: 200 }}
footer={customFooterFn}
>
<Typography.Paragraph>
<Typography.Link href="https://github.com/ant-design/ant-design/pull/44318">
Feature #44318
</Typography.Link>
</Typography.Paragraph>
</InternalPanel>
</div>
);