A Material design dialog with compatibility with Anypoint platform
npm install @anypoint-web-components/anypoint-dialogA 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.


``sh`
npm install @anypoint-web-components/anypoint-dialog --save
` Long content...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 { Long content...
render() {
return html
Dialog title
;
}
_dialogCloseHandler(e) {
if (e.detail.confirmed) {
// ...
}
}
}
customElements.define('sample-element', SampleElement);
`
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.
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.
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.
`sh`
git clone https://github.com/anypoint-web-components/anypoint-dialog
cd anypoint-dialog
npm install
`sh`
npm start
`sh``
npm test