Convert a regular (non-modal) popup layout to overlay / drawer style. This is a panel which slides in from the edge of the screen.
Look at this design pattern in Ant design: https://ant.design/components/drawer/
- Align the overlay to a side of the screen
- Overlay position:
- Overlay position:
- Set the size you want (in
- For the top and bottom orientation, the size means height.
- For the left and right orientation, the size means width.
- Display or hide the default header.
- Set the underlay background color.
- Close Action (Boolean:
falseby default): Custom close action for the overlay when clicking on the underlay.
- Should Close Page (Boolean:
falseby default): Does a button (defined by Close button class name) need to trigger the popup's 'close page' action within Mendix? Set to no if you handle this yourself.
- Body No Scroll (Boolean:
trueby default): Avoid scrolling inside the main content when the overlay is active. Note: This option is best set to false in case conditional-visible close/save buttons are used.
Place the widget inside a (non-modal) popup layout. This wil by default transform the modal to a right aligned overlay with a width of max. 600px.
Specify close button(s) by classname. These buttons will then trigger the close overlay transition. Otherwise the overlay closes just like a normal Mendix popup does (fading out).
The widget works best with a non-modal layout, because it generates it's own underlay including link to close the overlay. Basically making it a modal overlay again. Try to avoid opening multiple overlays without closing the previous one(s). This might result in unwanted situations.
Development and contribution
- Install NPM package dependencies by using:
npm install. If you use NPM v7.x.x, which can be checked by executing
npm -v, execute:
npm install --legacy-peer-deps.
npm startto watch for code changes. On every change:
- the widget will be bundled;
- the bundle will be included in a
distfolder in the root directory of the project;
- the bundle will be included in the
widgetsfolder of the Mendix test project.