When you select specific elements in your Zapp, the panel on the right (shown below) will populate with certain editing options for the selected page. Depending on what you select, you will either see a Properties or Items tab that you can switch back and forth between.
What are Properties?
Each page has a unique set of properties that you can style. Some styling properties are binary (turned on or off) and some properties are more free style where you need to enter values to adjust them.
Examples of properties include container margins, borders, box shadows, etc.
The Properties tab for each page contains the following options.
Three options are available for Display:
- Full Page Display: Simply takes the full width of the form factor. This is the default display option.
- Container Display: Puts your zapp content in a container within the full page. The default view for the container is full width with no additional styling. You also have the ability to change the container width, container height and container background color. This is useful primarily in large form factors where you would want to contain the content on the page and not take up the full size of the screen.
- Card Display: Comes with preset characteristics for all the container properties. This is a nice alternative if you do not have specific styling requirements and simply want it to have a fixed container look & feel. However, you can still edit those properties and change how the card looks. This is useful primarily in large form factors.
Several container-related variables can be edited, including:
- Container: Refers to the content of the page. You can change the width, height, and background color.
- Container Border: You can specify a thickness for each side of the container. You can also chose the border color. Regarding the border-radius, the higher the value, the more rounded the edges will be. The default value is 0.
- Container Margins: Refers to the space outside of the container.
- Container Box Shadow:
- x: The horizontal offset of the shadow. Positive numbers go to the right, negative numbers go to the left.
- y: The vertical offset of the shadow. Positive numbers go above the box, negative numbers go below.
- Blur: The higher the number, the sharper the shadow.
- Spread: The higher the number, the larger the shadow.
The content section enables you to specify Tooltip Text within the Zapp page. This is useful for desktop Zapps where users can hover over the element and view the tooltip, as well as for visually impaired users who are using a screen reader to navigate the Zapp on their device.
When you select a control that includes multiple items (i.e. tables, floating bars, groups, the entire page), the Items tab will show you a list of all the items. In the items tab, you can re-order the content, break the page into additional sections, and drill into each individual item's styling options by clicking the pencil icon. The content is organized into three sections: header, body, and footer.