Web Components Structure

The family of Iotellect web components includes all kinds of building blocks to create a highly customizable UI for any purpose. Despite being very different, they still have a lot of things in common markup-wise, in particular the general HTML wrappers composition and the class names system. It's also safe to expect specific markup patterns and attributes to occur within similar components or complex components that inherit some of their elements from simpler ones.

Every component on a dashboard, including Panels, has the same set of essential HTML wrappers, which can be divided into two groups:

• Container part of the component

• Element part of the component

Each set is represented by several HTML containers with distinct attributes having partially predefined values.

Learn technical details about both of these parts in the Container Part of a Component and Element Part of a Component articles.

Depending on a component type, it may have some parts that are used across several components with similar features. In such cases you should expect the same, or very close to same, set of HTML elements to occur to render those parts.

Look for similarities in markup inside the components within the next groups:

• Tab Panel, Steps Panel, Carousel

• System Tree, Custom Tree

• Data Table, Class Data Table, Class Field List, Event Log, Context List

• Text Field, Text Area, Number Field

• Dropdown List, Dropdown Tree, Dropdown Menu

• Date Time Picker, Time Picker

• Charts

Identical markup of some component parts within the group means that you can write global styles for entire groups of different components, affecting elements they share by one CSS rule.

Get more useful information on common markup structures inside web components in the other articles of this section.

Was this page helpful?

Tell us more

Send

Thank you!