Components chevron_right Toast

GitHub

Component Usage

 
{{#if this.showToast}}
  <PaperToast @duration={{this.duration}} @position={{concat this.positionY " " this.positionX}} @capsule={{this.capsule}} @swipeToClose={{this.swipeToClose}} @onClose={{action "closeToast"}} as |toast|>
    <toast.text>Hello</toast.text>
    <PaperButton @accent={{true}} @onClick={{action "buttonAction"}}>Undo</PaperButton>
  </PaperToast>
{{/if}}

{{#if this.showToastWithout}}
  <PaperToast @duration={{this.duration}} @position={{concat this.positionY " " this.positionX}} @capsule={{this.capsule}} @swipeToClose={{this.swipeToClose}} @onClose={{action "closeToastWithout"}} as |toast|>
    <toast.text>Hello</toast.text>
  </PaperToast>
{{/if}}

Open a toast over the app's content. Press escape, swipe or timeout to close the toast.

Options

Left
Right
Top
Bottom
capsule
swipeToClose

duration

watch_later
3000

Usage

Option Type Description
capsule boolean Controls whether the capsule class is added to the toast.Defaults to false
duration number or false Timeout in milliseconds, set to false to disable timeout. Defaults to 3000
escapeToClose boolean Causes pressing escape to close the toast. Defaults to false.
parent element or selector Existing element where the modal and backdrop will be rendered
position string Possible values are bottom left (default), bottom right, top left and top right
swipeToClose boolean Causes swiping to trigger the onClose handler. Defaults to true.
Actions
onClose action An action to be executed when the toast is closed, e.g. by pressing escape, swiping or timeout.

Paper Toaster Service

 
openServiceToast() {
  this.paperToaster.show(this.toastText, {
    duration: 4000,
    toastClass: this.toastClass
  });
},

openServiceActionToast() {
  this.paperToaster.show(this.toastText, {
    duration: 4000,
    toastClass: this.toastClass,
    action: {
      label: 'Undo',
      accent: true,
      onClick() {
        alert('toast action pressed');
      }
    }
  });
},

Open a toast via paperToaster service and {{paper-toaster}} component.

Options

 Toast class
[none]
md-accent
md-warn

Usage

Option Type Description
Methods
cancelToast(toast) Closes or cancel a given toast.
show(text[, options]) Toast Display a toast that renders given text.
showComponent(componentName[, options]) Toast Display a toast that renders a component.
Options
action.accent boolean Wether or not you want the action button to be higlighted with the accent color.
action.label string The label of the action button.
action.onClick function This function gets called when the button is pressed.
action.primary boolean Wether or not you want the action button to be higlighted with the primary color.
action.warn boolean Wether or not you want the action button to be higlighted with the warn color.
duration number or false Timeout in milliseconds. Defaults to 3000. Use false to keep it open until a cancelToast is used.
onClose function You can pass in a function the will be called back after the toast closes.
position string Possible values are bottom left (default), bottom right, top left and top right
toastClass string CSS class to be applied to the md-toast element

Application defaults

You can define a default duration, toastClass and position for your application by adding in your config/environment.js file: 

ENV['ember-paper'] = {
  'paper-toaster': {
    position: 'bottom right',
    duration: 5000,
    toastClass: 'my-app-toast'
  }
};