Skip to content

Commit

Permalink
Merge pull request #3748 from cnAbp/Translate
Browse files Browse the repository at this point in the history
Update document
  • Loading branch information
maliming committed Apr 26, 2020
2 parents 3dced6e + 53087de commit 6664b0e
Show file tree
Hide file tree
Showing 7 changed files with 336 additions and 4 deletions.
1 change: 1 addition & 0 deletions docs/en/UI/Angular/Toaster-Service.md
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,7 @@ clear(): void
Removes all open toasts.

## See Also

- [Confirmation Popup](./Confirmation-Service.md)

## What's Next?
Expand Down
159 changes: 159 additions & 0 deletions docs/zh-Hans/UI/Angular/Confirmation-Service.md
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)
2 changes: 1 addition & 1 deletion docs/zh-Hans/UI/Angular/Permission-Management.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,4 +76,4 @@ const routes: Routes = [

## 下一步是什么?

* [Config State](./Config-State.md)
* [确认弹层](./Confirmation-Service.md)
155 changes: 155 additions & 0 deletions docs/zh-Hans/UI/Angular/Toaster-Service.md
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)
Binary file added docs/zh-Hans/UI/Angular/images/confirmation.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/zh-Hans/UI/Angular/images/toast.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 20 additions & 3 deletions docs/zh-Hans/docs-nav.json
Original file line number Diff line number Diff line change
Expand Up @@ -218,8 +218,11 @@
},
{
"text": "领域驱动设计",
"path": "Domain-Driven-Design.md",
"items": [
{
"text": "概述",
"path": "Domain-Driven-Design.md"
},
{
"text": "领域层",
"items": [
Expand Down Expand Up @@ -324,6 +327,14 @@
"text": "权限管理",
"path": "UI/Angular/Permission-Management.md"
},
{
"text": "确认弹层",
"path": "UI/Angular/Confirmation-Service.md"
},
{
"text": "Toast Overlay",
"path": "UI/Angular/Toaster-Service.md"
},
{
"text": "配置状态",
"path": "UI/Angular/Config-State.md"
Expand Down Expand Up @@ -372,8 +383,11 @@
},
{
"text": "数据访问",
"path":"Data-Access.md",
"items": [
{
"text": "概述",
"path": "Data-Access.md"
},
{
"text": "连接字符串",
"path": "Connection-Strings.md"
Expand Down Expand Up @@ -457,8 +471,11 @@
},
{
"text": "启动模板",
"path": "Startup-Templates/Index.md",
"items": [
{
"text": "概述",
"path": "Startup-Templates/Index.md"
},
{
"text": "应用程序",
"path": "Startup-Templates/Application.md"
Expand Down

0 comments on commit 6664b0e

Please sign in to comment.