Moving and reacting
Drawers and pop-ups
A drawer slides in from the side of the screen; a pop-up covers the page. Both stay hidden until something opens them. The cart, a menu on phones, a size guide and a quick look at a product are all drawers or pop-ups.
How to make one
- Draw a box and fill it: a heading, some text, a Close button.
- Choose ⋯ › Turn into › Drawer or Pop-up. A drawer's Behaviour tab says where it Slides in from: the right, the left or the bottom.
- Select the button that should open it, and set When clicked to Open “…”.
- Set the Close button's When clicked to Close the layer.
Working on one
A drawer or pop-up is hidden on the canvas until you work on it. Pick it in Layers, and it shows over the page while you're working on it or anything inside it.
Good to know
- Closing
- Shoppers close it with its Close button, the Esc key, or a click outside it.
- Opened by a list
- A list can make an item current and open a pop-up with it: a quick look at a product. Set the list's When one is clicked.
- Keyboard
- When it opens, it takes the keyboard's focus, and gives it back when it closes.