Creating elements

UI elements can be created from the Create panel. The different types of elements that can be created are divided in four main sections: Common elements, Form elements, Lists and Advanced widgets. To create an element simply choose the desired tool from the Create panel and draw the element by click and drag in the editor Viewport. You can customize its properties in the Properties panel. You can position the UI elements by drag and drop in the editor Viewport. If you wish to delete the element from the scene you can use the remove widget button in the Properties panel or the "del" key keyboard shortcut. Below you can find a complete list of all the elements that can be created and their properties.

Depending on the target HTML renderer some primitives/properties might not be available in the Create and Properties panels. Please refer to your target HTML renderer's documentation for more information about features and styles support.

Common elements

Rectangle

Customizable properties:

  • id - HTML id attribute. The id attribute specifies a unique id for an HTML element. It can be used to manipulate/style the element when using external JavaScrip/CSS files.
  • class - HTML class attribute. Classing HTML elements, makes it possible to define CSS styles for classes of elements. It can also be used to manipulate/style the element when using external JavaScrip/CSS files.
  • font size - font size of child text elements (for more information about child elements check the Grouping and Inheritance section). The supported units are px, vh, vw, rem, pt.
  • font style - font style of child text elements (for more information about child elements check the Grouping and Inheritance section) Can be: normal, italic, oblique.
  • font weight - The font-weight property sets how thick or thin characters in text should be displayed.
  • background - the background color.
  • text color - the text color of child text elements (for more information about child elements check the Grouping and Inheritance section).
  • border style - type of border (stroke). Can be: none, hidden, dotted, dashed, solid. You can also specify the width and color of the border.
  • Geometry/position - the position of the element. The supported units are px, vh, vw, rem, pt. The positioning can be either relative or absolute.
  • Geometry/width - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Geometry/height - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Events - Blueprint or JavaScript functions to be executed for different events. Currently supported events: click, double click, mouse enter, mouse out, mouse over, mouse down, mouse leave, mouse move, mouse wheel. For more information please refer to the the "Events" section.

Rounded rectangle

Customizable properties:

  • id - HTML id attribute. The id attribute specifies a unique id for an HTML element. It can be used to manipulate/style the element when using external JavaScrip/CSS files.
  • class - HTML class attribute. Classing HTML elements, makes it possible to define CSS styles for classes of elements. It can also be used to manipulate/style the element when using external JavaScrip/CSS files.
  • font size - font size of child text elements (for more information about child elements check the Grouping and Inheritance section). The supported units are px, vh, vw, rem, pt.
  • font style - font style of child text elements (for more information about child elements check the Grouping and Inheritance section) Can be: normal, italic, oblique
  • font weight - The font-weight property sets how thick or thin characters in text should be displayed.
  • background - the background color
  • text color - the text color of child text elements (for more information about child elements check the Grouping and Inheritance section)
  • border style - type of border (stroke). Can be: none, hidden, dotted, dashed, solid. You can also specify the width and color of the border. Furthermore you can specify the roundness of each of the four corners of the rectangle. The supported units are px, vh, vw, rem, pt.
  • Geometry/position - the position of the element. The supported units are px, vh, vw, rem, pt. The positioning can be either relative or absolute.
  • Geometry/width - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Geometry/height - the height of the element. The supported units are px, vh, vw, rem, pt.
  • Events - Blueprint or JavaScript functions to be executed for different events. Currently supported events: click, double click, mouse enter, mouse out, mouse over, mouse down, mouse leave, mouse move, mouse wheel. For more information please refer to the the "Events" section.

Circle

Customizable properties:

  • id - HTML id attribute. The id attribute specifies a unique id for an HTML element. It can be used to manipulate/style the element when using external JavaScrip/CSS files.
  • class - HTML class attribute. Classing HTML elements, makes it possible to define CSS styles for classes of elements. It can also be used to manipulate/style the element when using external JavaScrip/CSS files.
  • font size - font size of child text elements (for more information about child elements check the Grouping and Inheritance section). The supported units are px, vh, vw, rem, pt.
  • font style - font style of child text elements (for more information about child elements check the Grouping and Inheritance section) Can be: normal, italic, oblique
  • font weight - The font-weight property sets how thick or thin characters in text should be displayed.
  • background - the background color
  • text color - the text color of child text elements (for more information about child elements check the Grouping and Inheritance section)
  • border style - type of border (stroke). Can be: none, hidden, dotted, dashed, solid. You can also specify the width and color of the border. The supported units are px, vh, vw, rem, pt.
  • Geometry/position - the position of the element. The supported units are px, vh, vw, rem, pt. The positioning can be either relative or absolute.
  • Geometry/width - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Geometry/height - the height of the element. The supported units are px, vh, vw, rem, pt.
  • Events - Blueprint or JavaScript functions to be executed for different events. Currently supported events: click, double click, mouse enter, mouse out, mouse over, mouse down, mouse leave, mouse move, mouse wheel. For more information please refer to the the "Events" section.

