Class Property

The Class Property allows you to configure a single (or multiple) class property(ies).

You can input a Name and decide whether a Class should be added to the selected component by default or not.

• Open the Components Properties modal by clicking the "+" icon in the block inspector.

• Select the Class Property you wish to configure.

Connect

The Class Property needs to be connected for it to be applied to the canvas.

You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.

• Select the Component to which you want to connect the Class Property.

• Select "Modify" in the toolbar or the Block Inspector.

• In the Navigator, select the required block to which you wish to add a Class property.

• Under Class in the Block Inspector, click the "Connect Component Property" icon.

• Select "Class" in the dropdown.

The Class property now appears in green in the Block Inspector to indicate that it is connected.

• If you wish to modify the Class Property, click the Class button to open the Components Properties modal.

Customise

To customise the Class property, make sure Customise is selected in the tool bar.

• With the Component selected, in the Block Inspector, click the "+" icon to add a class.

This will open the Classes modal where you can Create a class or select an existing one.

pageGlobal/Block Classes

The added Class will appear in green in the Block Inspector.

Remove Added Class

Use this property to remove a class that has been added to a component.

• In the Block Inspector, hover over the class to be removed.

• Click the red "X" icon to delet the added class.

Name

Allows you to label the selected Class property.

• Open the Component Properties modal.

• Select required Class property.

• Input suitable label name to Name field.

The label will now be visible in the Block Inpsector.

Default

Allows you to set a default class to your component.

• Open the Components Properties by clicking the "+" icon.

• Select required Class property.

• Open Settings tab.

• Click "+" sign next to Default to open the Classes modal.

• Create a class or select an existing one as a default class.

The required Default class will now be visible in the Component Properties modal under Default.

The Default class will now appear on the Canvas.