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:
top
|right
|bottom
|left
- Overlay position:
- Set the size you want (in
pixels
)- 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.
- Boolean:
true
orfalse
- Boolean:
- Set the underlay background color.
The widget makes use of a few CSS variables for easy styling overrides:
--background-primary
(white)--underlay-color
(black)--spacing-smaller
(8px)
--spacing-regular
(16px)
- Close Action (Boolean:
false
by default): Custom close action for the overlay when clicking on the underlay. - Should Close Page (Boolean:
false
by 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.
-
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.
- Install NPM package dependencies by using:
npm install
. If you use NPM v7.x.x, which can be checked by executingnpm -v
, execute:npm install --legacy-peer-deps
. - Run
npm start
to watch for code changes. On every change:- the widget will be bundled;
- the bundle will be included in a
dist
folder in the root directory of the project; - the bundle will be included in the
deployment
andwidgets
folder of the Mendix test project.