Ellipse

Customizable properties:

  • id - HTML id attribute. The id attribute specifies a unique id for an HTML element. It can be used to manipulate/style the element when using external JavaScrip/CSS files.
  • class - HTML class attribute. Classing HTML elements, makes it possible to define CSS styles for classes of elements. It can also be used to manipulate/style the element when using external JavaScrip/CSS files.
  • font size - font size of child text elements (for more information about child elements check the Grouping and Inheritance section). The supported units are px, vh, vw, rem, pt.
  • font style - font style of child text elements (for more information about child elements check the Grouping and Inheritance section) Can be: normal, italic, oblique
  • font weight - The font-weight property sets how thick or thin characters in text should be displayed.
  • background - the background color
  • text color - the text color of child text elements (for more information about child elements check the Grouping and Inheritance section)
  • border style - type of border (stroke). Can be: none, hidden, dotted, dashed, solid. You can also specify the width and color of the border
  • Geometry/position - the position of the element. The supported units are px, vh, vw, rem, pt. The positioning can be either relative or absolute.
  • Geometry/width - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Geometry/height - the height of the element. The supported units are px, vh, vw, rem, pt.
  • Events - Blueprint or JavaScript functions to be executed for different events. Currently supported events: click, double click, mouse enter, mouse out, mouse over, mouse down, mouse leave, mouse move, mouse wheel. For more information please refer to the the "Events" section.

Text

Customizable properties:

  • id - HTML id attribute. The id attribute specifies a unique id for an HTML element. It can be used to manipulate/style the element when using external JavaScrip/CSS files.
  • class - HTML class attribute. Classing HTML elements, makes it possible to define CSS styles for classes of elements. It can also be used to manipulate/style the element when using external JavaScrip/CSS files.
  • text - The actual text itself.
  • font size - font size of the text element.The supported units are px, vh, vw, rem, pt.
  • font style - font style - can be: normal, italic, oblique
  • font weight - The font-weight property sets how thick or thin characters in text should be displayed.
  • background - the background color
  • text color - the text color
  • Geometry/position - the position of the element. The supported units are px, vh, vw, rem, pt. The positioning can be either relative or absolute.
  • Geometry/width - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Geometry/height - the height of the element. The supported units are px, vh, vw, rem, pt.
  • Events - Blueprint or JavaScript functions to be executed for different events. Currently supported events: click, double click, mouse enter, mouse out, mouse over, mouse down, mouse leave, mouse move, mouse wheel. For more information please refer to the the "Events" section.

Image

Customizable properties:

  • id - HTML id attribute. The id attribute specifies a unique id for an HTML element. It can be used to manipulate/style the element when using external JavaScrip/CSS files.
  • class - HTML class attribute. Classing HTML elements, makes it possible to define CSS styles for classes of elements. It can also be used to manipulate/style the element when using external JavaScrip/CSS files.
  • font size - font size of child text elements (for more information about child elements check the Grouping and Inheritance section). The supported units are px, vh, vw, rem, pt.
  • font style - font style of child text elements (for more information about child elements check the Grouping and Inheritance section) Can be: normal, italic, oblique
  • font weight - The font-weight property sets how thick or thin characters in text should be displayed.
  • Geometry/position - the position of the element. The supported units are px, vh, vw, rem, pt. The positioning can be either relative or absolute.
  • Geometry/width - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Geometry/height - the height of the element. The supported units are px, vh, vw, rem, pt.
  • Events - Blueprint or JavaScript functions to be executed for different events. Currently supported events: click, double click, mouse enter, mouse out, mouse over, mouse down, mouse leave, mouse move, mouse wheel. For more information please refer to the the Events section.

You can also use the "Browse" button to select file to be used

Video

