Equivalent of material side sheet

0
I'm trying to create a side sheet like Material's one, where i click a button to toggle it open to fill the form within it.  I tried to replicate the same concept as atlas default side menu since it toggles when clicking the hamburger icon, but i face an error that toggle cannot be in a web page.   I'm not sure if this side sheet exist in the marketplace but i'll need to do it from scratch since the app is on-prem with no access to marketplace.   Mendix v. 10.6.7
asked
1 answers
0

Should be easy enough. You've got even a couple of options:

  • You can use a popup page and style that. For example: you can add height: 100vh; width: 300px; and add some animation to make it look nice.
  • You can use an NP (Non-Presistable) object in combination with conditional visibility. For Example, the container/sheet is hidden based on the NP object value (boolean). When clicking the button the boolean will be toggled, thus the container/sheet is visible. Of course you'll need to add style to make it fixed on the left/right side.
  • Alternatively you can use dynamic classes with the NP object, to toggle the position of the container/sheet. This will give you a bit more animation options. See example below.
  • You can also toggle it via custom JavaScript. This is however a bit more advanced. Would not recommend, unless you know what you're doing.

 

For example

.sheet {
  position: fixed;
  right: -300px;
  top: 0;
  width: 300px;
  height: 100vh;
  background-color: #f4f4f4;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  transition: right 0.3s ease;
}

.sheet--open {
  right: 0;
}

 

Good luck!

 

Maurits

answered