mirror of https://github.com/abpframework/abp.git
liangshiwei
6 years ago
7 changed files with 336 additions and 4 deletions
@ -0,0 +1,159 @@ |
|||
# 确认弹层 |
|||
|
|||
你可以使用@abp/ng.theme.shared包中提供 `ConfirmationService` 放置在你项目的级别来显示确认弹层 |
|||
|
|||
## 入门 |
|||
|
|||
你不必在模块或组件级别提供 `ConfirmationService`,它已经在**根**级别提供,你可以在你的组件,指令或服务直接注入并使用它. |
|||
|
|||
```js |
|||
import { ConfirmationService } from '@abp/ng.theme.shared'; |
|||
|
|||
@Component({ |
|||
/* class metadata here */ |
|||
}) |
|||
class DemoComponent { |
|||
constructor(private confirmation: ConfirmationService) {} |
|||
} |
|||
``` |
|||
|
|||
## 用法 |
|||
|
|||
你可以使用 `ConfirmationService` 的 `success`, `warn`, `error` 和 `info` 方法显示一个确认弹层. |
|||
|
|||
### 如何显示一个确认弹层 |
|||
|
|||
```js |
|||
const confirmationStatus$ = this.confirmation.success('Message', 'Title'); |
|||
``` |
|||
|
|||
- `ConfirmationService` 方法接收三个参数,分别是 `message`, `title`, 和 `options`. |
|||
- `success`, `warn`, `error`, 和 `info` 方法返回一个[RxJS Subject](https://rxjs-dev.firebaseapp.com/guide/subject)监听确认弹层关闭事件. 事件值类型是 [`Confirmation.Status`](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/theme-shared/src/lib/models/confirmation.ts#L24)枚举. |
|||
|
|||
### 如何监听关闭事件 |
|||
|
|||
你可以订阅确认弹层关闭事件,例: |
|||
|
|||
```js |
|||
import { Confirmation, ConfirmationService } from '@abp/ng.theme.shared'; |
|||
|
|||
constructor(private confirmation: ConfirmationService) {} |
|||
|
|||
this.confirmation |
|||
.warn('::WillBeDeleted', { key: '::AreYouSure', defaultValue: 'Are you sure?' }) |
|||
.subscribe((status: Confirmation.Status) => { |
|||
// your code here |
|||
}); |
|||
``` |
|||
|
|||
- `message` 和 `title` 参数接收字符串,本地化Key或本地化对象. 参阅[本地化文档](./Localization.md) |
|||
- `Confirmation.Status` 是一个枚举,具有三个属性; |
|||
- `Confirmation.Status.confirm` 是一个关闭事件值,当通过确认按钮关闭弹出窗口时触发此事件. |
|||
- `Confirmation.Status.reject` 是一个关闭事件值,当通过“取消”按钮关闭弹出窗口时触发此事件. |
|||
- `Confirmation.Status.dismiss` 是一个关闭事件值,当通过按Escape键关闭弹出窗口时触发此事件. |
|||
|
|||
如果你对确认状态不感兴趣,则不必订阅返回的observable: |
|||
|
|||
```js |
|||
this.confirmation.error('You are not authorized.', 'Error'); |
|||
``` |
|||
|
|||
### 如何显示具有给定选项的确认弹层 |
|||
|
|||
选项可以作为第三个参数传递给`success`, `warn`, `error`, 和 `info` 方法: |
|||
|
|||
```js |
|||
const options: Partial<Confirmation.Options> = { |
|||
hideCancelBtn: false, |
|||
hideYesBtn: false, |
|||
cancelText: 'Close', |
|||
yesText: 'Confirm', |
|||
messageLocalizationParams: ['Demo'], |
|||
titleLocalizationParams: [], |
|||
}; |
|||
|
|||
this.confirmation.warn( |
|||
'AbpIdentity::RoleDeletionConfirmationMessage', |
|||
'Are you sure?', |
|||
options, |
|||
); |
|||
``` |
|||
|
|||
- `hideCancelBtn` 选项为 `true` 时隐藏取消按钮. 默认值为 `false`. |
|||
- `hideYesBtn` 选项为 `true` 时隐藏确认按钮. 默认值为 `false`. |
|||
- `cancelText` 是取消按钮的文本,可以传递本地化键或本地化对象. 默认值是 `AbpUi::Cancel`. |
|||
- `yesText` 是确定按钮的文本,可以传递本地化键或本地化对象. 默认值是 `AbpUi::Yes`. |
|||
- `messageLocalizationParams`是用于消息本地化的插值参数. |
|||
- `titleLocalizationParams` 是标题本地化的插值参数. |
|||
|
|||
With the options above, the confirmation popup looks like this: |
|||
|
|||
 |
|||
|
|||
### 如何删除一个确认弹层 |
|||
|
|||
打开的确认弹出窗口可以通过 `clear` 方法手动删除: |
|||
|
|||
```js |
|||
this.confirmation.clear(); |
|||
``` |
|||
|
|||
## API |
|||
|
|||
### success |
|||
|
|||
```js |
|||
success( |
|||
message: Config.LocalizationParam, |
|||
title: Config.LocalizationParam, |
|||
options?: Partial<Confirmation.Options>, |
|||
): Observable<Confirmation.Status> |
|||
``` |
|||
|
|||
> 请参见[`Config.LocalizationParam`类型](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/core/src/lib/models/config.ts#L46)和[Confirmation名称空间](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/theme-shared/src/lib/models/confirmation.ts) |
|||
|
|||
|
|||
### warn |
|||
|
|||
```js |
|||
warn( |
|||
message: Config.LocalizationParam, |
|||
title: Config.LocalizationParam, |
|||
options?: Partial<Confirmation.Options>, |
|||
): Observable<Confirmation.Status> |
|||
``` |
|||
|
|||
### error |
|||
|
|||
```js |
|||
error( |
|||
message: Config.LocalizationParam, |
|||
title: Config.LocalizationParam, |
|||
options?: Partial<Confirmation.Options>, |
|||
): Observable<Confirmation.Status> |
|||
``` |
|||
|
|||
### info |
|||
|
|||
```js |
|||
info( |
|||
message: Config.LocalizationParam, |
|||
title: Config.LocalizationParam, |
|||
options?: Partial<Confirmation.Options>, |
|||
): Observable<Confirmation.Status> |
|||
``` |
|||
|
|||
### clear |
|||
|
|||
```js |
|||
clear( |
|||
status: Confirmation.Status = Confirmation.Status.dismiss |
|||
): void |
|||
``` |
|||
|
|||
- `status` 参数是确认关闭事件的值. |
|||
|
|||
|
|||
## 下一步是什么? |
|||
|
|||
- [Toast Overlay](./Toaster-Service.md) |
|||
@ -0,0 +1,155 @@ |
|||
# Toast Overlay |
|||
|
|||
你可以通常将@abp/ng.theme.shared包提供的 `ToasterService` 放置在你项目的根级别下以覆盖显示消息. |
|||
|
|||
## 入门 |
|||
|
|||
你不必在模块或组件级别提供 `ToasterService`,它已经在**根**级别提供,你可以在你的组件,指令或服务直接注入并使用它. |
|||
|
|||
```js |
|||
import { ToasterService } from '@abp/ng.theme.shared'; |
|||
|
|||
@Component({ |
|||
/* class metadata here */ |
|||
}) |
|||
class DemoComponent { |
|||
constructor(private toaster: ToasterService) {} |
|||
} |
|||
``` |
|||
|
|||
## 用法 |
|||
|
|||
你可以使用 `ToasterService` 的 `success`, `warn`, `error` 和 `info` 方法显示一个overlay. |
|||
|
|||
### 如何显示一个Toast Overlay |
|||
|
|||
```js |
|||
this.toast.success('Message', 'Title'); |
|||
``` |
|||
|
|||
- `ToasterService` 方法接收三个参数,分别是 `message`, `title`, 和 `options`. |
|||
- `success`, `warn`, `error`, 和 `info` 方法返回一个已打开的 toast overlay Id. 可以使用此id删除toast. |
|||
|
|||
### 如何显示具有给定选项的Toast Overlay |
|||
|
|||
选项可以作为第三个参数传递给`success`, `warn`, `error`, 和 `info` 方法: |
|||
|
|||
```js |
|||
import { Toaster, ToasterService } from '@abp/ng.theme.shared'; |
|||
//... |
|||
|
|||
constructor(private toaster: ToasterService) {} |
|||
|
|||
//... |
|||
const options: Partial<Toaster.ToastOptions> = { |
|||
life: 10000, |
|||
sticky: false, |
|||
closable: true, |
|||
tapToDismiss: true, |
|||
messageLocalizationParams: ['Demo', '1'], |
|||
titleLocalizationParams: [] |
|||
}; |
|||
|
|||
this.toaster.error('AbpUi::EntityNotFoundErrorMessage', 'AbpUi::Error', options); |
|||
``` |
|||
|
|||
- `life` 选项是关闭的时间毫秒数. 默认值是 `5000`. |
|||
- `sticky` 选项为 `true` 时忽略 `life` 选项,将toast overlay留在屏幕上. 默认值是 `false`. |
|||
- `closable` 选项为 `true` 时在toast overlay上显示关闭图标. 默认值是 `true`. |
|||
- `tapToDismiss` 选项为 `true` 允许通过单击关闭toast overlay. 默认值是 `false`. |
|||
- `yesText` 是确定按钮的文本,可以传递本地化键或本地化对象. 默认值是 `AbpUi::Yes`. |
|||
- `messageLocalizationParams` 是用于消息本地化的插值参数. |
|||
- `titleLocalizationParams` 是标题本地化的插值参数. |
|||
|
|||
使用上面的选项,toast overlay看起来像这样: |
|||
|
|||
 |
|||
|
|||
### 如何删除 Toast Overlay |
|||
|
|||
已打开的toast overlay可以通过手动调用 `remove` 方法传递指定的 toast `id`删除. |
|||
|
|||
```js |
|||
const toastId = this.toast.success('Message', 'Title') |
|||
|
|||
this.toast.remove(toastId); |
|||
``` |
|||
|
|||
### 如何删除所有的Toasts |
|||
|
|||
可以手动调用 `clear` 方法删除所有的已打开的toasts. |
|||
|
|||
```js |
|||
this.toast.clear(); |
|||
``` |
|||
|
|||
## API |
|||
|
|||
### success |
|||
|
|||
```js |
|||
success( |
|||
message: Config.LocalizationParam, |
|||
title: Config.LocalizationParam, |
|||
options?: Partial<Toaster.ToastOptions>, |
|||
): number |
|||
``` |
|||
|
|||
- `Config` 命令空间可以从 `@abp/ng.core` 导入. |
|||
- `Toaster` 命令空间可以从 `@abp/ng.theme.shared` 导入. |
|||
|
|||
> 请参见[`Config.LocalizationParam`类型](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/core/src/lib/models/config.ts#L46)和[`Toaster` namespace](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/theme-shared/src/lib/models/toaster.ts) |
|||
|
|||
### warn |
|||
|
|||
```js |
|||
warn( |
|||
message: Config.LocalizationParam, |
|||
title: Config.LocalizationParam, |
|||
options?: Partial<Toaster.ToastOptions>, |
|||
): number |
|||
``` |
|||
|
|||
### error |
|||
|
|||
```js |
|||
error( |
|||
message: Config.LocalizationParam, |
|||
title: Config.LocalizationParam, |
|||
options?: Partial<Toaster.ToastOptions>, |
|||
): number |
|||
``` |
|||
|
|||
### info |
|||
|
|||
```js |
|||
info( |
|||
message: Config.LocalizationParam, |
|||
title: Config.LocalizationParam, |
|||
options?: Partial<Toaster.ToastOptions>, |
|||
): number |
|||
``` |
|||
|
|||
### remove |
|||
|
|||
```js |
|||
remove(id: number): void |
|||
``` |
|||
|
|||
按给定的id移除打开的toast. |
|||
|
|||
### clear |
|||
|
|||
```js |
|||
clear(): void |
|||
``` |
|||
|
|||
删除所有打开的toasts. |
|||
|
|||
## 另请参阅 |
|||
|
|||
- [Confirmation Popup](./Confirmation-Service.md) |
|||
|
|||
## 确认弹层? |
|||
|
|||
- [Config State](./Config-State.md) |
|||
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 20 KiB |
Loading…
Reference in new issue