anypoint-dialog

A material design dialog, also styled for Anypoint platform.

Anypoint web components are set of components that allows to build Anypoint enabled UI in open source projects.

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.



Usage

$3

``sh
npm install @anypoint-web-components/anypoint-dialog --save
`

$3

`html








Dialog title

`js
import { LitElement, html } from 'lit-element';
import '@anypoint-web-components/anypoint-dialog/anypoint-dialog.js';
import '@anypoint-web-components/anypoint-dialog/anypoint-dialog-scrollable.js';
import '@anypoint-web-components/anypoint-button/anypoint-button.js';

class SampleElement extends LitElement {
render() {
return html

Dialog title

_dialogCloseHandler(e) {
if (e.detail.confirmed) {
// ...
}
}
}
customElements.define('sample-element', SampleElement);
`

$3

Button with "dialog-dismiss" attribute will dismiss the dialog with "confirmed" property on a detail object of "overlay-closed" event set to false.

Button with "dialog-confirm" attribute will close the dialog with "confirmed" property on a detail object of "overlay-closed" event set to true.

$3

If the content of the dialog may exceed window size then use anypoint-dialog-scrollable as a content wrapper.
It has additional logic to keep the content in place. Otherwise use regular div or paragraph.

$3

Set "modal" property to true to render the dialog over a scrim, with ESC button handler and mouse click disabled.
The user can dismiss the dialog only by using dialog actions.

Development

`sh
git clone https://github.com/anypoint-web-components/anypoint-dialog
cd anypoint-dialog
npm install
`

$3

`sh
npm start
`

$3

`sh
npm test
``