Organizers¶
The Organizers family is one of the available components’ families you can use to populate the Mask.
It contains graphical elements which organize the mask space, and can contain other Components. To make it easier to locate them, they have been divided into two groups:
Base organizers, which consist of a unique space accepting components inside it.
Multiple organizers, made of a defined number of spaces, accepting components inside them.
Base¶
The Base group contains the following organizers:
Container
Collapse
The layout of Base organizers can be customized in the components layout menu, which can be accessed by right-clicking onto the component and clicking Open component layout, or when first dragging the component onto the stage.
Browse the tabs below to know more about the available options for each Base organizer.
Option |
Description |
|---|---|
Direction |
The direction which will be followed by the components which will be dragged into the container. The possible values are Row (default), and Column. |
Width type |
This option is available only if a container has been inserted into another one. The possible values are Preferred (default), which means that the container will fill all the available space, or Exact, which means that the container will fill a specific area in the mask, defined by the Width option. |
Width |
The width of the container, if Exact has been chosen as the Width type. The width can be specified both in pixels or in percentage, by simply clicking on the corresponding symbols at the right of the number field. |
Order |
The position of the organizer in the mask. It is a 0-based dictionary, and its default value is 0 for all components, meaning that the order of the components will follow the dragging order. If this value is specified, controllers will be sorted in ascending order according to the Order value. |
Horizontal alignment |
The horizontal alignment of the elements within the container. The possible values are: Flex start, Flex end, Center, Space between, Space around, Space evenly. |
Items alignment |
The vertical alignment of the elements within the container. The possible values are: Flex start, Flex end, Center, Baseline, Stretch. |
Wrap |
If left empty, no wrap is performed to the components which are present inside the container: this means that the components will be put in the same row/column, even if they are not visible. The possible values are: Wrap, No wrap, Wrap reverse. |
Css |
Additional CSS code used to customize the container. |
Add paper |
If selected, the container will graphically appear as if it is on a separate layer. |
Option |
Description |
|---|---|
Title |
The title of the collapse. |
Start open |
If selected, when opening the mask, the collapse is already opened. |
Order |
The position of the organizer in the mask. It is a 0-based dictionary, and its default value is 0 for all components, meaning that the order of the components will follow the dragging order. If this value is specified, controllers will be sorted in ascending order according to the Order value. |
Css |
Additional CSS code used to customize the collapse. |
Multiple¶
The Multiple group contains the following organizers:
Tab
Carousel
The layout of Multiple organizers can be customized in the components layout menu, which can be accessed by right-clicking onto the component and clicking Open component layout, or when first dragging the component onto the stage.
Browse the tabs below to know more about the available options for each Multiple organizer.
Option |
Description |
|---|---|
Height type |
Select from the drop-down list the height of the tab organizer. The possible values are: Preferred (default), Exact. |
Height |
The height (in percentage) of the tab set. |
Order |
The position of the organizer in the mask. It is a 0-based dictionary, and its default value is 0 for all components, meaning that the order of the components will follow the dragging order. If this value is specified, controllers will be sorted in ascending order according to the Order value. |
Css |
Additional CSS code used to customize the tab. |
Option |
Description |
|---|---|
Width type |
Select from the drop-down list the width of the carousel organizer. The possible values are: Preferred (default), Exact. |
Width |
The width (in percentage) of the carousel. |
Order |
The position of the organizer in the mask. It is a 0-based dictionary, and its default value is 0 for all components, meaning that the order of the components will follow the dragging order. If this value is specified, controllers will be sorted in ascending order according to the Order value. |
Css |
Additional CSS code used to customize the carousel. |
Hide steps |
If selected, the carousel steps, which are displayed in the lower part of the screen, will be hidden, and can only be browsed through a Connection. |
Hide carousel when the focused step is not available |
If selected, it must be linked to a Connection which has a focus on a specific carousel step as its Destination. This means that, if the carousel is the connection’s destination, if the step specified in the Destination area does not exist, the carousel disappears from the mask. |