Expanders(which can exist alone, or grouped together into an Accordion) let you create groups of equal importance in your user interface, with those groups appearing vertically. They are most often used to express groups of fields that are subordinate to the current page: data that should be considered "drilling down" or moving deeper into a logical hierarchy. By tapping an expander, the thin bar of the expander grows taller, showing the details inside, and pushes any information listed below the expander down the screen. The expanding motion both draws attention to the details, while reinforcing the relationship between the primary data shown on the page, and the secondary data shown within the expander on the page.
Expander Example
An example Expander titled "Mobility Services", with two boolean fields and a text field within it:
- Note that the ^ symbol shows the state of the Expander (open or closed). it's not just this symbol which is clickable – the entire title area of the expander responds to a user's click or tap.
- Because the title area is large and easy to click or tap, the expander is a great layout component for interfaces intended primarily for mobile devices.
- When used independently, an expander will simply push other information down the page: you can have multiple expanders shown next to each other, and each will open or close only when the user clicks it.
Accordion Example
When two or more expanders are grouped into an Accordion, their behavior changes: only one expander in the accordion can be open. If an expander in an accordion is opened, then any other open expander in the accordion is closed automatically. In this way, you can prevent your user from being overwhelmed by seeing too much information at once.
An example of 3 expanders, grouped into one accordion:
Use
Expander Properties
Accordion Properties
-
To create...
- an Expander, add the expander component to the configurator design tree by clicking the "+" icon next to any layout component, and adding an Expander. Place other items into the expander by dragging their nodes in the tree onto the expander node: they will appear nested within it.
- an Accordion of expanders, create the accordion component in the design tree, and then drag expanders into it.
- To release an expander from the control of an accordion, just drag the expander out of the accordion in the design tree.
- To reorder the expanders within an accordion, drag them up or down in the design tree, making sure to stay within the indentation of the accordion.
Name | A name appearing in the design tree and Snap rules. The name must be unique to the configurator. |
Label | If you wish to specify a label in the UI which differs from the name, you may specify it. If label is left blank, the UI label will default to the name. |
Visible | Specifies whether this expander and its contents are shown to the user by default or not. This property can be changed in the visibility rules. |
Expanded | Set this to true to show the expander's contents by default. Leave it set to false to hide the contents, so the user must click it to open it. |
Icon Style |
None to show no image within the button. Icon to select one of the many icons included in our default icon set. You can then select the size of the icon. Media to upload your own custom image as an icon. You can then set the width and height of that custom image. |
Visible | Specifies whether this accordion and its contents are shown to the user by default or not. This property can be changed in the visibility rules. |
Container-based position properties appear for this element (and any interface element) when it is placed within a container, and help align it within the container. For example, if you place this UI element within a container, the following properties will appear. Take it out of the container, and place it on a page, and these properties will disappear. Furthermore, the actual position properties themselves change, depending on that parent container's Item Layout.Position
Place this element into a container, and then return to this element's properties list. The "Position" accordion will now appear in the properties list.
Change the parent container's item layout to horizontal, vertical, or absolute. Then return to this UI element. The position properties available for items within that layout (marked by green checkmarks below) will appear.
Property | Available when in a horizontal layout | Available when in a vertical layout | Available when in an absolute layout | Description |
---|---|---|---|---|
Relative Size |
|
|
|
When using relative sizes, try setting all items within the container to the relative size of "x1" as a starting point, and then adjust the xN levels as necessary. Mixing items with "auto" and "xN" settings is allowed, but may be difficult to manage. |
Alignment |
|
|
|
Controls how this item within a container is aligned in the cross axis of the container's layout.
|
Left Top Right Bottom Width Height |
|
|
|
The distance between the edge of the parent container and this element. By default, each is "auto". Usually, you would set only 2 of these properties, leaving the rest to "auto", or you may distort this image or element. For example, to align an item's upper-right corner to the upper-right corner of the parent container, set "Top" to 0px, and "Right" to 0px, leaving all other distances to "auto". |
Opacity |
|
|
|
The visibility of items or backgrounds behind this item. Use any decimal number from 0 to 1. Set to 0 to make this item completely transparent. Set to 1 to make the item completely opaque. |
Order |
|
|
|
Specifies the order in which this item is drawn in the container. Use a whole number, such as 0 or 132. Default: 0. Larger numbers are drawn later, and appear closer to the user.
|
Use Zero Padding |
![]() |
![]() |
![]() |
By default, UI elements have some padding around them for legibility on all devices, and for ease of use on touch-enabled devices. However, in some cases you may want specific UI elements to have no padding around them at all (to touch each other). This can be useful to create a portion of your UI which needs a very high information density. For example, to create a grid of fields that appear like cells in a spreadsheet. |