Layout Components
Four small components and the tab classes structure a page. Combine them with the Bootstrap grid (row, col-md-*).
Component
Purpose
Hidden by a page validator
titled box, optionally collapsible | yes, by | |
labelled group inside a panel, optionally collapsible | no | |
places fields next to or below each other | no | |
invisible container, shown or hidden as a whole | yes, by | |
tab bar with the platform classes | - |
A typical form nests them: panel - group - layout - fields.
TSX
<EccPanel id="purchase-contact" title="Contact person" icon="user">
<EccGroup label="Requester">
<EccLayout layout="horizontal">
<EccText fieldLabel="Name" value="purchase.contactPerson.name" data={draft} valueOut editable />
<EccText fieldLabel="Cost center" value="purchase.requesterCostCenter" data={draft} valueOut editable />
</EccLayout>
</EccGroup>
</EccPanel>
Ecc components in this example: EccPanel, EccGroup, EccLayout, EccText - how to use them is described in UI Components.
Related
Page
Relation
shows and hides | |
the field components placed inside these containers |
Was this section helpful?
On this page
- Layout Components