mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 11:08:45 +08:00
feat: update app demo (#39347)
* feat: update demo * feat: update app * feat: update app * feat: update app * feat: update app * Update index.tsx * feat: update doc * feat: update doc * feat: reset doc * feat: update doc * feat: merge feature * feat: update doc * feat: update cover img * feat: update doc * feat: update doc * feat: update doc * feat: update snapshots * feat: update doc Co-authored-by: lijianan <574980606@qq.com>
This commit is contained in:
黑雨
GitHub
parent
17b5c36dc4
commit
49e8c13c24
@ -1,46 +1,50 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/app/demo/message.tsx extend context correctly 1`] = `
|
||||
exports[`renders ./components/app/demo/basic.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-app"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<span>
|
||||
Open message
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/app/demo/modal.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-app"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Open modal
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/app/demo/notification.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-app"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Open notification
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Open message
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Open modal
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Open notification
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1,46 +1,50 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/app/demo/message.tsx correctly 1`] = `
|
||||
exports[`renders ./components/app/demo/basic.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-app"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<span>
|
||||
Open message
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/app/demo/modal.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-app"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Open modal
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/app/demo/notification.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-app"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Open notification
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Open message
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Open modal
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Open notification
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
7
components/app/demo/basic.md
Normal file
7
components/app/demo/basic.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
获取 `message`，`notification`，`modal` 静态方法。
|
||||
|
||||
## en-US
|
||||
|
||||
Static method for `message`,`notification`,`modal`.
|
||||
47
components/app/demo/basic.tsx
Normal file
47
components/app/demo/basic.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
import { App, Button, Space } from 'antd';
|
||||
|
||||
// Sub page
|
||||
const MyPage = () => {
|
||||
const { message, modal, notification } = App.useApp();
|
||||
|
||||
const showMessage = () => {
|
||||
message.success('Success!');
|
||||
};
|
||||
|
||||
const showModal = () => {
|
||||
modal.warning({
|
||||
title: 'This is a warning message',
|
||||
content: 'some messages...some messages...',
|
||||
});
|
||||
};
|
||||
|
||||
const showNotification = () => {
|
||||
notification.info({
|
||||
message: `Notification topLeft`,
|
||||
description: 'Hello, Ant Design!!',
|
||||
placement: 'topLeft',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Space>
|
||||
<Button type="primary" onClick={showMessage}>
|
||||
Open message
|
||||
</Button>
|
||||
<Button type="primary" onClick={showModal}>
|
||||
Open modal
|
||||
</Button>
|
||||
<Button type="primary" onClick={showNotification}>
|
||||
Open notification
|
||||
</Button>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
// Entry component
|
||||
export default () => (
|
||||
<App>
|
||||
<MyPage />
|
||||
</App>
|
||||
);
|
||||
@ -1,7 +0,0 @@
|
||||
## zh-CN
|
||||
|
||||
获取 `message` 静态方法.
|
||||
|
||||
## en-US
|
||||
|
||||
Static method for `message`.
|
||||
@ -1,24 +0,0 @@
|
||||
import React from 'react';
|
||||
import { App, Button } from 'antd';
|
||||
|
||||
// Sub page
|
||||
const MyPage = () => {
|
||||
const { message } = App.useApp();
|
||||
|
||||
const showMessage = () => {
|
||||
message.success('Success!');
|
||||
};
|
||||
|
||||
return (
|
||||
<Button type="primary" onClick={showMessage}>
|
||||
Open message
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
// Entry component
|
||||
export default () => (
|
||||
<App>
|
||||
<MyPage />
|
||||
</App>
|
||||
);
|
||||
@ -1,7 +0,0 @@
|
||||
## zh-CN
|
||||
|
||||
获取 `modal` 静态方法.
|
||||
|
||||
## en-US
|
||||
|
||||
Static method for `modal`.
|
||||
@ -1,27 +0,0 @@
|
||||
import React from 'react';
|
||||
import { App, Button } from 'antd';
|
||||
|
||||
// Sub page
|
||||
const MyPage = () => {
|
||||
const { modal } = App.useApp();
|
||||
|
||||
const showModal = () => {
|
||||
modal.warning({
|
||||
title: 'This is a warning message',
|
||||
content: 'some messages...some messages...',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Button type="primary" onClick={showModal}>
|
||||
Open modal
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
// Entry component
|
||||
export default () => (
|
||||
<App>
|
||||
<MyPage />
|
||||
</App>
|
||||
);
|
||||
@ -1,7 +0,0 @@
|
||||
## zh-CN
|
||||
|
||||
获取 `notification` 静态方法.
|
||||
|
||||
## en-US
|
||||
|
||||
Static method for `notification`.
|
||||
@ -1,28 +0,0 @@
|
||||
import React from 'react';
|
||||
import { App, Button } from 'antd';
|
||||
|
||||
// Sub page
|
||||
const MyPage = () => {
|
||||
const { notification } = App.useApp();
|
||||
|
||||
const showNotification = () => {
|
||||
notification.info({
|
||||
message: `Notification topLeft`,
|
||||
description: 'Hello, Ant Design!!',
|
||||
placement: 'topLeft',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Button type="primary" onClick={showNotification}>
|
||||
Open notification
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
// Entry component
|
||||
export default () => (
|
||||
<App>
|
||||
<MyPage />
|
||||
</App>
|
||||
);
|
||||
@ -2,7 +2,7 @@
|
||||
category: Components
|
||||
group: Other
|
||||
title: App
|
||||
cover: https://gw.alipayobjects.com/zos/bmw-prod/cc3fcbfa-bf5b-4c8c-8a3d-c3f8388c75e8.svg
|
||||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJz8SZos2wgAAAAAAAAAAAAADrJ8AQ/original
|
||||
demo:
|
||||
cols: 2
|
||||
---
|
||||
@ -16,12 +16,14 @@ Static function in React 18 concurrent mode will not well support. In v5, we rec
|
||||
## Examples
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
<code src="./demo/message.tsx">message</code>
|
||||
<code src="./demo/notification.tsx">notification</code>
|
||||
<code src="./demo/modal.tsx">modal</code>
|
||||
<code src="./demo/basic.tsx">basic</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 React from 'react';
|
||||
import { App } from 'antd';
|
||||
@ -44,3 +46,74 @@ const MyApp: React.FC = () => (
|
||||
|
||||
export default MyApp;
|
||||
```
|
||||
|
||||
Note: App.useApp must be available under App.
|
||||
|
||||
### 与 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 React, { useEffect } from 'react';
|
||||
import { App } from 'antd';
|
||||
import type { MessageInstance } from 'antd/es/message/interface';
|
||||
import type { NotificationInstance } from 'antd/es/notification/interface';
|
||||
import type { ModalStaticFunctions } from 'antd/es/modal/confirm';
|
||||
|
||||
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, notification, modal };
|
||||
```
|
||||
|
||||
```tsx
|
||||
// sub page
|
||||
import React from 'react';
|
||||
import { Button, Space } from 'antd';
|
||||
import { message, modal, notification } from './store';
|
||||
|
||||
export default () => {
|
||||
const showMessage = () => {
|
||||
message.success('Success!');
|
||||
};
|
||||
|
||||
return (
|
||||
<Space>
|
||||
<Button type="primary" onClick={showMessage}>
|
||||
Open message
|
||||
</Button>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
@ -3,7 +3,7 @@ category: Components
|
||||
subtitle: 包裹组件
|
||||
group: 其他
|
||||
title: App
|
||||
cover: https://gw.alipayobjects.com/zos/bmw-prod/cc3fcbfa-bf5b-4c8c-8a3d-c3f8388c75e8.svg
|
||||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJz8SZos2wgAAAAAAAAAAAAADrJ8AQ/original
|
||||
demo:
|
||||
cols: 2
|
||||
---
|
||||
@ -18,11 +18,13 @@ demo:
|
||||
## 代码演示
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
<code src="./demo/message.tsx">message</code>
|
||||
<code src="./demo/notification.tsx">notification</code>
|
||||
<code src="./demo/modal.tsx">modal</code>
|
||||
<code src="./demo/basic.tsx">basic</code>
|
||||
|
||||
## How to use
|
||||
## 如何使用
|
||||
|
||||
### 基础用法
|
||||
|
||||
App 组件通过 `Context` 提供上下文方法调用，因而 useApp 需要作为子组件才能使用，我们推荐在应用中顶层包裹 App。
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
@ -46,3 +48,74 @@ const MyApp: React.FC = () => (
|
||||
|
||||
export default MyApp;
|
||||
```
|
||||
|
||||
注意：App.useApp 必须在 App 之下方可使用。
|
||||
|
||||
### 与 ConfigProvider 先后顺序
|
||||
|
||||
App 组件在能在`ConfigProvider`才能使用 token， 如果需要使用 Token，则 ConfigProvider 与 App 组件必须成对出现。
|
||||
|
||||
```tsx
|
||||
<ConfigProvider theme={{ ... }}>
|
||||
<App>
|
||||
...
|
||||
</App>
|
||||
</ConfigProvider>
|
||||
```
|
||||
|
||||
### 内嵌使用场景（如无必要，尽量不做嵌套）
|
||||
|
||||
```tsx
|
||||
<App>
|
||||
<Space>
|
||||
...
|
||||
<App>...</App>
|
||||
</Space>
|
||||
</App>
|
||||
```
|
||||
|
||||
### 全局场景（redux 场景）
|
||||
|
||||
```tsx
|
||||
// Entry component
|
||||
import React, { useEffect } from 'react';
|
||||
import { App } from 'antd';
|
||||
import type { MessageInstance } from 'antd/es/message/interface';
|
||||
import type { NotificationInstance } from 'antd/es/notification/interface';
|
||||
import type { ModalStaticFunctions } from 'antd/es/modal/confirm';
|
||||
|
||||
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, notification, modal };
|
||||
```
|
||||
|
||||
```tsx
|
||||
// sub page
|
||||
import React from 'react';
|
||||
import { Button, Space } from 'antd';
|
||||
import { message, modal, notification } from './store';
|
||||
|
||||
export default () => {
|
||||
const showMessage = () => {
|
||||
message.success('Success!');
|
||||
};
|
||||
|
||||
return (
|
||||
<Space>
|
||||
<Button type="primary" onClick={showMessage}>
|
||||
Open message
|
||||
</Button>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
Loading…
Reference in New Issue
Block a user