{"id":14533,"date":"2016-07-01T14:39:17","date_gmt":"2016-07-01T21:39:17","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=14533"},"modified":"2020-10-26T01:46:00","modified_gmt":"2020-10-26T08:46:00","slug":"multistate-elements","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/user-guide\/multistate-elements\/","title":{"rendered":"Multistate Elements"},"content":{"rendered":"

Multistate Elements (MSEs) are sets of items, like boxes, buttons, and images, that change between configurations upon interaction.<\/p>\n

Creating a MSE makes copies of the selected elements. You can move, resize, recolor, or otherwise change the copies per state. For example, two configurations — states — may each show a different icon. Clicking the element could flip between the states.<\/p>\n

\"This<\/p>\n

Creating MSEs<\/h2>\n

To create a MSE, select one or more items and add a new state in the right side of the editor<\/a>.<\/p>\n

By default, everything has a first state. It’s adding a second state that creates the MSE.<\/p>\n

\"Creating<\/p>\n

Editing MSEs<\/h2>\n

Upon creating a MSE, double-clicking it will enter “edit” mode. You know you’re there when you see a purple drop-down menu at the top of the Editor that lets you view different states.<\/p>\n

\"Where<\/p>\n

It’s important to note that elements in different states are copies of the original items you selected for the MSE, which means you can edit their properties freely per state. When viewing a particular state, you can move elements within that state, change their styles like color and opacity, hide them altogether, or give them interactions<\/a>. To leave “edit” mode, click outside of the MSE — either on another element or the canvas.<\/p>\n

Interactions: Next, Previous & Set State<\/h2>\n

By themselves, MSEs don’t do anything. They need an interaction to make them change states. You have three actions available: Next, Previous and Set State. “Next” advances the currently visible state, much like advancing a slide in a presentation. When a MSE reaches the last state, and an interaction says “next,” then the MSE will show its first state. Thus a MSE with only two states will toggle between them with a “next” action.“Previous” does the opposite of Next, moving the MSE one step back through its states. “Set State” will let you specify which step the MSE will show. <\/p>\n

For example, if a MSE have four states — say, “Favorite,” “Unfavorite,” “Default,” and “Disabled” — a button could have the MSE reveal the “Disabled” state, even if it was previously “Unfavorite.” Any trigger, like click (tap) or hover, can activate an action.<\/p>\n

The difference between MSEs and simply showing or hiding elements with basic interactions is that MSEs can animate between states. Specifically, they can fade, spin, or slide from the top, left, right, or bottom.<\/p>\n

\"MSEs<\/p>\n

Practical Examples<\/h2>\n

What are MSEs best at? Anything that requires sets of elements to change on demand.<\/p>\n