Options Property

The Options Property allows you to add specific additional styles to a component other than numbers and colours.

You can input a Name, set a default style and set options for the default as required.

• Open the Components Properties modal by clicking the "+" sign.

• Select Options in the Properties dropdown.

• Select the Options Property you wish to configure.

Connect

The Options 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 Options Property.

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

• The blocks contained in the component are now visible in the navigator.

• Find and select the Options property you wish to connect in the navigator.

• In the Components tab of the Primary tab, click the Component icon of the property you wish to add.

• Select the required Options Property in the dropdown.

• The Options Property will now be visible in the Content field in green which indicates that it is connected.

Options

The Options property has to be set up in order for the required options to be displayed.

• Click the Options property in the Block Inspector to open the Components Property modal.

• The Options that can be customised for the required property will now be visible.

The Options available will depend upon the chosen property.

Now, when you return to Customise, you can adjust the required Options property from the Block Inspector.

Name

Allows you to label the selected Options property.

• Open the Component Properties modal.

• Select required Options property.

• Input suitable label name to Name field.

The required Name label will now be visible in the Block Inspector.

The Options property allows you to add the required Options and Values to your Options Property.

In this example, we want to offer two Direction Options, Column and Row so we need to add additional Option.

• Click the "+" sign next to Options to add additional Options.

Input a suitable label for the first value, in this example "Row".

• Input required value, in this example "Row".

• Input required label and value for the additional option if there are any.

• In this example, we have given a "Column" label and value.

Move

• Drag and drop to reorder the Options as required.

Remove

• Click Remove icon to delete an option.

The options you have set up will now be available in the Block Inspector, in this example Row or Column.

Default

You can now set up a default for you Options Property.

You have to set up some options before you can add a default.

• In the Components Properties modal, set Default to required option, in the example below Row or Column..

The option you selected will now be visible on the canvas.

Dynamic

If your Option is Dynamic you can toggle on Dynamic.

• Open the Components Properties modal and toggle on Dynamic

• Set Source as required.

A dynamic data property will now be visible in the Block Inspector.

Depending on the option to which Dynamic is applied, you will have various possibilites.

In this case, dynamic direction will open the Direction Options modal.