With a component selected, you will find all the component’s properties listed in the Property Editor. The properties of a component are divided into Base properties, Layout properties and Style properties. You can view all these at once or double-click one of the three buttons in the properties tool bar to isolate a group of properties. You can also find any property quickly with the search field.

The Property Editor toolbar

Use the Property Editor to change the properties of your components in real time and to apply all component designs as you would when writing CSS. With a Panel or any of its components selected, you will find all necessary tools for manipulating properties and attributes in the Property Editor and the Panel Editor toolbar.

The Panel Editor toolbar

Quick UI Primer

I hope Heading 1 is OK and the rest Heading 2 will also be OK, otherwise decrease…

Type and text

You cannot type directly into any of the text components in the Design Editor. It is recommended to store all your app’s dynamic and static text in a Text Table. Text can also be entered in the text property under Panel Properties > Text for all text components, or double-click the text properties value field to open a text editor or text table editor.

Selection

All Base, Layout and Style properties are context sensitive to the component selected. Multiple component selection is supported for properties shared by multiple components. You can select a component in the Panel’s component tree list, or in the Design Editor.

Bounding Box

The component’s Bounding Box serves as a resize box only if the component’s Horizontal and Vertical aligns are set to fill; these are found in the Layout properties. Otherwise the Bounding Box can be larger or smaller than the component, allowing you to align the component within the Bounding Box.

Width, Height, Left and Right

Most of the time it is not recommended to assign width and height to components in iiziApps. As with all responsive UI design, the layout is device-dependent; the Layout Manager in iiziGo will handle position and resizing of your components.

Duplication

All components can be copied and pasted either from the component list in the panel tree or in the Design Editor. Right-click a component and choose Copy; you can then Paste it and all its properties into the same Panel or into any other Panel in your app.