mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

docs: Alert demo remove Space comp (#49515)

Browse Source
This commit is contained in:
Wanpan 2024-06-20 13:37:17 +08:00 committed by GitHub
parent b0bc32c962
commit 3bdef4f4dc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 2298 additions and 2571 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2397
components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

2397
components/alert/__tests__/__snapshots__/demo.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

7
components/alert/demo/action.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { Alert, Button, Space } from 'antd';
const App: React.FC = () => (
<Space direction="vertical" style={{ width: '100%' }}>
<>
<Alert
message="Success Tips"
type="success"
@ -14,6 +14,7 @@ const App: React.FC = () => (
}
closable
/>
<br />
<Alert
message="Error Text"
showIcon
@ -25,6 +26,7 @@ const App: React.FC = () => (
</Button>
}
/>
<br />
<Alert
message="Warning Text"
type="warning"
@ -37,6 +39,7 @@ const App: React.FC = () => (
}
closable
/>
<br />
<Alert
message="Info Text"
description="Info Description Info Description Info Description Info Description"
@ -53,7 +56,7 @@ const App: React.FC = () => (
}
closable
/>
</Space>
</>
);
export default App;

9
components/alert/demo/banner.tsx
View File

@ -1,17 +1,20 @@
import React from 'react';
import { Alert, Space } from 'antd';
import { Alert } from 'antd';
const App: React.FC = () => (
<Space direction="vertical" style={{ width: '100%' }}>
<>
<Alert message="Warning text" banner />
<br />
<Alert
message="Very long warning text warning text text text text text text text"
banner
closable
/>
<br />
<Alert showIcon={false} message="Warning text without icon" banner />
<br />
<Alert type="error" message="Error text" banner />
</Space>
</>
);
export default App;

8
components/alert/demo/closable.tsx
View File

@ -1,19 +1,20 @@
import React from 'react';
import { CloseSquareFilled } from '@ant-design/icons';
import { Alert, Space } from 'antd';
import { Alert } from 'antd';
const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
console.log(e, 'I was closed.');
};
const App: React.FC = () => (
<Space direction="vertical" style={{ width: '100%' }}>
<>
<Alert
message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
type="warning"
closable
onClose={onClose}
/>
<br />
<Alert
message="Error Text"
description="Error Description Error Description Error Description Error Description Error Description Error Description"
@ -21,6 +22,7 @@ const App: React.FC = () => (
closable
onClose={onClose}
/>
<br />
<Alert
message="Error Text"
description="Error Description Error Description Error Description Error Description Error Description Error Description"
@ -31,7 +33,7 @@ const App: React.FC = () => (
}}
onClose={onClose}
/>
</Space>
</>
);
export default App;

14
components/alert/demo/custom-icon.tsx
View File

@ -1,16 +1,21 @@
import React from 'react';
import { SmileOutlined } from '@ant-design/icons';
import { Alert, Space } from 'antd';
import { Alert } from 'antd';
const icon = <SmileOutlined />;
const App: React.FC = () => (
<Space direction="vertical" style={{ width: '100%' }}>
<>
<Alert icon={icon} message="showIcon = false" type="success" />
<br />
<Alert icon={icon} message="Success Tips" type="success" showIcon />
<br />
<Alert icon={icon} message="Informational Notes" type="info" showIcon />
<br />
<Alert icon={icon} message="Warning" type="warning" showIcon />
<br />
<Alert icon={icon} message="Error" type="error" showIcon />
<br />
<Alert
icon={icon}
message="Success Tips"
@ -18,6 +23,7 @@ const App: React.FC = () => (
type="success"
showIcon
/>
<br />
<Alert
icon={icon}
message="Informational Notes"
@ -25,6 +31,7 @@ const App: React.FC = () => (
type="info"
showIcon
/>
<br />
<Alert
icon={icon}
message="Warning"
@ -32,6 +39,7 @@ const App: React.FC = () => (
type="warning"
showIcon
/>
<br />
<Alert
icon={icon}
message="Error"
@ -39,7 +47,7 @@ const App: React.FC = () => (
type="error"
showIcon
/>
</Space>
</>
);
export default App;

9
components/alert/demo/description.tsx
View File

@ -1,29 +1,32 @@
import React from 'react';
import { Alert, Space } from 'antd';
import { Alert } from 'antd';
const App: React.FC = () => (
<Space direction="vertical" style={{ width: '100%' }}>
<>
<Alert
message="Success Text"
description="Success Description Success Description Success Description"
type="success"
/>
<br />
<Alert
message="Info Text"
description="Info Description Info Description Info Description Info Description"
type="info"
/>
<br />
<Alert
message="Warning Text"
description="Warning Description Warning Description Warning Description Warning Description"
type="warning"
/>
<br />
<Alert
message="Error Text"
description="Error Description Error Description Error Description Error Description"
type="error"
/>
</Space>
</>
);
export default App;

13
components/alert/demo/icon.tsx
View File

@ -1,24 +1,30 @@
import React from 'react';
import { Alert, Space } from 'antd';
import { Alert } from 'antd';
const App: React.FC = () => (
<Space direction="vertical" style={{ width: '100%' }}>
<>
<Alert message="Success Tips" type="success" showIcon />
<br />
<Alert message="Informational Notes" type="info" showIcon />
<br />
<Alert message="Warning" type="warning" showIcon closable />
<br />
<Alert message="Error" type="error" showIcon />
<br />
<Alert
message="Success Tips"
description="Detailed description and advice about successful copywriting."
type="success"
showIcon
/>
<br />
<Alert
message="Informational Notes"
description="Additional description and information about copywriting."
type="info"
showIcon
/>
<br />
<Alert
message="Warning"
description="This is a warning notice about copywriting."
@ -26,13 +32,14 @@ const App: React.FC = () => (
showIcon
closable
/>
<br />
<Alert
message="Error"
description="This is an error message about copywriting."
type="error"
showIcon
/>
</Space>
</>
);
export default App;

6
components/alert/demo/smooth-closed.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { Alert, Space, Switch } from 'antd';
import { Alert, Switch } from 'antd';
const App: React.FC = () => {
const [visible, setVisible] = useState(true);
@ -9,13 +9,13 @@ const App: React.FC = () => {
};
return (
<Space direction="vertical" style={{ width: '100%' }}>
<>
{visible && (
<Alert message="Alert Message Text" type="success" closable afterClose={handleClose} />
)}
<p>click the close button to see the effect</p>
<Switch onChange={setVisible} checked={visible} disabled={visible} />
</Space>
</>
);
};

9
components/alert/demo/style.tsx
View File

@ -1,13 +1,16 @@
import React from 'react';
import { Alert, Space } from 'antd';
import { Alert } from 'antd';
const App: React.FC = () => (
<Space direction="vertical" style={{ width: '100%' }}>
<>
<Alert message="Success Text" type="success" />
<br />
<Alert message="Info Text" type="info" />
<br />
<Alert message="Warning Text" type="warning" />
<br />
<Alert message="Error Text" type="error" />
</Space>
</>
);
export default App;