-
Notifications
You must be signed in to change notification settings - Fork 3.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3748 from cnAbp/Translate
Update document
- Loading branch information
Showing
7 changed files
with
336 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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: | ||
|
||
![confirmation](./images/confirmation.png) | ||
|
||
### 如何删除一个确认弹层 | ||
|
||
打开的确认弹出窗口可以通过 `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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -76,4 +76,4 @@ const routes: Routes = [ | |
|
||
## 下一步是什么? | ||
|
||
* [Config State](./Config-State.md) | ||
* [确认弹层](./Confirmation-Service.md) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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](./images/toast.png) | ||
|
||
### 如何删除 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) |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters