Skip to main content
Version: 5.0.0

Tabs and accordion

Both organise a dense screen into parts. Tabs show one part at a time and keep the list of parts always in view; an accordion stacks the parts as collapsible sections, one or several open. Below are the real components of the AWE React client: click on them.

Tabs​

A tab holds one tabcontainer per page. The list of tabs comes from an enumerated list or a query of the server (initial-load and target-action) and the value of each option is the id of its tabcontainer. Here the stage fills that list with a static one.

Live preview
XML
<tab id="demo" initial-load="enum" target-action="CustomerTabs">
  <tabcontainer id="general">
    <tag type="p" label="Name, tax id and the main contact of the customer." />
  </tabcontainer>
  <tabcontainer id="billing">
    <tag type="p"
         label="Payment method, invoicing address and the invoices of the year." />
  </tabcontainer>
  <tabcontainer id="history">
    <tag type="p"
         label="Orders, incidents and every change made to the customer." />
  </tabcontainer>
</tab>

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

AttributeControlValues
orientationOrientationhorizontalvertical

Accordion​

An accordion holds accordion-item elements, each with a label for its header. By default (autocollapse="true") opening an item closes the others.

Live preview
XML
<accordion id="demo">
  <accordion-item id="shipping" label="Shipping">
    <tag type="p" label="Address, carrier and delivery window of the order." />
  </accordion-item>
  <accordion-item id="payment" label="Payment">
    <tag type="p" label="Payment method, instalments and the invoice data." />
  </accordion-item>
  <accordion-item id="notes" label="Notes">
    <tag type="p"
         label="Free text for the warehouse and for the customer service." />
  </accordion-item>
</accordion>

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

AttributeControlValues
autocollapseOpen itemstruefalse

Recipes​

Form split into tabs​

Each tabcontainer holds any component. A tab with an invalid field is marked in the list, so the user knows where to look.

<tab id="form" initial-load="enum" target-action="FormTabs">
  <tabcontainer id="person">
    <criteria id="Name" component="text" label="Name" placeholder="Full name" />
    <criteria id="Email" component="text" label="Email" icon="lucide:mail" />
  </tabcontainer>
  <tabcontainer id="company">
    <criteria id="Company" component="text" label="Company name" />
    <criteria id="Size" component="numeric" label="Employees" />
  </tabcontainer>
</tab>

Accordion with several sections open​

autocollapse="false" lets the user keep several sections open at the same time, to compare them.

<accordion id="faq" autocollapse="false">
  <accordion-item id="what" label="What is a criterion?">
    <tag type="p" label="An input of a screen: it gets a value from the user and sends it to the server." />
  </accordion-item>
  <accordion-item id="where" label="Where do the options come from?">
    <tag type="p" label="From an enumerated list or a query of the server." />
  </accordion-item>
</accordion>

Events and actions​

Neither has an event of its own. The user picks the tab or the section; to do it from the screen, a dependency changes the selected attribute of an accordion with the id of the item to open (see the accordion), and a variable makes a screen open on a given tab. A tabcontainer with deferred="true" loads its data the first time its tab is shown.

More​