Not so long ago, we released a Sheet component that acts like a non-modal dialog box that slides up from the bottom. It occupies only the amount of space required to house its contents, and it provides built-in navigation controls to go “back” to the previous sheet. By default Sheets are displayed along the bottom of the screen, but we have recently added an update that allows you to position it along the north, east, west, south, or center of the screen, as shown below:
In addition we have added the ability to use a different position for tablets and desktop, than for phones. On desktop, it is more common for dialogs to pop up in the center of the screen, whereas on mobile, it is quite common to have a dialog (or sheet) pop up from the bottom.
When positioning a sheet on the east or west, it is quite easy to create your own ad-hoc hamburger menu. This may be easier, in some cases, than using the ToolBar class, as it gives you more control over the result.
For a full working example, see the updated Sheet sample here.
Below is a 35 second screen cast of that demo:
Archived Comments
This post was automatically migrated from the legacy Codename One blog. The original comments are preserved below for historical context. New discussion happens in the Discussion section.
Francesco Galgani — February 29, 2020 at 11:27 am (permalink)
Thank you, this is exactly what I need! 🙂
About the Sheet in the bottom position, can it be placed at a given distance from the bottom and not exactly at the bottom like in the video? In other words, is it possible to slide up the Sheet from bottom to up, until it reaches a given distance from the bottom?
Javier Anton — February 29, 2020 at 9:32 pm (permalink)
Javier Anton says:
Will definitely use this thx
Shai Almog — March 1, 2020 at 2:06 am (permalink)
Shai Almog says:
Maybe a creative use of margin can help with that?
Haven’t tried it but I think it should work.
Discussion
Join the conversation via GitHub Discussions.