Quick Apps

# Common Attributes

All the essential elements implements the following common attributes. Each element extends the list with other attributes depending on the case. Check the specific element to see more details on the concrete extensions.

# Basic Attributes

# id

Unique identifier of the element.

  • Type: string
  • Value by default: -

# style

Definition of the CSS styles inline.

  • Type: string
  • Value by default: -

# class

Class to apply CSS styles on elements.

  • Type: string
  • Value by default: -

# disabled

Indicates whether the current element is available for use (false) or not (true).

  • Type: boolean
  • Value by default: false

# focusable

Flag to indicate if the element can get the focus (true) or nor (false).

  • Type: boolean
  • Value by default: false

# data

Auxiliary attribute to facilitate data storage and manipulation.

  • Type: string
  • Value by default: -

# dir

Attribute that indicates the display writing direction of the element.

  • Type: string with the following values.
  • ltr: from left to right
  • rtl: from right to left
  • auto: automatically set by the system

If this parameter is not set, this element inherits the value of parent element's dir. If the element is at the root of the template it will take the system settings by default.

WARNING

  • The value ltr of this attribute does not take effect for the marquee element when the script writing direction is right-to-left (e.g., in Arabic).

# Rendering Logic Attributes

The component template could include directives to render blocks conditionally. If the condition defined by the directive is not met, the element is removed from the Virtual DOM.

The following attributes set the directives to control the conditional rendering:

# for

Loop on an array of elements.

  • Type: array

# if/elif/else

Boolean conditions to display or skip elements in the rendering process.

  • Type: boolean

# show

Boolean condition to display the current element (true) or not (false). This directive has the same behavior as { display: flex | none }.

  • Type: boolean

For details about how to use rendering attributes, check the conditional rendering section.

← Common Styles →