ember-paper - The Ember approach to Material Design.

{{#if this.showDialogWithParent}}
  <PaperDialog @class="flex-50" @onClose={{action "closeDialogWithParent" "cancel"}} @parent="#paper-dialog-demo" @origin={{this.dialogOrigin}} @clickOutsideToClose={{true}}>
    <form>
      <PaperToolbar>
        <PaperToolbarTools>
          <h2>Mango (Fruit)</h2>
          <span class="flex"></span>
          <PaperButton @iconButton={{true}} @onClick={{action "closeDialogWithParent" "cancel"}}>
            <PaperIcon @icon="close" />
          </PaperButton>
        </PaperToolbarTools>
      </PaperToolbar>

      <PaperDialogContent>
        <p>
          This is a dialog rendered into a specific element. Clicking outside the dialog will close it.
        </p>
      </PaperDialogContent>

      <PaperDialogActions @class="layout-row">
        <span class="flex"></span>
        <PaperButton @onClick={{action "closeDialogWithParent" "cancel"}}>
          Cancel
        </PaperButton>
        <PaperButton @onClick={{action "closeDialogWithParent" "ok"}}>
          OK
        </PaperButton>
      </PaperDialogActions>
    </form>
  </PaperDialog>
{{/if}}

{{#if this.showDialog}}
  <PaperDialog @class="flex-77" @onClose={{action "closeDialog" "cancel"}} @origin={{this.dialogOrigin}} @clickOutsideToClose={{true}}>
    <PaperToolbar>
      <PaperToolbarTools>
        <h2>Mango (Fruit)</h2>
        <span class="flex"></span>
        <PaperButton @iconButton={{true}} @onClick={{action "closeDialog" "cancel"}}><PaperIcon @icon="close" /></PaperButton>
      </PaperToolbarTools>
    </PaperToolbar>

    <PaperDialogContent>
      <p>
        The mango is a juicy stone fruit belonging to the genus Mangifera, consisting of numerous tropical fruiting trees, cultivated mostly for edible fruit. The majority of these species are found in nature as wild mangoes. They all belong to the flowering plant family Anacardiaceae. The mango is native to South and Southeast Asia, from where it has been distributed worldwide to become one of the most cultivated fruits in the tropics.
      </p>
      <img style="margin: auto; max-width: 100%;" alt="Lush mango tree" src="https://www.stockvault.net/data/2011/03/20/119586/preview16.jpg">
    </PaperDialogContent>

    <PaperDialogActions @class="layout-row">
      <PaperButton @href="http://en.wikipedia.org/wiki/Mango" @target="_blank">More on Wikipedia</PaperButton>
      <span class="flex"></span>
      <PaperButton @onClick={{action "closeDialog" "cancel"}}>Cancel</PaperButton>
      <PaperButton @onClick={{action "closeDialog" "ok"}}>OK</PaperButton>
    </PaperDialogActions>
  </PaperDialog>
{{/if}}

{{#if this.showPromptDialog}}
  <PaperDialog @fullscreen={{this.fullscreen}} @onClose={{action "closePromptDialog" "cancel"}} @origin={{this.dialogOrigin}}>

    <PaperDialogContent>
      <h2 class="md-title">What would you name your dog?</h2>
      <p>Bowser is a common name.</p>
      <PaperInput @placeholder="dog name" @autofocus={{true}} @value={{this.dogName}} @onChange={{action (mut this.dogName)}} />
      <div>
        <PaperCheckbox @value={{this.fullscreen}} @onChange={{action (mut this.fullscreen)}}>Display fullscreen at small window size breakpoints</PaperCheckbox>
      </div>
    </PaperDialogContent>

    <PaperDialogActions @class="layout-row">
      <span class="flex"></span>
      <PaperButton @primary={{true}} @onClick={{action "closePromptDialog" "cancel"}}>I'm a cat person</PaperButton>
      <PaperButton @primary={{true}} @onClick={{action "closePromptDialog" "ok" this.dogName}}>Okay!</PaperButton>
    </PaperDialogActions>

  </PaperDialog>
{{/if}}

{{#if this.showAnimatedDialog}}
  <PaperDialog @fullscreen={{this.fullscreen}} @onClose={{action "closeAnimatedDialog"}} @openFrom="#paper-dialog-demo" @closeTo="#bottom-of-card">

    <PaperDialogContent>
      <h2 class="md-title">This dialog is animated!</h2>
      <p>It opened from above, but it will close to below.</p>
    </PaperDialogContent>

    <PaperDialogActions @class="layout-row">
      <span class="flex"></span>
      <PaperButton @primary={{true}} @onClick={{action "closeAnimatedDialog"}}>Okay!</PaperButton>
    </PaperDialogActions>

  </PaperDialog>
{{/if}}

Open a dialog over the app's content. Press escape or click outside to close the dialog and send focus back to the triggering button.

Usage

Option	Type	Description
`clickOutsideToClose`	boolean	Causes clicking on the backdrop to trigger the `onClose` handler. Defaults to `false`.
`closeTo`	element or selector	Target for closing the dialog with a transition.
`escapeToClose`	boolean	Causes pressing escape to close the dialog. Defaults to `true`.
`focusOnOpen`	boolean	Causes the initial focus to be on an inner element with the autofocus attribute, rather than the last button inside `{{paper-dialog-actions}}`. Defaults to `true`.
`fullscreen`	boolean	Causes the dialog to become fullscreen at smaller breakpoints.
`opaque`	boolean	Causes the backdrop to become opaque. Defaults to `true`.
`openFrom`	element or selector	Source for opening the dialog with a transition.
`origin`	element or selector	If present, the dialog will use it as openFrom and closeTo. Also, focus will be returned to this element once the dialog closes.
`parent`	element or selector	Existing element where the modal and backdrop will be rendered
Actions
`onClose`	action	An action to be executed when the dialog is closed, e.g. by pressing escape.

Components chevron_right Dialog

Basic Usage

Usage