406 lines
9.0 KiB
Markdown
406 lines
9.0 KiB
Markdown
|
|
### removeNotices
|
|||
|
|
|
|||
|
|
返回一个用于指示需要移除多个通知的动作对象。
|
|||
|
|
|
|||
|
|
**用法**
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
import { __ } from '@wordpress/i18n';
|
|||
|
|
import { useDispatch, useSelect } from '@wordpress/data';
|
|||
|
|
import { store as noticesStore } from '@wordpress/notices';
|
|||
|
|
import { Button } from '@wordpress/components';
|
|||
|
|
|
|||
|
|
const ExampleComponent = () => {
|
|||
|
|
const notices = useSelect( ( select ) =>
|
|||
|
|
select( noticesStore ).getNotices()
|
|||
|
|
);
|
|||
|
|
const { removeNotices } = useDispatch( noticesStore );
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<ul>
|
|||
|
|
{ notices.map( ( notice ) => (
|
|||
|
|
<li key={ notice.id }>{ notice.content }</li>
|
|||
|
|
) ) }
|
|||
|
|
</ul>
|
|||
|
|
<Button
|
|||
|
|
onClick={ () =>
|
|||
|
|
removeNotices( notices.map( ( { id } ) => id ) )
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
{ __( '清除所有通知' ) }
|
|||
|
|
</Button>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**参数**
|
|||
|
|
|
|||
|
|
- _ids_ `string[]`: 唯一通知标识符列表。
|
|||
|
|
- _context_ `[string]`: 可选参数,指定通知显示的情境(分组)。默认为默认情境。
|
|||
|
|
|
|||
|
|
**返回值**
|
|||
|
|
|
|||
|
|
- `Object`: 动作对象。
|
|||
|
|
|
|||
|
|
<!-- END TOKEN(Autogenerated actions|../../../packages/notices/src/store/actions.js) -->
|
|||
|
|
|
|||
|
|
### createSuccessNotice
|
|||
|
|
|
|||
|
|
返回用于指示创建成功通知的操作对象。有关选项说明,请参阅 `createNotice`。
|
|||
|
|
|
|||
|
|
**相关**
|
|||
|
|
|
|||
|
|
- createNotice
|
|||
|
|
|
|||
|
|
**用法**
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
import { __ } from '@wordpress/i18n';
|
|||
|
|
import { useDispatch } from '@wordpress/data';
|
|||
|
|
import { store as noticesStore } from '@wordpress/notices';
|
|||
|
|
import { Button } from '@wordpress/components';
|
|||
|
|
|
|||
|
|
const ExampleComponent = () => {
|
|||
|
|
const { createSuccessNotice } = useDispatch( noticesStore );
|
|||
|
|
return (
|
|||
|
|
<Button
|
|||
|
|
onClick={ () =>
|
|||
|
|
createSuccessNotice( __( 'Success!' ), {
|
|||
|
|
type: 'snackbar',
|
|||
|
|
icon: '🔥',
|
|||
|
|
} )
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
{ __( 'Generate a snackbar success notice!' ) }
|
|||
|
|
</Button>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**参数**
|
|||
|
|
|
|||
|
|
- _content_ `string`: 通知消息。
|
|||
|
|
- _options_ `[Object]`: 可选的通知选项。
|
|||
|
|
|
|||
|
|
**返回值**
|
|||
|
|
|
|||
|
|
- `Object`: 操作对象。
|
|||
|
|
|
|||
|
|
### createWarningNotice
|
|||
|
|
|
|||
|
|
返回用于指示创建警告通知的操作对象。有关选项说明,请参阅 `createNotice`。
|
|||
|
|
|
|||
|
|
**相关**
|
|||
|
|
|
|||
|
|
- createNotice
|
|||
|
|
|
|||
|
|
**用法**
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
import { __ } from '@wordpress/i18n';
|
|||
|
|
import { useDispatch } from '@wordpress/data';
|
|||
|
|
import { store as noticesStore } from '@wordpress/notices';
|
|||
|
|
import { Button } from '@wordpress/components';
|
|||
|
|
|
|||
|
|
const ExampleComponent = () => {
|
|||
|
|
const { createWarningNotice, createInfoNotice } =
|
|||
|
|
useDispatch( noticesStore );
|
|||
|
|
return (
|
|||
|
|
<Button
|
|||
|
|
onClick={ () =>
|
|||
|
|
createWarningNotice( __( 'Warning!' ), {
|
|||
|
|
onDismiss: () => {
|
|||
|
|
createInfoNotice(
|
|||
|
|
__( 'The warning has been dismissed!' )
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
} )
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
{ __( 'Generates a warning notice with onDismiss callback' ) }
|
|||
|
|
</Button>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**参数**
|
|||
|
|
|
|||
|
|
- _content_ `string`: 通知消息。
|
|||
|
|
- _options_ `[Object]`: 可选的通知选项。
|
|||
|
|
|
|||
|
|
**返回值**
|
|||
|
|
|
|||
|
|
- `Object`: 操作对象。
|
|||
|
|
|
|||
|
|
### removeAllNotices
|
|||
|
|
|
|||
|
|
从给定上下文中移除所有通知。默认为默认上下文。
|
|||
|
|
|
|||
|
|
**用法**
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
import { __ } from '@wordpress/i18n';
|
|||
|
|
import { useDispatch, useSelect } from '@wordpress/data';
|
|||
|
|
import { store as noticesStore } from '@wordpress/notices';
|
|||
|
|
import { Button } from '@wordpress/components';
|
|||
|
|
|
|||
|
|
export const ExampleComponent = () => {
|
|||
|
|
const notices = useSelect( ( select ) =>
|
|||
|
|
select( noticesStore ).getNotices()
|
|||
|
|
);
|
|||
|
|
const { removeAllNotices } = useDispatch( noticesStore );
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<ul>
|
|||
|
|
{ notices.map( ( notice ) => (
|
|||
|
|
<li key={ notice.id }>{ notice.content }</li>
|
|||
|
|
) ) }
|
|||
|
|
</ul>
|
|||
|
|
<Button onClick={ () => removeAllNotices() }>
|
|||
|
|
{ __( 'Clear all notices', 'woo-gutenberg-products-block' ) }
|
|||
|
|
</Button>
|
|||
|
|
<Button onClick={ () => removeAllNotices( 'snackbar' ) }>
|
|||
|
|
{ __(
|
|||
|
|
'Clear all snackbar notices',
|
|||
|
|
'woo-gutenberg-products-block'
|
|||
|
|
) }
|
|||
|
|
</Button>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**参数**
|
|||
|
|
|
|||
|
|
- _noticeType_ `string`: 要移除所有通知的上下文。
|
|||
|
|
- _context_ `string`: 要移除所有通知的上下文。
|
|||
|
|
|
|||
|
|
**返回值**
|
|||
|
|
|
|||
|
|
- `Object`: 操作对象。
|
|||
|
|
|
|||
|
|
### removeNotice
|
|||
|
|
|
|||
|
|
返回用于指示移除通知的操作对象。
|
|||
|
|
|
|||
|
|
**用法**
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
import { __ } from '@wordpress/i18n';
|
|||
|
|
import { useDispatch } from '@wordpress/data';
|
|||
|
|
import { store as noticesStore } from '@wordpress/notices';
|
|||
|
|
import { Button } from '@wordpress/components';
|
|||
|
|
|
|||
|
|
const ExampleComponent = () => {
|
|||
|
|
const notices = useSelect( ( select ) =>
|
|||
|
|
select( noticesStore ).getNotices()
|
|||
|
|
);
|
|||
|
|
const { createWarningNotice, removeNotice } = useDispatch( noticesStore );
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<Button
|
|||
|
|
onClick={ () =>
|
|||
|
|
createWarningNotice( __( 'Warning!' ), {
|
|||
|
|
isDismissible: false,
|
|||
|
|
} )
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
{ __( 'Generate a notice' ) }
|
|||
|
|
</Button>
|
|||
|
|
{ notices.length > 0 && (
|
|||
|
|
<Button onClick={ () => removeNotice( notices[ 0 ].id ) }>
|
|||
|
|
{ __( 'Remove the notice' ) }
|
|||
|
|
</Button>
|
|||
|
|
) }
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**参数**
|
|||
|
|
|
|||
|
|
- _id_ `string`: 通知的唯一标识符。
|
|||
|
|
- _context_ `[string]`: 通知出现的可选上下文(分组)。默认为默认上下文。
|
|||
|
|
|
|||
|
|
**返回值**
|
|||
|
|
|
|||
|
|
- `Object`: 操作对象。
|
|||
|
|
|
|||
|
|
# 通知数据
|
|||
|
|
|
|||
|
|
命名空间:`core/notices`
|
|||
|
|
|
|||
|
|
## 选择器
|
|||
|
|
|
|||
|
|
<!-- START TOKEN(Autogenerated selectors|../../../packages/notices/src/store/selectors.js) -->
|
|||
|
|
|
|||
|
|
### getNotices
|
|||
|
|
|
|||
|
|
以数组形式返回所有通知,可选择指定上下文。默认为全局上下文。
|
|||
|
|
|
|||
|
|
_用法_
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
import { useSelect } from '@wordpress/data';
|
|||
|
|
import { store as noticesStore } from '@wordpress/notices';
|
|||
|
|
|
|||
|
|
const ExampleComponent = () => {
|
|||
|
|
const notices = useSelect( ( select ) =>
|
|||
|
|
select( noticesStore ).getNotices()
|
|||
|
|
);
|
|||
|
|
return (
|
|||
|
|
<ul>
|
|||
|
|
{ notices.map( ( notice ) => (
|
|||
|
|
<li key={ notice.ID }>{ notice.content }</li>
|
|||
|
|
) ) }
|
|||
|
|
</ul>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
_参数_
|
|||
|
|
|
|||
|
|
- _state_ `Object`: 通知状态
|
|||
|
|
- _context_ `?string`: 可选的分组上下文
|
|||
|
|
|
|||
|
|
_返回值_
|
|||
|
|
|
|||
|
|
- `WPNotice[]`: 通知数组
|
|||
|
|
|
|||
|
|
<!-- END TOKEN(Autogenerated selectors|../../../packages/notices/src/store/selectors.js) -->
|
|||
|
|
|
|||
|
|
## 操作
|
|||
|
|
|
|||
|
|
<!-- START TOKEN(Autogenerated actions|../../../packages/notices/src/store/actions.js) -->
|
|||
|
|
|
|||
|
|
### createErrorNotice
|
|||
|
|
|
|||
|
|
返回用于指示创建错误通知的操作对象。选项文档请参考 `createNotice`。
|
|||
|
|
|
|||
|
|
_相关_
|
|||
|
|
|
|||
|
|
- createNotice
|
|||
|
|
|
|||
|
|
_用法_
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
import { __ } from '@wordpress/i18n';
|
|||
|
|
import { useDispatch } from '@wordpress/data';
|
|||
|
|
import { store as noticesStore } from '@wordpress/notices';
|
|||
|
|
import { Button } from '@wordpress/components';
|
|||
|
|
|
|||
|
|
const ExampleComponent = () => {
|
|||
|
|
const { createErrorNotice } = useDispatch( noticesStore );
|
|||
|
|
return (
|
|||
|
|
<Button
|
|||
|
|
onClick={ () =>
|
|||
|
|
createErrorNotice( __( '发生错误!' ), {
|
|||
|
|
type: 'snackbar',
|
|||
|
|
explicitDismiss: true,
|
|||
|
|
} )
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
{ __(
|
|||
|
|
'生成带有显式关闭按钮的snackbar错误通知'
|
|||
|
|
) }
|
|||
|
|
</Button>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
_参数_
|
|||
|
|
|
|||
|
|
- _content_ `string`: 通知消息
|
|||
|
|
- _options_ `[Object]`: 可选的通知选项
|
|||
|
|
|
|||
|
|
_返回值_
|
|||
|
|
|
|||
|
|
- `Object`: 操作对象
|
|||
|
|
|
|||
|
|
### createInfoNotice
|
|||
|
|
|
|||
|
|
返回用于指示创建信息通知的操作对象。选项文档请参考 `createNotice`。
|
|||
|
|
|
|||
|
|
_相关_
|
|||
|
|
|
|||
|
|
- createNotice
|
|||
|
|
|
|||
|
|
_用法_
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
import { __ } from '@wordpress/i18n';
|
|||
|
|
import { useDispatch } from '@wordpress/data';
|
|||
|
|
import { store as noticesStore } from '@wordpress/notices';
|
|||
|
|
import { Button } from '@wordpress/components';
|
|||
|
|
|
|||
|
|
const ExampleComponent = () => {
|
|||
|
|
const { createInfoNotice } = useDispatch( noticesStore );
|
|||
|
|
return (
|
|||
|
|
<Button
|
|||
|
|
onClick={ () =>
|
|||
|
|
createInfoNotice( __( '有情况发生!' ), {
|
|||
|
|
isDismissible: false,
|
|||
|
|
} )
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
{ __( '生成一个不可关闭的通知' ) }
|
|||
|
|
</Button>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
_参数_
|
|||
|
|
|
|||
|
|
- _content_ `string`: 通知消息
|
|||
|
|
- _options_ `[Object]`: 可选的通知选项
|
|||
|
|
|
|||
|
|
_返回值_
|
|||
|
|
|
|||
|
|
- `Object`: 操作对象
|
|||
|
|
|
|||
|
|
### createNotice
|
|||
|
|
|
|||
|
|
返回用于指示创建通知的操作对象。
|
|||
|
|
|
|||
|
|
_用法_
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
import { __ } from '@wordpress/i18n';
|
|||
|
|
import { useDispatch } from '@wordpress/data';
|
|||
|
|
import { store as noticesStore } from '@wordpress/notices';
|
|||
|
|
import { Button } from '@wordpress/components';
|
|||
|
|
|
|||
|
|
const ExampleComponent = () => {
|
|||
|
|
const { createNotice } = useDispatch( noticesStore );
|
|||
|
|
return (
|
|||
|
|
<Button
|
|||
|
|
onClick={ () => createNotice( 'success', __( '通知消息' ) ) }
|
|||
|
|
>
|
|||
|
|
{ __( '生成成功通知!' ) }
|
|||
|
|
</Button>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
_参数_
|
|||
|
|
|
|||
|
|
- _status_ `string|undefined`: 通知状态(如果传入undefined则为"info")
|
|||
|
|
- _content_ `string`: 通知消息
|
|||
|
|
- _options_ `[Object]`: 通知选项
|
|||
|
|
- _options.context_ `[string]`: 通知分组上下文
|
|||
|
|
- _options.id_ `[string]`: 通知标识符。未指定时自动分配
|
|||
|
|
- _options.isDismissible_ `[boolean]`: 用户是否可关闭通知
|
|||
|
|
- _options.type_ `[string]`: 通知类型,可选 `default` 或 `snackbar`
|
|||
|
|
- _options.speak_ `[boolean]`: 是否向屏幕阅读器播报通知内容
|
|||
|
|
- _options.actions_ `[Array<WPNoticeAction>]`: 与通知一起显示的用户操作
|
|||
|
|
- _options.icon_ `[string]`: 通知显示的图标。仅当类型设置为 `snackbar` 时使用
|
|||
|
|
- _options.explicitDismiss_ `[boolean]`: 通知是否包含显式关闭按钮且不能通过点击通知主体关闭。仅当类型设置为 `snackbar` 时适用
|
|||
|
|
- _options.onDismiss_ `[Function]`: 通知关闭时调用的函数
|
|||
|
|
|
|||
|
|
_返回值_
|
|||
|
|
|
|||
|
|
- `Object`: 操作对象
|
|||
|
|
|
|||
|
|
<!-- END TOKEN(Autogenerated actions|../../../packages/notices/src/store/actions.js) -->
|