search

jarek-foksa / xel

Xel - Widget toolkit for building native-like Electron and Web apps
https://xel-toolkit.org
Other
679 stars 58 forks source link

Drawer/Side menu API? #84

Closed Jarrio closed 5 years ago

Jarrio commented 5 years ago

The README says that this has drawer support but there doesn't appear to be any API for it on docs even though the demo has a side menu, an example of the code for the side menu would be appreciated - thanks!

jarek-foksa commented 5 years ago

To implement a drawer, you should use a standard <dialog> element. Check the "Left side drawer" and "Right side drawer" examples on https://xel-toolkit.org/elements/dialog

Jarrio commented 5 years ago

Ah, I appreciate that. I would like to mention that pretty much all of these dialog's seem to be impossible to close when triggering them as there is no close button visible to actually press - ESC, enter or clicking the background does not trigger the dialog to close either. Basically forcing a refresh of the page.

I am using Chrome Version 71.0.3578.98 (Official Build) (64-bit) (For the demo - I haven't actually tried it from within electron as of yet)

jarek-foksa commented 5 years ago

Are you still unable to close the dialogs by clicking the backdrop with Xel version 0.0.179 (I published it several minutes ago). Please clear the browser cache and reload to make the demo use the latest Xel version.

Jarrio commented 5 years ago

Yes, this fixed the issue. Thanks!

jarek-foksa commented 5 years ago

To close a dialog with Esc key:

dialog.addEventListener("keydown", (event) => {
  if (event.code === "Escape") {
    dialog.close();
  }
});
Jarrio commented 5 years ago

How do you have the dialog open by default? Setting the button to toggled doesn't seem to work as expected. The button is toggled but the drawer remains closed

jarek-foksa commented 5 years ago

You should call button.expand() or dialog.showModal() method.