Customizable properties:

  • id - HTML id attribute. The id attribute specifies a unique id for an HTML element. It can be used to manipulate/style the element when using external JavaScrip/CSS files.
  • class - HTML class attribute. Classing HTML elements, makes it possible to define CSS styles for classes of elements. It can also be used to manipulate/style the element when using external JavaScrip/CSS files.
  • font size - font size of child text elements (for more information about child elements check the Grouping and Inheritance section). The supported units are px, vh, vw, rem, pt.
  • font style - font style of child text elements (for more information about child elements check the Grouping and Inheritance section) Can be: normal, italic, oblique
  • font weight - The font-weight property sets how thick or thin characters in text should be displayed.
  • Geometry/position - the position of the element. The supported units are px, vh, vw, rem, pt. The positioning can be either relative or absolute.
  • Geometry/width - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Geometry/height - the height of the element. The supported units are px, vh, vw, rem, pt.
  • Events - Blueprint or JavaScript functions to be executed for different events. Currently supported events: click, double click, mouse enter, mouse out, mouse over, mouse down, mouse leave, mouse move, mouse wheel. For more information please refer to the the "Events" section.

You can also use the "Browse" button to select file to be used.

Note that by default the video clips added are paused. Currently you can not cotrol the video playback from the editor itself. You need to use JavaScript for this. For example if you want to play a video with id "myVideo" you can use the following code:

    var video = document.getElementById("myVideo");
    video.play();

If you add this code to for example the "onSceneLoad" event of the scene the video will play when the page is initialilly loaded. For more information about events please refer to the "Events" section.

Button

Customizable properties:

  • id - HTML id attribute. The id attribute specifies a unique id for an HTML element. It can be used to manipulate/style the element when using external JavaScrip/CSS files.
  • class - HTML class attribute. Classing HTML elements, makes it possible to define CSS styles for classes of elements. It can also be used to manipulate/style the element when using external JavaScrip/CSS files.
  • text - the actual text of the button
  • padding - the space between the element border and the text.
  • font size - font size of child text elements (for more information about child elements check the Grouping and Inheritance section). The supported units are px, vh, vw, rem, pt.
  • font style - font style of child text elements (for more information about child elements check the Grouping and Inheritance section) Can be: normal, italic, oblique
  • font weight - The font-weight property sets how thick or thin characters in text should be displayed.
  • background - the background color
  • background image - image file used for background of the button
  • text color - the text color of child text elements (for more information about child elements check the Grouping and Inheritance section)
  • border style - type of border (stroke). Can be: none, hidden, dotted, dashed, solid. You can also specify the width and color of the border
  • Geometry/position - the position of the element. The supported units are px, vh, vw, rem, pt. The positioning can be either relative or absolute.
  • Geometry/width - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Geometry/height - the height of the element. The supported units are px, vh, vw, rem, pt.
  • Events - Blueprint or JavaScript functions to be executed for different events. Currently supported events: click, double click, mouse enter, mouse out, mouse over, mouse down, mouse leave, mouse move, mouse wheel. For more information please refer to the "Events" section.

Div

HTML div element

Customizable properties:

  • id - HTML id attribute. The id attribute specifies a unique id for an HTML element. It can be used to manipulate/style the element when using external JavaScrip/CSS files.
  • class - HTML class attribute. Classing HTML elements, makes it possible to define CSS styles for classes of elements. It can also be used to manipulate/style the element when using external JavaScrip/CSS files.
  • font size - font size of child text elements (for more information about child elements check the Grouping and Inheritance section). The supported units are px, vh, vw, rem, pt.
  • font style - font style of child text elements (for more information about child elements check the Grouping and Inheritance section) Can be: normal, italic, oblique
  • font weight - The font-weight property sets how thick or thin characters in text should be displayed.
  • background - the background color
  • text color - the text color of child text elements (for more information about child elements check the Grouping and Inheritance section)
  • Geometry/position - the position of the element. The supported units are px, vh, vw, rem, pt. The positioning can be either relative or absolute.
  • Geometry/width - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Geometry/height - the height of the element. The supported units are px, vh, vw, rem, pt.
  • Events - Blueprint or JavaScript functions to be executed for different events. Currently supported events: click, double click, mouse enter, mouse out, mouse over, mouse down, mouse leave, mouse move, mouse wheel. For more information please refer to the Events section.

Form elements

Input field

Customizable properties:

  • id - HTML id attribute. The id attribute specifies a unique id for an HTML element. It can be used to manipulate/style the element when using external JavaScrip/CSS files.
  • class - HTML class attribute. Classing HTML elements, makes it possible to define CSS styles for classes of elements. It can also be used to manipulate/style the element when using external JavaScrip/CSS files.
  • font size - font size of child text elements (for more information about child elements check the Grouping and Inheritance section). The supported units are px, vh, vw, rem, pt.
  • font style - font style of child text elements (for more information about child elements check the Grouping and Inheritance section) Can be: normal, italic, oblique
  • font weight - The font-weight property sets how thick or thin characters in text should be displayed.
  • background - the background color
  • text color - the text color of child text elements (for more information about child elements check the Grouping and Inheritance section)
  • Geometry/position - the position of the element. The supported units are px, vh, vw, rem, pt. The positioning can be either relative or absolute.
  • Geometry/width - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Geometry/height - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Events - Blueprint or JavaScript functions to be executed for different events. Currently supported events: click, double click, mouse enter, mouse out, mouse over, mouse down, mouse leave, mouse move, mouse wheel. For more information please refer to the the Events section.

The dropdown menu element is designed to be used in conjunction with dropdown menu option elements. You need to first create a dropdown menu element and then a menu option elements for each of the menu options (lines). You also need to set in the hierarchy panel all the dropdown menu option elements as children to the dropdown menu (for more information about child elements check the Grouping and Inheritance section).

Dropdown menu customizable properties:

  • id - HTML id attribute. The id attribute specifies a unique id for an HTML element. It can be used to manipulate/style the element when using external JavaScrip/CSS files.
  • class - HTML class attribute. Classing HTML elements, makes it possible to define CSS styles for classes of elements. It can also be used to manipulate/style the element when using external JavaScrip/CSS files.
  • font size - font size of child text elements (for more information about child elements check the Grouping and Inheritance section). The supported units are px, vh, vw, rem, pt.
  • font style - font style of child text elements (for more information about child elements check the Grouping and Inheritance section) Can be: normal, italic, oblique
  • font weight - The font-weight property sets how thick or thin characters in text should be displayed.
  • background - the background color
  • text color - the text color of child text elements (for more information about child elements check the Grouping and Inheritance section)
  • Geometry/position - the position of the element. The supported units are px, vh, vw, rem, pt. The positioning can be either relative or absolute.
  • Geometry/width - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Geometry/height - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Events - Blueprint or JavaScript functions to be executed for different events. Currently supported events: click, double click, mouse enter, mouse out, mouse over, mouse down, mouse leave, mouse move, mouse wheel. For more information please refer to the the Events section.

Dropdown menu option customizable properties:

  • id - HTML id attribute. The id attribute specifies a unique id for an HTML element. It can be used to manipulate/style the element when using external JavaScrip/CSS files.
  • class - HTML class attribute. Classing HTML elements, makes it possible to define CSS styles for classes of elements. It can also be used to manipulate/style the element when using external JavaScrip/CSS files.
  • text - the actual text of the option element
  • font size - font size of child text elements (for more information about child elements check the Grouping and Inheritance section). The supported units are px, vh, vw, rem, pt.
  • font style - font style of child text elements (for more information about child elements check the Grouping and Inheritance section) Can be: normal, italic, oblique
  • font weight - The font-weight property sets how thick or thin characters in text should be displayed.
  • background - the background color
  • text color - the text color of child text elements (for more information about child elements check the Grouping and Inheritance section)
  • selected - determines whether the option is selected (highlighted) in the menu
  • value - the value to be sent to a server when used in a HTML form element
  • Events - Blueprint or JavaScript functions to be executed for different events. Currently supported events: click, double click, mouse enter, mouse out, mouse over, mouse down, mouse leave, mouse move, mouse wheel. For more information please refer to the the Events section.

Label

Customizable properties:

  • id - HTML id attribute. The id attribute specifies a unique id for an HTML element. It can be used to manipulate/style the element when using external JavaScrip/CSS files.
  • class - HTML class attribute. Classing HTML elements, makes it possible to define CSS styles for classes of elements. It can also be used to manipulate/style the element when using external JavaScrip/CSS files.
  • text - the text of the label
  • font size - font size of the label. The supported units are px, vh, vw, rem, pt.
  • font style - font style of the label. Can be: normal, italic, oblique
  • font weight - the font-weight property sets how thick or thin characters in text should be displayed.
  • background - the background color
  • text color - the text color of of the label
  • Geometry/position - the position of the element. The supported units are px, vh, vw, rem, pt. The positioning can be either relative or absolute.
  • Geometry/width - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Geometry/height - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Events - Blueprint or JavaScript functions to be executed for different events. Currently supported events: click, double click, mouse enter, mouse out, mouse over, mouse down, mouse leave, mouse move, mouse wheel. For more information please refer to the the Events section.

Slider

Customizable properties:

  • id - HTML id attribute. The id attribute specifies a unique id for an HTML element. It can be used to manipulate/style the element when using external JavaScrip/CSS files.
  • class - HTML class attribute. Classing HTML elements, makes it possible to define CSS styles for classes of elements. It can also be used to manipulate/style the element when using external JavaScrip/CSS files.
  • font size - font size of child text elements (for more information about child elements check the Grouping and Inheritance section). The supported units are px, vh, vw, rem, pt.
  • font style - font style of child text elements (for more information about child elements check the Grouping and Inheritance section) Can be: normal, italic, oblique
  • font weight - The font-weight property sets how thick or thin characters in text should be displayed.
  • min - minimal value of the slider
  • max - maximum value of the slider
  • value - current value of the slider
  • step - step between different positions of the slider
  • Geometry/position - the position of the element. The supported units are px, vh, vw, rem, pt. The positioning can be either relative or absolute.
  • Geometry/width - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Geometry/height - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Events - Blueprint or JavaScript functions to be executed for different events. Currently supported events: click, double click, mouse enter, mouse out, mouse over, mouse down, mouse leave, mouse move, mouse wheel. For more information please refer to the the Events section.

Number field

Customizable properties:

  • id - HTML id attribute. The id attribute specifies a unique id for an HTML element. It can be used to manipulate/style the element when using external JavaScrip/CSS files.
  • class - HTML class attribute. Classing HTML elements, makes it possible to define CSS styles for classes of elements. It can also be used to manipulate/style the element when using external JavaScrip/CSS files.
  • font size - font size of the number field. The supported units are px, vh, vw, rem, pt.
  • font style - font style of the number field. Can be: normal, italic, oblique
  • font weight - the font-weight property sets how thick or thin characters in text should be displayed.
  • min - minimal value of the slider
  • max - maximum value of the slider
  • value - current value of the slider
  • step - step between different positions of the slider
  • Geometry/position - the position of the element. The supported units are px, vh, vw, rem, pt. The positioning can be either relative or absolute.
  • Geometry/width - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Geometry/height - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Events - Blueprint or JavaScript functions to be executed for different events. Currently supported events: click, double click, mouse enter, mouse out, mouse over, mouse down, mouse leave, mouse move, mouse wheel. For more information please refer to the the Events section.

Radio button

Customizable properties:

  • id - HTML id attribute. The id attribute specifies a unique id for an HTML element. It can be used to manipulate/style the element when using external JavaScrip/CSS files.
  • class - HTML class attribute. Classing HTML elements, makes it possible to define CSS styles for classes of elements. It can also be used to manipulate/style the element when using external JavaScrip/CSS files.
  • font size - font size of child text elements (for more information about child elements check the Grouping and Inheritance section). The supported units are px, vh, vw, rem, pt.
  • font style - font style of child text elements (for more information about child elements check the Grouping and Inheritance section) Can be: normal, italic, oblique
  • font weight - the font-weight property sets how thick or thin characters in text should be displayed.
  • checked - whether the button is checked or not
  • background - the background color
  • text color - the text color of child text elements (for more information about child elements check the Grouping and Inheritance section)
  • Geometry/position - the position of the element. The supported units are px, vh, vw, rem, pt. The positioning can be either relative or absolute.
  • Geometry/width - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Geometry/height - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Events - Blueprint or JavaScript functions to be executed for different events. Currently supported events: click, double click, mouse enter, mouse out, mouse over, mouse down, mouse leave, mouse move, mouse wheel. For more information please refer to the the Events section.

Checkbox

Customizable properties:

  • id - HTML id attribute. The id attribute specifies a unique id for an HTML element. It can be used to manipulate/style the element when using external JavaScrip/CSS files.
  • class - HTML class attribute. Classing HTML elements, makes it possible to define CSS styles for classes of elements. It can also be used to manipulate/style the element when using external JavaScrip/CSS files.
  • font size - font size of child text elements (for more information about child elements check the Grouping and Inheritance section). The supported units are px, vh, vw, rem, pt.
  • font style - font style of child text elements (for more information about child elements check the Grouping and Inheritance section) Can be: normal, italic, oblique
  • font weight - the font-weight property sets how thick or thin characters in text should be displayed.
  • checked - whether the button is checked or not
  • background - the background color
  • text color - the text color of child text elements (for more information about child elements check the Grouping and Inheritance section)
  • Geometry/position - the position of the element. The supported units are px, vh, vw, rem, pt. The positioning can be either relative or absolute.
  • Geometry/width - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Geometry/height - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Events - Blueprint or JavaScript functions to be executed for different events. Currently supported events: click, double click, mouse enter, mouse out, mouse over, mouse down, mouse leave, mouse move, mouse wheel. For more information please refer to the the Events section.

Lists

Unordered list

The unordered list is designed to be used in conjunction with the list element. You need to first create a unordered list and then a list element for each of the list options (lines). You also need to set in the hierarchy panel all the list elements as children to the unordered list (for more information about child elements check the Grouping and Inheritance section).

Customizable properties:

  • id - HTML id attribute. The id attribute specifies a unique id for an HTML element. It can be used to manipulate/style the element when using external JavaScrip/CSS files.
  • class - HTML class attribute. Classing HTML elements, makes it possible to define CSS styles for classes of elements. It can also be used to manipulate/style the element when using external JavaScrip/CSS files.
  • text - the tittle text of the list
  • font size - font size of the list. The supported units are px, vh, vw, rem, pt.
  • font style - font style of the list. Can be: normal, italic, oblique
  • font weight - the font-weight property sets how thick or thin characters in text should be displayed.
  • background - the background color
  • text color - the text color of the list.
  • Geometry/position - the position of the element. The supported units are px, vh, vw, rem, pt. The positioning can be either relative or absolute.
  • Geometry/width - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Geometry/height - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Events - Blueprint or JavaScript functions to be executed for different events. Currently supported events: click, double click, mouse enter, mouse out, mouse over, mouse down, mouse leave, mouse move, mouse wheel. For more information please refer to the the Events section.

Ordered list

The ordered list is designed to be used in conjunction with the list element. You need to first create a ordered list and then a list element for each of the list options (lines). You also need to set in the hierarchy panel all the list elements as children to the ordered list (for more information about child elements check the Grouping and Inheritance section).

Customizable properties:

  • id - HTML id attribute. The id attribute specifies a unique id for an HTML element. It can be used to manipulate/style the element when using external JavaScrip/CSS files.
  • class - HTML class attribute. Classing HTML elements, makes it possible to define CSS styles for classes of elements. It can also be used to manipulate/style the element when using external JavaScrip/CSS files.
  • font size - font size of the list. The supported units are px, vh, vw, rem, pt.
  • font style - font style of the list. Can be: normal, italic, oblique
  • font weight - the font-weight property sets how thick or thin characters in text should be displayed.
  • background - the background color
  • text color - the text color of the list.
  • Geometry/position - the position of the element. The supported units are px, vh, vw, rem, pt. The positioning can be either relative or absolute.
  • Geometry/width - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Geometry/height - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Events - Blueprint or JavaScript functions to be executed for different events. Currently supported events: click, double click, mouse enter, mouse out, mouse over, mouse down, mouse leave, mouse move, mouse wheel. For more information please refer to the the Events section.

List element

The list elemt is designed to be used in conjunction with either ordered list or unordered list. You need to first create a list (either ordered or unordered) and then a list element for each of the list options (lines). You also need to set in the hierarchy panel all the list elements as children to the list (for more information about child elements check the Grouping and Inheritance section).

Customizable properties:

  • id - HTML id attribute. The id attribute specifies a unique id for an HTML element. It can be used to manipulate/style the element when using external JavaScrip/CSS files.
  • class - HTML class attribute. Classing HTML elements, makes it possible to define CSS styles for classes of elements. It can also be used to manipulate/style the element when using external JavaScrip/CSS files.
  • text - the text of the list element
  • font size - font size of the list element. The supported units are px, vh, vw, rem, pt.
  • font style - font style of the list element. Can be: normal, italic, oblique
  • font weight - the font-weight property sets how thick or thin characters in text should be displayed.
  • background - the background color
  • text color - the text color of the list element.
  • Geometry/position - the position of the element. The supported units are px, vh, vw, rem, pt. The positioning can be either relative or absolute.
  • Geometry/width - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Geometry/height - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Events - Blueprint or JavaScript functions to be executed for different events. Currently supported events: click, double click, mouse enter, mouse out, mouse over, mouse down, mouse leave, mouse move, mouse wheel. For more information please refer to the the Events section.

