EccPanel

EccPanel is a titled box around a part of a form. The header shows an optional icon and title; with collapsible a click on the header folds the panel. With an id a page validator can hide it.

 
import { EccPanel } from "@/ecc/components/forms/EccPanel";

Example

 
<EccPanel id="purchase-contact" title="Contact person" icon="user" collapsible>
  <EccText fieldLabel="Name" value="purchase.contactPerson.name" data={draft} valueOut editable />
</EccPanel>

Ecc components in this example: EccText - how to use them is described in UI Components.

Behaviour

• The header is shown when the panel has a title, an icon or is collapsible; otherwise only the body is rendered.
• The header has a grey background unless titleTransparent is set.
• A collapsed panel does not render its body. It always starts open.
• hidden or setHidden(id, true) in the page validator removes the whole panel.

Props

Icon presets:

• user, mail, id, key, hash, link, copy, clipboard: general icons
• task-open, task-wip, task-done: task states
• process-pending, process-active, process-completed, process-aborted, process-suspended, process-failed: process states

Related