Components:Component Option Categories

Component OptionCategories are defined in the structure of a Prefab, and recursively in the descendants of another Component Configuration.

Just like component options they appear in the sidebar of the PageBuilder when a component is on the canvas. and are responsible to render the ComponentOptions in a category based on the members.

Type

OptionCategory:

type OptionCategory = {
  label: string;
  condition: Condition | null;
  members: string[];
  expanded: boolean;
}

Component categorie example

An example of a basic component categorie configuration is shown below:

{
  label: 'styling',
  expanded: false,
  condition: {
    type: 'show',
    option: 'optionKey',
    comparator: 'EQ',
    value: true,
  },
  members: ['borderColor', 'width', 'padding', 'size'],
}

Component option fields

label

label represents the text shown in the header of the categorie collapse in the sidebar of Page Builder once the component is selected.

label is of type string

expanded

expanded is the default state of the categorie collapse. when its set to true its open when you have your component selected, when set to false it in a closed state.

expanded is of type boolean

members

members is an array of references to option keys. when a option key is defined and its not present as a key value in the options it will not compile your componentset and gives you an error instead.

members is of type string[]

Condition

The condition object allows you to conditionally show/hide a component option category based on another component option's value. The condition object consists of the following parts:

• type, which can either be 'SHOW' or 'HIDE.'
• option, string referring to the key of the option that you want to relate.
• comparator, which at this moment can only be 'EQ.'
• value, the value you want to compare.