Nice browser. Is it antique?
No, seriously - your browser is so old that some features of patternplate don't work as expected.
Don't worry - you can either continue with a restricted version or install an up-to-date browser.
We messed up.
Sorry, but your user experience might be affected.
- Try reloading the page
- Report the problem at github.com/patternplate/patternplate

Guide 4 - Interaction

👩‍🎓 Level: Beginner


In this guide you will learn how to link pages and bring life into your prototype.

1. Add Page

On the left side of Alva all of the pages are shown. Let’s add a page and give it a name.

2. Add Button

We need an interactive component. Let’s add a button, for example.

Technical Note: For Interactive Elements you need an React.MouseEventHandleror React.EventHandler property.

Below the usual button properties such as Order or Disabled, you’ll find an Interaction Property. Set it to Switch to Page and select the page you want to link to below. That’s it!

4. Click

Well, because usually when you click on an element in the preview it gets selected, we have to test our interaction differently. Hold CMD on macOS or Ctrl on Windows and click on the Button. Yay, you just switched to the other page! After exporting your prototype you won’t need to hold those keys anymore.


Next

Learn how to connect a compatible code component library