diff --git a/packages/core/src/components/toast/readme.md b/packages/core/src/components/toast/readme.md
index b4830054e0..24cd5e2096 100644
--- a/packages/core/src/components/toast/readme.md
+++ b/packages/core/src/components/toast/readme.md
@@ -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
+
+ Show Toast
+
+```
+
+```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();
+}
+```
@@ -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.
+
----------------------------------------------
diff --git a/packages/core/src/components/toast/toast.tsx b/packages/core/src/components/toast/toast.tsx
index d93e781ddf..a54f7047de 100644
--- a/packages/core/src/components/toast/toast.tsx
+++ b/packages/core/src/components/toast/toast.tsx
@@ -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;
- @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) {