i4designer Knowledgebase

Menu controls

Abstract

Here are the i4designer Menu Controls components for your new project created on the i4SCADA platform.

The Menu Controls category provides the user with possibility to insert navigation components, hence creating big scale visualizations. The two components from this category provide core navigation functionality.

Navigation menu
Abstract

Open this article to learn more details about the Navigation menu control of the i4designer set up on i4SCADA platform.

The i4deisgner Navigation menu component is the frame in which the navigation pages (or SubPages) are displayed. The Navigation menu component is the parent of one or more navigation pages. A navigation page can be added only if this component is placed on the page and selected.

Navigation_menu.jpg

The Navigation menu component

Category

Property

Description

Layout

Breakpoint

Sets the width in pixels, in order to change the menu layout to mobile view. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Breakpoint.jpg

Layout mode

Sets the behaviour of the component related to the page placement. The user can select the component layout from the options available in the drop-down list: Default, Dock top, Dock bottom, Dock left, Dock right, Stretched, Pin top left, Pin top center, Pin top right, Pin right middle, Pin bottom right, Pin bottom center, Pin bottom left, Pin left middle and Pin center.

Layout_mode.jpg

Margin

Sets the margin of the component relative to the drawing board area. The supported values are the standard CSS values for the margin.

The top, bottom, left and right values can either be typed in the main property field or by using the Margin editor.

Margin_small.jpg

The Margin editor can be opened by clicking the Open button.

Margin_large.jpg

Opacity

Sets the opacity of the component. The Opacity values should be numbers from 0 to 1 representing the opacity of the component. When the component has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid).

By default, the Component's opacity is set to value 1. Using the up / down arrows the user can control the opacity degree.

Opacity.jpg

By clicking the Open button the view is extended to display the Opacity slider.

Opacity_slider.jpg

The components margins can be updated by setting the margin value and selecting the desired unit:

  • Ems (em) - The em is a scalable unit. One em is equal to the current font-size;

  • Pixels (px) - Pixels are are fixed-size units. One pixel is equal to one dot on the computer screen (the smallest division of a screen’s resolution).

  • Percent (%) - The percent unit is much like the “em” unit. When using the Percent unit the component remains fully scalable for mobile devices and accessibility.

Orientation

Sets the orientation of the menu to vertical or horizontal. The user can select the orientation from the options available in the designated drop-down list.

Orientation.jpg

Reverse

Reverses the menu orientation from left to right, by toggling the switch from True to False.

Reverse.jpg

Shadow offset X

Sets the offset of the shadow on the horizontal axis. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_offset_X.jpg

Shadow offset Y

Sets the offset of the shadow on the vertical axis. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_offset_Y.jpg

Shadow size

Sets the width of the component shadow. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_size.jpg

Navigation

Navigation file

Sets the navigation structure to be displayed by the menu. The navigation structure can be either directly typed in the designated field, or selected from the navigation tree, enabled by clicking the Open file explorer button.

Navigation_file.jpg

Upon navigation structure selection, the component will be updated accordingly.

Navigation_file_added.jpg

Palette

Shadow color

Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.

Shadow_color.jpg

Background color

Sets the background color of the menu component. The user can either manually type in the HEX color code or use the color picker tool.

Background_color.jpg

Separate color

Sets the color of the link separators. The user can either manually type in the HEX color code or use the color picker tool.

Separator_color.jpg

Appearance

Text alignment

Sets the text alignment of the menu links, selecting from the drop-down list options: Left, Center and Right.

Text_alignment.jpg

Padding

Sets the pixels for the navigation menu padding, hence defining the space between its contents and its border. The padding value can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows.

Padding.jpg

Link padding

Sets the pixels for the menu links padding, hence defining the space between the link contents and the link border. The Link padding value can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows.

Link_padding.jpg

Icon

Icon padding

Sets the menu links icons padding, hence defining the space between the menu links icons and their border. The Menu links icons value can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows.

icon_padding.jpg

Icon position

Sets the position of the menu links icons, selecting from the drop-down list options: left or top.

Icon_position.jpg

Icon size

Sets the size of the menu links icons, using the up and down arrows to increase and decrease, or by manually typing the desired value.

Icon_size.jpg

Typography

Font size

Sets the size of the menu links font, using the up and down arrows to increase and decrease, or by manually typing the desired value.

Font_size.jpg

Font weight

Sets the weight of the menu links font, selecting from the drop-down list options: normal, 900 (fat), 800 (extra-bold), 700 (bold), 600 (semi-bold), 500 (medium), 400 (regular), 300 (light), 200 (extra-light) and 100 (thin).

