<etools-dialog>
Simple dialog element. Main features:
- simple dialog with configurable properties and 2 style themes (check demo for details)
- loading message functionality for cases when dialog data is saved
- dynamic dialog creation utility (ex: warning/confirmation messages displayed in dialogs)
Usage
In order for this component to work properly please first run
$ npm install --save web-animations-js
and then include web-animations-next-lite.min.js
in your index.html file.
<link rel="import" href="../scripts/web-animations.html" />
Simple dialog:
<etools-dialog size="md" opened="[[opened]]" on-close="onCloseActionHandler" dialog-title="Some title">
Dialog content goes here... as text or html
</etools-dialog>
onCloseActionHandler(e);
{
if (e.detail.confirmed === true) {
// ok action
} else {
// cancel action
}
}
Install & serve element locally to view demo and detailed documentation.
Install
$ npm i --save @unicef-polymer/etools-dialog
Linting the code
Install local npm packages (run npm install
)
Then just run the linting task
$ npm run lint
Preview element locally
Install needed dependencies by running: $ npm install
.
Make sure you have the Polymer CLI installed. Then run $ polymer serve
to serve your element application locally.
Running Tests
TODO: improve and add more tests
$ polymer test
Styling
Custom property | Description | Default |
---|---|---|
--etools-dialog-confirm-btn-text-color |
dialog confirmation button default text color | #fff |
etools-dialog::part(ed-title) -> :part(title) |
etools-dialog title shadow part | {} |
etools-dialog::part(ed-button-styles) -> shouldn't be needed, but there is :part(footer) |
etools-dialog button shadow part | {} |
etools-dialog::part(ed-scrollable) -> :part(body) |
etools-dialog scrollable shadow part | {} |
Circle CI
Package will be automatically published after tag push (git tag 1.2.3
, git push --tags
). Tag name must correspond to SemVer (Semantic Versioning) rules.
Examples:
Version match | Result |
---|---|
1.2.3 |
match |
1.2.3-pre |
match |
1.2.3+build |
match |
1.2.3-pre+build |
match |
v1.2.3-pre+build |
match |
1.2 |
no match |
You can see more details here