UI Components
The Ecc components are the building blocks of every page. They are React components of the platform (@/ecc/components/...) that read data, show it in the look of the application and write user input into the page output.
All field components share the same basic props - label, data binding by path, output, copy, visibility. Learn them once in Component Basics; every component page then only describes what is special about that component.
How the components relate
built on the component base | the component renders through the common base: label, info, copy, visibility, hidden and errors behave exactly as described in Component Basics |
basic props, own rendering | the component accepts the basic props but draws its own input; the component page lists which props it supports |
built on EccButton | the component is an |
Field components
text, single line | yes | yes | text | |
long text, optional rich text | yes | yes | text or HTML | |
numbers, amounts, percentages | yes | - | formatted text (explicit | |
dates and times, relative display | yes | - | ISO 8601 date | |
yes/no as checkbox or toggle | yes | yes |
| |
one or several options, with search | - | yes | key or list of keys | |
options as radio buttons or checkboxes | - | yes | key or list of keys | |
passwords, keys, PINs - masked | yes | yes | text |
Actions, layout and tools
| action button with loading and result state | |
structure the page | ||
EccJsonEditor, EccJsonQuery, EccGenerateJsonOutputButton, EccOutputButton | develop and test pages |
Ready-made page parts with their own data loading - headers, footers, history, task lists - are Widgets.
On this page
- UI Components