|
|
|
@ -0,0 +1,157 @@
|
|
|
|
|
# Toast Overlay
|
|
|
|
|
|
|
|
|
|
You can use the `ToasterService` in @abp/ng.theme.shared package to display messages in an overlay by placing at the root level in your project.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Getting Started
|
|
|
|
|
|
|
|
|
|
You do not have to provide the `ToasterService` at module or component level, because it is already **provided in root**. You can inject and start using it immediately in your components, directives, or services.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
import { ToasterService } from '@abp/ng.theme.shared';
|
|
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
|
/* class metadata here */
|
|
|
|
|
})
|
|
|
|
|
class DemoComponent {
|
|
|
|
|
constructor(private toaster: ToasterService) {}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Usage
|
|
|
|
|
|
|
|
|
|
You can use the `success`, `warn`, `error`, and `info` methods of `ToasterService` to display an overlay.
|
|
|
|
|
|
|
|
|
|
### How to Display a Toast Overlay
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
this.toast.success('Message', 'Title')
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
- The `ToasterService` methods accept three parameters that are `message`, `title`, and `options`.
|
|
|
|
|
- `success`, `warn`, `error`, and `info` methods return the id of opened toast overlay. The toast can be removed with this id.
|
|
|
|
|
|
|
|
|
|
### How to Display a Toast Overlay With Given Options
|
|
|
|
|
|
|
|
|
|
Options can be passed as the third parameter to `success`, `warn`, `error`, and `info` methods:
|
|
|
|
|
|
|
|
|
|
```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` option is the value in milliseconds that determines the closing time. Default value is `5000`
|
|
|
|
|
- `sticky` option is the boolean value. If the value passed `true`, toast overlay keep on the screen by ignoring the life option. Default value is `false`
|
|
|
|
|
- `closable` option is the boolean value that displays the close icon over the toast overlay or not. Default value is `true`.
|
|
|
|
|
- `tapToDismiss` option is the boolean value that allows closing the toast overlay by clicking over. Default value is `false`.
|
|
|
|
|
- `yesText` is the text of the confirm button. A localization key or localization object can be passed. Default value is `AbpUi::Yes`
|
|
|
|
|
- `messageLocalizationParams` is the interpolation parameters of the message localization.
|
|
|
|
|
- `titleLocalizationParams` is the interpolation parameters of the title localization.
|
|
|
|
|
|
|
|
|
|
With the above options, the toast overlay looks like this:
|
|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
|
|
### How to Remove a Toast Overlay
|
|
|
|
|
|
|
|
|
|
The open toast overlay can be removed manually via the `remove` method by passing the `id` of toast:
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
const toastId = this.toast.success('Message', 'Title')
|
|
|
|
|
|
|
|
|
|
this.toast.remove(toastId);
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### How to Remove All Toasts
|
|
|
|
|
|
|
|
|
|
The all open toasts can be removed manually via the `clear` method:
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
this.toast.clear();
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## API
|
|
|
|
|
|
|
|
|
|
### success
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
success(
|
|
|
|
|
message: Config.LocalizationParam,
|
|
|
|
|
title: Config.LocalizationParam,
|
|
|
|
|
options?: Partial<Toaster.ToastOptions>,
|
|
|
|
|
): number
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
- `Config` namespace can be imported from `@abp/ng.core`.
|
|
|
|
|
- `Toaster` namespace can be imported from `@abp/ng.theme.shared`.
|
|
|
|
|
|
|
|
|
|
> See the [`Config.LocalizationParam` type](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/core/src/lib/models/config.ts#L46) and [`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
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Removes an open toast by the given id.
|
|
|
|
|
|
|
|
|
|
### clear
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
clear(): void
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Removes all open toasts.
|
|
|
|
|
|
|
|
|
|
## See Also
|
|
|
|
|
- [Confirmation Popup](./Confirmation-Service.md)
|
|
|
|
|
|
|
|
|
|
## What's Next?
|
|
|
|
|
|
|
|
|
|
- [Config State](./Config-State.md)
|