Form side drawer element
npm install @exmg/exm-form-drawer bash
npm install @exmg/exm-form-drawer
`
Before start ensure that you have installed web-animation-js. It is required by @polymer/paper-dialog.
`bash
npm install web-animation-js
`
Load this script in index.html
`html
`
Some dependencies @exmg/exm-paper-combobox use @apply to apply css mixins.
This require to load script in index.html
`html
`
Components
$3
It is basic component that probably should not be used directly.
It serves only as drawer without form functionality, so it is content agnostic.
You can pass any dom markup as children of this component.
$3
Wraps around exm-drawer.
Provides form functionality to drawer:
- submit and cancel buttons
- title
- material styling
API
$3
| Name | Description |
| --------- | --------------------------- |
| _default_ | Form elements within drawer |
$3
| Name | Type | Default | Description |
| ------------------------------- | --------- | ------- | --------------------------------------------------------------------------- |
| opened | boolean | _None_ | whether or not drawer is visible |
| no-cancel-on-outside-click | boolean | _None_ | whether or not clicking outside drawer should close drawer |
| submit-btn-title | string | _None_ | title of submit button. Default "Submit" |
| cancel-btn-title | string | _None_ | title of cancel button. Default "Cancel" |
| keep-opened-on-submit-success | boolean | _None_ | whether or not drawer should be hidden after successful form submission |
| reset-form-on-submit-success | boolean | _None_ | whether or not drawer form should be reset after successful form submission |
$3
| Name | Description |
| --------------------------- | ------------------------ |
| exm-drawer-opened-changed | when drawer shown/hidden |
$3
| Name | Description |
| ------------------------------------------ | ------------------------------------------------------------------------------------ |
| --exm-drawer-color | set the height of slot container - handy when wanting to control max-height of form. |
| --exm-drawer-bg-color | set the padding right for the form internal element. |
| --mdc-theme-primary | _None_ |
| --mdc-theme-on-surface | _None_ |
| --mdc-theme-surface | _None_ |
| --exm-form-drawer-header-separator-color | Color of header seperator of form |
| --exm-drawer-max-width | Max width of drawer |
#### Notes about drawer form
All dom markup passed as children into exm-form-drawer will be wrapped into exm-form underhood.
To properly handle form submission, you should call done() or error() on form instance after receiving submit
event from exm-form-drawer. Please read https://github.com/ExmgElements/exm-form docs for more info.
Usage
$3
`html
?opened="${this.opened}"
?keep-opened-on-submit-success="${this.keepOpenedOnSubmitSuccess}"
?reset-form-on-submit-success="${this.resetFormOnSubmitSuccess}"
?no-cancel-on-outside-click="${this.noCancelOnOutsideClick}"
@exm-drawer-opened-changed="${this.handleOpenedChanged}"
submit-btn-title="Create"
@submit="${this.onSubmit}"
@cancel="${this.onCancel}"
>
New event
Trivia
Other
+ Add answer
``