mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-04 00:49:39 +08:00
e825e781de
* fix: respect notification placement in App * style: sort imports * fix: prioritize global config Fixes regression on global config test from previous change * test: check if notification placement works * lint: use consistent-type-import * style: remove extra new lines in import block * docs: update config demo * chore: fix lint --------- Co-authored-by: 二货机器人 <smith3816@gmail.com>
135 lines
3.1 KiB
Markdown
135 lines
3.1 KiB
Markdown
---
|
|
category: Components
|
|
group: Other
|
|
title: App
|
|
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJz8SZos2wgAAAAAAAAAAAAADrJ8AQ/original
|
|
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oC92TK44Ex8AAAAAAAAAAAAADrJ8AQ/original
|
|
demo:
|
|
cols: 2
|
|
---
|
|
|
|
Application wrapper for some global usages.
|
|
|
|
## When To Use
|
|
|
|
- Provide reset styles based on `.ant-app` element.
|
|
- You could use static methods of `message/notification/Modal` form `useApp` without writing `contextHolder` manually.
|
|
|
|
## Examples
|
|
|
|
<!-- prettier-ignore -->
|
|
<code src="./demo/basic.tsx">Basic</code>
|
|
<code src="./demo/config.tsx">Hooks config</code>
|
|
|
|
## How to use
|
|
|
|
### Basic usage
|
|
|
|
App provides upstream and downstream method calls through `Context`, because useApp needs to be used as a subcomponent, we recommend encapsulating App at the top level in the application.
|
|
|
|
```tsx
|
|
import { App } from 'antd';
|
|
import React from 'react';
|
|
|
|
const MyPage: React.FC = () => {
|
|
const { message, notification, modal } = App.useApp();
|
|
message.success('Good!');
|
|
notification.info({ message: 'Good' });
|
|
modal.warning({ title: 'Good' });
|
|
// ....
|
|
// other message, notification, modal static function
|
|
return <div>Hello word</div>;
|
|
};
|
|
|
|
const MyApp: React.FC = () => (
|
|
<App>
|
|
<MyPage />
|
|
</App>
|
|
);
|
|
|
|
export default MyApp;
|
|
```
|
|
|
|
Note: App.useApp must be available under App.
|
|
|
|
### Sequence with ConfigProvider
|
|
|
|
The App component can only use the token in the `ConfigProvider`, if you need to use the Token, the ConfigProvider and the App component must appear in pairs.
|
|
|
|
```tsx
|
|
<ConfigProvider theme={{ ... }}>
|
|
<App>
|
|
...
|
|
</App>
|
|
</ConfigProvider>
|
|
```
|
|
|
|
### Embedded usage scenarios (if not necessary, try not to do nesting)
|
|
|
|
```tsx
|
|
<App>
|
|
<Space>
|
|
...
|
|
<App>...</App>
|
|
</Space>
|
|
</App>
|
|
```
|
|
|
|
### Global scene (redux scene)
|
|
|
|
```tsx
|
|
// Entry component
|
|
import { App } from 'antd';
|
|
import type { MessageInstance } from 'antd/es/message/interface';
|
|
import type { ModalStaticFunctions } from 'antd/es/modal/confirm';
|
|
import type { NotificationInstance } from 'antd/es/notification/interface';
|
|
|
|
let message: MessageInstance;
|
|
let notification: NotificationInstance;
|
|
let modal: Omit<ModalStaticFunctions, 'warn'>;
|
|
|
|
export default () => {
|
|
const staticFunction = App.useApp();
|
|
message = staticFunction.message;
|
|
modal = staticFunction.modal;
|
|
notification = staticFunction.notification;
|
|
return null;
|
|
};
|
|
|
|
export { message, modal, notification };
|
|
```
|
|
|
|
```tsx
|
|
// sub page
|
|
import { Button, Space } from 'antd';
|
|
import React from 'react';
|
|
import { message } from './store';
|
|
|
|
export default () => {
|
|
const showMessage = () => {
|
|
message.success('Success!');
|
|
};
|
|
|
|
return (
|
|
<Space>
|
|
<Button type="primary" onClick={showMessage}>
|
|
Open message
|
|
</Button>
|
|
</Space>
|
|
);
|
|
};
|
|
```
|
|
|
|
## API
|
|
|
|
### App
|
|
|
|
| Property | Description | Type | Default | Version |
|
|
| --- | --- | --- | --- | --- |
|
|
| message | Global config for Message | [MessageConfig](/components/message/#messageconfig) | - | 5.3.0 |
|
|
| notification | Global config for Notification | [NotificationConfig](/components/notification/#notificationconfig) | - | 5.3.0 |
|
|
|
|
## Design Token
|
|
|
|
<ComponentTokenTable component="App"></ComponentTokenTable>
|