Font_weight.jpg

Configuration

Logo Image

Sets the image for the menu logo. The image source can be selected by clicking the Upload image button, the user can either drop files in the designated area or click to upload the image from the local machine. Additionally, if any images have been previously uploaded they will be displayed under the content folder and reused.

The maximum image size is of 1MB.

logo_Image.jpg

Logo Image Width

Sets the width of the menu logo.

Logo_image_width.jpg

Transform

Width

Sets the width of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component width can also be adjusted directly on the design surface by means of mouse manipulation.

Control_width.jpg

Height

Sets the height of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component height can also be adjusted directly on the design surface by means of mouse manipulation.

Control_height.jpg

Angle

Sets the rotation angle using the up and down arrows to increase and decrease, or by manually typing the desired degree value.

The component angle can also be adjusted directly on the design surface by means of mouse manipulation.

Angle.jpg

Left

Specifies the X (horizontal) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component X coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

Left.jpg

Top

Specifies the Y (vertical) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component Y coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

Top.jpg
Navigation tabs
Abstract

Check out this article and read all you need to know about the i4designer Navigation tabs component of the i4SCADA Platform.

The Navigation tabs component offers the basic functionality of opening a specified navigation structure path, allowing the user to navigate between multiple project pages.

Navigation_tabs.jpg

The Navigation tabs component

Category

Property

Description

Configuration

Layout mode

Sets the behaviour of the component related to the page placement. The user can select the component layout from the options available in the drop-down list: Default, Dock top, Dock bottom, Dock left, Dock right, Stretched, Pin top left, Pin top center, Pin top right, Pin right middle, Pin bottom right, Pin bottom center, Pin bottom left, Pin left middle and Pin center.

Layout_mode.jpg

Palette

Shadow color

Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.

Shadow_color.jpg

Tab header background

Sets the background color or the navigation tab header. The user can either manually type in the HEX color code or use the color picker tool.

tab_header_background.jpg

Tabs foreground

Sets the color of the text displayed in the navigation tab header. The user can either manually type in the HEX color code or use the color picker tool.

tabs_foreground.jpg

Tab body background

Sets the background color of the navigation tab body. The user can either manually type in the HEX color code or use the color picker tool.

tab_body_background.jpg

Border color

Sets the border color of the navigation tab component. The user can either manually type in the HEX color code or use the color picker tool.

Tab_Border_color.jpg

Layout

Opacity

Sets the opacity of the component. The Opacity values should be numbers from 0 to 1 representing the opacity of the component. When the component has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid).

By default, the Component's opacity is set to value 1. Using the up / down arrows the user can control the opacity degree.

Opacity.jpg

By clicking the Open button the view is extended to display the Opacity slider.

Opacity_slider.jpg

Margin

Sets the margin of the component relative to the drawing board area. The supported values are the standard CSS values for the margin.

The top, bottom, left and right values can either be typed in the main property field or by using the Margin editor.

Margin_small.jpg

The Margin editor can be opened by clicking the Open button.

Margin_large.jpg

The components margins can be updated by setting the margin value and selecting the desired unit:

  • Ems (em) - The em is a scalable unit. One em is equal to the current font-size;

  • Pixels (px) - Pixels are are fixed-size units. One pixel is equal to one dot on the computer screen (the smallest division of a screen’s resolution).

  • Percent (%) - The percent unit is much like the “em” unit. When using the Percent unit the component remains fully scalable for mobile devices and accessibility.

Shadow offset X

Sets the offset of the shadow on the horizontal axis. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_offset_X.jpg

Shadow offset Y

Sets the offset of the shadow on the vertical axis. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_offset_Y.jpg

Shadow size

Sets the width of the component shadow. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_size.jpg

Navigation

Navigation Structure File Path

Allows the user to either select or type in the path towards the navigation structure file.

Navigation_path.jpg

Upon navigation structure selection, the component will be updated accordingly.

Navigation_path_applied.jpg

Transform

Width

Sets the width of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component width can also be adjusted directly on the design surface by means of mouse manipulation.

Control_width.jpg

Height

Sets the height of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component height can also be adjusted directly on the design surface by means of mouse manipulation.

Control_height.jpg

Angle

Sets the rotation angle using the up and down arrows to increase and decrease, or by manually typing the desired degree value.

The component angle can also be adjusted directly on the design surface by means of mouse manipulation.

Angle.jpg

Left

Specifies the X (horizontal) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component X coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

Left.jpg

Top

Specifies the Y (vertical) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component Y coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

Top.jpg