Advanced widgets

Flexible panel

Flexible panels elements are powerful UI widgets that you can use to creates intelligent content boxes that are stretchable, squeezable and capable of changing visual order. They are designed to be used in conjunction with the Flexible panel child element. You need to first create a Flexible panel and then a child element for each of the contend boxes that you need. You also need to set in the hierarchy panel all the child elements as children to the Flexible panel (for more information about child elements check the Grouping and Inheritance section).

Flexible panel elements are based on the CSS Flexible Box Layout Module. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

Customizable properties:

  • id - HTML id attribute. The id attribute specifies a unique id for an HTML element. It can be used to manipulate/style the element when using external JavaScrip/CSS files.
  • class - HTML class attribute. Classing HTML elements, makes it possible to define CSS styles for classes of elements. It can also be used to manipulate/style the element when using external JavaScrip/CSS files.
  • font size - font size of child text elements (for more information about child elements check the Grouping and Inheritance section). The supported units are px, vh, vw, rem, pt.
  • font style - font style of child text elements (for more information about child elements check the Grouping and Inheritance section) Can be: normal, italic, oblique
  • font weight - the font-weight property sets how thick or thin characters in text should be displayed.
  • background - the background color
  • text color - the text color of child text elements (for more information about child elements check the Grouping and Inheritance section)
  • flex direction - This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Flex items basically are laying out either in horizontal rows or vertical columns.
  • flex wrap - By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. Direction also plays a role here, determining the direction new lines are stacked in.
  • justify content - This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

    • flex-start (default): items are packed toward the start line
    • flex-end: items are packed toward to end line
    • center: items are centered along the line
    • space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
    • space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren't equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has it's own spacing that applies.
  • align content - this aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

    • flex-start: lines packed to the start of the container
    • flex-end: lines packed to the end of the container
    • center: lines packed to the center of the container
    • space-between: lines evenly distributed; the first line is at the start of the container while the last one is at the end
    • space-around: lines evenly distributed with equal - - space around each line
    • stretch (default): lines stretch to take up the remaining space
  • align items - this defines the default behavior for how flex items are laid out along the cross axis on the current line. Basically it is like the justify-content for the cross-axis (perpendicular to the main-axis).

  • Geometry/position - the position of the element. The supported units are px, vh, vw, rem, pt. The positioning can be either relative or absolute.

  • Geometry/width - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Geometry/height - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Events - Blueprint or JavaScript functions to be executed for different events. Currently supported events: click, double click, mouse enter, mouse out, mouse over, mouse down, mouse leave, mouse move, mouse wheel. For more information please refer to the the Events section.

Flexible panel child

Flexible panel child must be used in conjunction with Flexible panel element.

Customizable properties:

  • id - HTML id attribute. The id attribute specifies a unique id for an HTML element. It can be used to manipulate/style the element when using external JavaScrip/CSS files.
  • class - HTML class attribute. Classing HTML elements, makes it possible to define CSS styles for classes of elements. It can also be used to manipulate/style the element when using external JavaScrip/CSS files.
  • text - the text of the element
  • font size - font size of the element. The supported units are px, vh, vw, rem, pt.
  • font style - font style of the element. Can be: normal, italic, oblique
  • font weight - the font-weight property sets how thick or thin characters in text should be displayed.
  • background - the background color
  • text color - the text color of the element
  • order - By default, flex items are laid out in the order specified in the hierarchy panel. However, the order property allows you to override this order.
  • flex - The flex property specifies the length of the item, relative to the rest of the flexible items inside the same container. The flex property is a shorthand for the flex-grow, flex-shrink, and the flex-basis properties.
  • align self - this allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
  • Geometry/position - the position of the element. The supported units are px, vh, vw, rem, pt. The positioning can be either relative or absolute.
  • Geometry/width - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Geometry/height - the width of the element. The supported units are px, vh, vw, rem, pt.
  • Events - Blueprint or JavaScript functions to be executed for different events. Currently supported events: click, double click, mouse enter, mouse out, mouse over, mouse down, mouse leave, mouse move, mouse wheel. For more information please refer to the the Events section.