Tags and lists

A tag is the basic building block of a screen. With a type it generates an HTML element (div, p, h3...) that groups other elements, applies CSS classes and shows a text or an icon. A tag-list repeats a tag for each row of a query, and <text> writes plain text inside a tag. The header-tag elements are the tags of the identity header of a side panel.

Tag

The text of a tag is its label, translated with the locales of the application. The two section title styles of the design system need a heading type (h2 to h6) so screen readers announce the section. The icon is decorative and is only drawn for a tag with a label.

Live preview

LightDark

Controls

HTML element

h3pdivspan

Label

Style

Icon

∅No iconuserkey-roundmailsettings

XML

<tag id="demo" type="h3" label="Customer identity" style="awe-section-title" />

Attributes

The controls above write these attributes. The reference lists every attribute, its type and default. Attributes in the XSD reference

Attribute	Control	Values
type	HTML element	h3pdivspan
label	Label	text
style	Style	awe-section-titleawe-form-section-title
icon	Icon	lucide:userlucide:key-roundlucide:maillucide:settings

Full reference

• Full documentation of this component
• XSD reference of the element

Recipes

Sections of a form

awe-form-section-title titles a section of a form with its icon and a separator above every title but the first. Keep the titles and the criteria of the form as siblings in the same container.

<tag type="div" style="panel-body">
  <tag type="h3" style="awe-form-section-title" label="Identity" icon="user" />
  <criteria id="FullName" component="text" label="Full name" />
  <tag type="h3" style="awe-form-section-title" label="Sign-in and security" icon="lucide:key-round" />
  <criteria id="Password" component="password" label="Password" />
</tag>

Text written as it is

A tag with a label writes translated text. The <text> form writes the text as it is, without looking it up in the locales; it is used instead of the label, never with it.

<tag type="p"><text>Invoices are sent on the first day of each month.</text></tag>

A tag for each row

A tag-list takes the rows of its query and generates its child tags once per row, replacing [column] with the value of the row. Its type is the element that holds them: a ul of li here. The rows come from the server; the preview fills them with a static model.

<tag-list id="CustomerList" type="ul" initial-load="query" target-action="CustomerQuery">
  <tag type="li" label="[name] ([plan] plan)" />
</tag-list>

Events and actions

A tag has no event or action of its own. A tag-list reloads when its autorefresh period passes or when an action loads its target, and a dependency can show or hide any tag.

More

• Full documentation of the tag: sources, the layout and the section titles.
• XSD reference of the tag element, of the tag-list element and of the header-tag element.