javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 17:42:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(toast): add toast documentation and match style guide

Browse Source
This commit is contained in:
Brandy Carney
2018-02-19 16:15:51 -05:00
parent 414b7a5326
commit c6f915e617
2 changed files with 157 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
packages/core/src/components/toast/readme.md
View File

@ -1,5 +1,41 @@
# ion-toast
A Toast is a subtle notification commonly used in modern applications. It can be used to provide feedback about an operation or to display a system message. The toast appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app.
### Creating
All of the toast options should be passed in the first argument of the create method: `create(opts)`. The message to display should be passed in the `message` property. The `showCloseButton` option can be set to true in order to display a close button on the toast. See the properties below for all available options.
### Positioning
Toasts can be positioned at the top, bottom or middle of the viewport. The position can be passed upon creation. The possible values are `top`, `bottom` and `middle`. If the position is not specified, the toast will be displayed at the bottom of the viewport.
### Dismissing
The toast can be dismissed automatically after a specific amount of time by passing the number of milliseconds to display it in the `duration` of the toast options. If `showCloseButton` is set to true, then the close button will dismiss the toast. To dismiss the toast after creation, call the `dismiss()` method on the instance.
```html
<ion-button onClick="presentToast()">
Show Toast
</ion-button>
```
```javascript
async function presentToast() {
const toastController = document.querySelector('ion-toast-controller');
await toastController.componentOnReady();
const toastElement = await toastController.create({
message: 'click to close',
duration: 300,
position: 'top',
showCloseButton: true,
closeButtonText: 'closing time'
});
return await toastElement.present();
}
```
<!-- Auto Generated Below -->
@ -11,61 +47,80 @@
string
Text to display in the close button.
#### cssClass
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.
#### dismissOnPageChange
boolean
If true, the toast will dismiss when the page changes. Defaults to `false`.
#### duration
number
How many milliseconds to wait before hiding the toast. By default, it will show
until `dismiss()` is called.
#### enterAnimation
Animation to use when the toast is presented.
#### leaveAnimation
Animation to use when the toast is dismissed.
#### message
string
Message to be shown in the toast.
#### position
string
The position of the toast on the screen. Possible values: "top", "middle", "bottom".
#### showCloseButton
boolean
#### toastId
number
If true, the close button will be displayed. Defaults to `false`.
#### translucent
boolean
If true, the toast will be translucent. Defaults to `false`.
#### willAnimate
boolean
If true, the toast will animate. Defaults to `true`.
## Attributes
@ -73,61 +128,80 @@ boolean
string
Text to display in the close button.
#### css-class
string
Additional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.
#### dismiss-on-page-change
boolean
If true, the toast will dismiss when the page changes. Defaults to `false`.
#### duration
number
How many milliseconds to wait before hiding the toast. By default, it will show
until `dismiss()` is called.
#### enter-animation
Animation to use when the toast is presented.
#### leave-animation
Animation to use when the toast is dismissed.
#### message
string
Message to be shown in the toast.
#### position
string
The position of the toast on the screen. Possible values: "top", "middle", "bottom".
#### show-close-button
boolean
#### toast-id
number
If true, the close button will be displayed. Defaults to `false`.
#### translucent
boolean
If true, the toast will be translucent. Defaults to `false`.
#### will-animate
boolean
If true, the toast will animate. Defaults to `true`.
## Events
@ -165,9 +239,13 @@ Emitted before the toast has presented.
#### dismiss()
Dismiss the toast overlay after it has been presented.
#### present()
Present the toast overlay after it has been created.
----------------------------------------------

91
packages/core/src/components/toast/toast.tsx
View File

@ -21,12 +21,75 @@ import mdLeaveAnimation from './animations/md.leave';
}
})
export class Toast {
private animation: Animation | null;
toastId: number;
@Element() private el: HTMLElement;
mode: string;
color: string;
private animation: Animation | null;
@Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
@Prop({ context: 'config' }) config: Config;
@Prop({ context: 'dom' }) dom: DomController;
@Element() private el: HTMLElement;
/**
* Animation to use when the toast is presented.
*/
@Prop() enterAnimation: AnimationBuilder;
/**
* Animation to use when the toast is dismissed.
*/
@Prop() leaveAnimation: AnimationBuilder;
/**
* Text to display in the close button.
*/
@Prop() closeButtonText: string;
/**
* Additional classes to apply for custom CSS. If multiple classes are
* provided they should be separated by spaces.
*/
@Prop() cssClass: string;
/**
* If true, the toast will dismiss when the page changes. Defaults to `false`.
*/
@Prop() dismissOnPageChange: boolean;
/**
* How many milliseconds to wait before hiding the toast. By default, it will show
* until `dismiss()` is called.
*/
@Prop() duration: number;
/**
* Message to be shown in the toast.
*/
@Prop() message: string;
/**
* The position of the toast on the screen. Possible values: "top", "middle", "bottom".
*/
@Prop() position: string;
/**
* If true, the close button will be displayed. Defaults to `false`.
*/
@Prop() showCloseButton = false;
/**
* If true, the toast will be translucent. Defaults to `false`.
*/
@Prop() translucent = false;
/**
* If true, the toast will animate. Defaults to `true`.
*/
@Prop() willAnimate = true;
/**
* Emitted after the toast has loaded.
@ -58,24 +121,9 @@ export class Toast {
*/
@Event() ionToastDidUnload: EventEmitter<ToastEventDetail>;
@Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
@Prop({ context: 'config' }) config: Config;
@Prop({ context: 'dom' }) dom: DomController;
@Prop() message: string;
@Prop() cssClass: string;
@Prop() duration: number;
@Prop() showCloseButton: boolean;
@Prop() closeButtonText: string;
@Prop() dismissOnPageChange: boolean;
@Prop() position: string;
@Prop() translucent = false;
@Prop() toastId: number;
@Prop() willAnimate = true;
@Prop() enterAnimation: AnimationBuilder;
@Prop() leaveAnimation: AnimationBuilder;
/**
* Present the toast overlay after it has been created.
*/
@Method()
present() {
if (this.animation) {
@ -102,6 +150,9 @@ export class Toast {
});
}
/**
* Dismiss the toast overlay after it has been presented.
*/
@Method()
dismiss(data?: any, role?: string) {
if (this.animation) {