Graphic Widget¶
The Graphic widget panel changes its layout and switches from the list of graphic organizers to displaying the corresponding customizable options, and also the name of the panel switches to Graphic widget inspector. The customization is possible when a graphic element belonging to the Graphic widgets list is selected and highlighted in the Mask stage.
Below you’ll find the list of all the options that can be customized organized for each graphic widget.
Container¶
After dragging and selecting a Container into the Mask stage, users can define the following options:
Direction: defines how graphic options are displayed within the Container. Possible values are: row, column.
Height type: defines dimensions, and possible values are preferred, exact. If preferred is selected, space is distributed proportionally according to the ratio of the values of the children graphic widgets within the same parent container. While if exact is selected, the exact values inserted in Height are respected.
Height: defines the height of the Graphic widget in percentage.
Order: defines the order of other Graphic widget. If displayed in rows, insert 0 to display the Graphic widget to the rightmost side, and insert higher values to display the Graphic widget to the leftmost side of the mask. With equal values, the one displayed on the rightmost side will be the one with the most recent creation date.
Horizontal alignment: defines the distribution of extra free space leftovers. Possible values are:
flex-start, items are organized starting from the leftmost side, if row has been selected from the Direction menu. Otherwise if column is selected, items are organized starting from top.
flex-end, items are organized starting from the rightmost side, if row has been selected from the Direction menu. Otherwise if column is selected, items are organized starting from bottom.
center, items are centered along the line, if row has been selected from the Direction menu. Otherwise if column is selected, items are centered along the column.
space-between, items are evenly distributed in the line, if row has been selected from the Direction menu. Otherwise if column is selected, items are evenly distributed along the column.
space-around, items are evenly distributed in the line with equal space around them, if row has been selected from the Direction menu. Otherwise if column is selected, items are evenly distributed in the column with equal space around them.
space-evenly, items are distributed so that the spacing between any two items (and the space to the edges) is equal.
Items alignment: defines the default behavior for how items are laid out on the current line or column. Possible values are:
flex-start, graphic options are organized starting from the leftmost side, if row has been selected from the Direction menu. Otherwise if column is selected, items are organized starting from top.
flex-end, graphic options are organized starting from the rightmost side, if row has been selected from the Direction menu. Otherwise if column is selected, items are organized starting from bottom.
center, graphic options are centered along the line, if row has been selected from the Direction menu. Otherwise if column is selected, items are centered along the column.
baseline, graphic options are aligned such as their baselines align.
stretch, graphic options are stretched to fill the container.
Wrap: by default items will all try to fit onto one line or column. You can change that and allow the items to wrap as needed. Possible values are:
wrap, graphic options will wrap onto multiple lines, from top to bottom, if row has been selected from the Direction menu. Otherwise if column is selected, items will wrap onto multiple columns, from left to right.
nowrap, all graphic options will be on one line, if row has been selected from the Direction menu. Otherwise if column is selected, on one column.
wrap-reverse, graphic options will wrap onto multiple lines from bottom to top, if row has been selected from the Direction menu. Otherwise if column is selected, from right to left.
Add paper: adds to the Graphic widget an elevated and shadow effect.
Css: applies the CSS code to modify your Graphic widget.
Disable by connection: to know more about this option click here.
Negate connection: to know more about this option click here.
Tab¶
After dragging and selecting a Tab into the Mask stage, users can define the following options:
Direction: defines how graphic options are displayed within the Tab. Possible values are row, column.
Horizontal alignment: defines the distribution of extra free space leftovers. Possible values are:
flex-start, items are organized starting from the leftmost side, if row has been selected from the Direction menu. Otherwise if column is selected, items are organized starting from top.
flex-end, items are organized starting from the rightmost side, if row has been selected from the Direction menu. Otherwise if column is selected, items are organized starting from bottom.
center, items are centered along the line, if row has been selected from the Direction menu. Otherwise if column is selected, items are centered along the column.
space-between, items are evenly distributed in the line, if row has been selected from the Direction menu. Otherwise if column is selected, items are evenly distributed along the column.
space-around, items are evenly distributed in the line with equal space around them, if row has been selected from the Direction menu. Otherwise if column is selected, items are evenly distributed in the column with equal space around them.
space-evenly, items are distributed so that the spacing between any two items (and the space to the edges) is equal.
Items alignment: defines the default behavior for how items are laid out on the current line or column. Possible values are:
flex-start, graphic options are organized starting from the leftmost side, if row has been selected from the Direction menu. Otherwise if column is selected, items are organized starting from top.
flex-end, graphic options are organized starting from the rightmost side, if row has been selected from the Direction menu. Otherwise if column is selected, items are organized starting from bottom.
center, graphic options are centered along the line, if row has been selected from the Direction menu. Otherwise if column is selected, items are centered along the column.
baseline, graphic options are aligned such as their baselines align.
stretch, graphic options are stretched to fill the container.
Wrap: by default items will all try to fit onto one line or column. You can change that and allow the items to wrap as needed. Possible values are:
wrap, graphic options will wrap onto multiple lines, from top to bottom, if row has been selected from the Direction menu. Otherwise if column is selected, items will wrap onto multiple columns, from left to right.
nowrap, all graphic options will be on one line, if row has been selected from the Direction menu. Otherwise if column is selected, on one column.
wrap-reverse, graphic options will wrap onto multiple lines from bottom to top, if row has been selected from the Direction menu. Otherwise if column is selected, from right to left.
Add paper: adds to the Graphic widget an elevated and shadow effect.
Css: enter in this field the CSS code to modify your graphic widget.
Disable by connection: to know more about this option click here.
Negate connection: to know more about this option click here.
Carousel¶
After dragging and selecting a Carousel into the Mask stage, users can define the following options:
Direction: defines how graphic options are displayed within the Carousel. Possible values are: row, column.
Horizontal alignment: defines the distribution of extra free space leftovers. Possible values are:
flex-start, items are organized starting from the leftmost side, if row has been selected from the Direction menu. Otherwise if column is selected, items are organized starting from top.
flex-end, items are organized starting from the rightmost side, if row has been selected from the Direction menu. Otherwise if column is selected, items are organized starting from bottom.
center, items are centered along the line, if row has been selected from the Direction menu. Otherwise if column is selected, items are centered along the column.
space-between, items are evenly distributed in the line, if row has been selected from the Direction menu. Otherwise if column is selected, items are evenly distributed along the column.
space-around, items are evenly distributed in the line with equal space around them, if row has been selected from the Direction menu. Otherwise if column is selected, items are evenly distributed in the column with equal space around them.
space-evenly, items are distributed so that the spacing between any two items (and the space to the edges) is equal.
Items alignment: defines the default behavior for how items are laid out on the current line or column. Possible values are:
flex-start, graphic options are organized starting from the leftmost side, if row has been selected from the Direction menu. Otherwise if column is selected, items are organized starting from top.
flex-end, graphic options are organized starting from the rightmost side, if row has been selected from the Direction menu. Otherwise if column is selected, items are organized starting from bottom.
center, graphic options are centered along the line, if row has been selected from the Direction menu. Otherwise if column is selected, items are centered along the column.
baseline, graphic options are aligned such as their baselines align.
stretch, graphic options are stretched to fill the container.
Wrap: by default items will all try to fit onto one line or column. You can change that and allow the items to wrap as needed. Possible values are:
wrap, graphic options will wrap onto multiple lines, from top to bottom, if row has been selected from the Direction menu. Otherwise if column is selected, items will wrap onto multiple columns, from left to right.
nowrap, all graphic options will be on one line, if row has been selected from the Direction menu. Otherwise if column is selected, on one column.
wrap-reverse, graphic options will wrap onto multiple lines from bottom to top, if row has been selected from the Direction menu. Otherwise if column is selected, from right to left.
Add paper: adds to the Graphic widget an elevated and shadow effect.
Css: enter in this field the CSS code to modify your graphic widget.
Disable by connection: to know more about this option click here.
Negate connection: to know more about this option click here.
Collapse¶
After dragging and selecting a Collapse into the Mask stage, users can define the following options:
Direction: defines how graphic options are displayed within the Collapse. Possible values are row, column.
Horizontal alignment: defines the distribution of extra free space leftovers. Possible values are:
flex-start, items are organized starting from the leftmost side, if row has been selected from the Direction menu. Otherwise if column is selected, items are organized starting from top.
flex-end, items are organized starting from the rightmost side, if row has been selected from the Direction menu. Otherwise if column is selected, items are organized starting from bottom.
center, items are centered along the line, if row has been selected from the Direction menu. Otherwise if column is selected, items are centered along the column.
space-between, items are evenly distributed in the line, if row has been selected from the Direction menu. Otherwise if column is selected, items are evenly distributed along the column.
space-around, items are evenly distributed in the line with equal space around them, if row has been selected from the Direction menu. Otherwise if column is selected, items are evenly distributed in the column with equal space around them.
space-evenly, items are distributed so that the spacing between any two items (and the space to the edges) is equal.
Items alignment: defines the default behavior for how items are laid out on the current line or column. Possible values are:
flex-start, graphic options are organized starting from the leftmost side, if row has been selected from the Direction menu. Otherwise if column is selected, items are organized starting from top.
flex-end, graphic options are organized starting from the rightmost side, if row has been selected from the Direction menu. Otherwise if column is selected, items are organized starting from bottom.
center, graphic options are centered along the line, if row has been selected from the Direction menu. Otherwise if column is selected, items are centered along the column.
baseline, graphic options are aligned such as their baselines align.
stretch, graphic options are stretched to fill the container.
Wrap: by default items will all try to fit onto one line or column. You can change that and allow the items to wrap as needed. Possible values are:
wrap, graphic options will wrap onto multiple lines, from top to bottom, if row has been selected from the Direction menu. Otherwise if column is selected, items will wrap onto multiple columns, from left to right.
nowrap, all graphic options will be on one line, if row has been selected from the Direction menu. Otherwise if column is selected, on one column.
wrap-reverse, graphic options will wrap onto multiple lines from bottom to top, if row has been selected from the Direction menu. Otherwise if column is selected, from right to left.
Add paper: adds to the Graphic widget an elevated and shadow effect.
Css: enter in this field the CSS code to modify your graphic widget.
Disable by connection: to know more about this option click here.
Negate connection: to know more about this option click here.
If the internal area of the Collapse is selected, the collapse layout options are available:
Title: type in this area the title of the Collapse.
Order: defines the order of other Graphic widget. If displayed in rows, insert 0 to display the Graphic widget to the rightmost side, and insert higher values to display the Graphic widget to the leftmost side of the mask. With equal values, the one displayed on the rightmost side will be the one with the most recent creation date.
Start open: if selected, the Collapse menu is displayed as opened when first opening the mask.
Css: enter in this field the CSS code to modify your graphic widget.
Label¶
After dragging and selecting a Label into the Mask stage, users can define the following options:
Label: enter in this field the label name to display.
Change value as formula: if selected, it changes the inserted values into a formula.
Label width: defines the width of the Label.
Font family: allows selecting from this drop-down menu the font family.
Font size: defines the size of teh selected font.
Order: defines the order of other Graphic widget. If displayed in rows, insert 0 to display the Graphic widget to the rightmost side, and insert higher values to display the Graphic widget to the leftmost side of the mask. With equal values, the one displayed on the rightmost side will be the one with the most recent creation date.
Css: enter in this field the CSS code to modify your graphic widget.