label component is quite versatile. It can be used as a simple text prompt (“Enter your name” etc), for multi-line paragraphs, and for headings. The text can be static or made dynamic by linking it to a domain class & attribute or some other UI component.
To add a label to the wireframe in EA, add a
Label component to the wireframe.
Label can be found in the Toolbox under
Controls, in the
UX Design >
To create a heading or sub-heading:
- Add a
Labelcomponent to the wireframe
- Add a
css classtag, with the value
h2(and so on up to
- In the wireframe editor, also set the font size to 18 (for h1) or 14 (for h2)
The third step is optional, but it helps to keep the wireframe and generated page looking alike.
The easiest way to set the label text is to use the
name property. EA shows the name as the label text on the wireframe.
As with all components, CodeBot uses the name as the component name in the generated code. However if the label is quite long or contains many non-alphanumeric characters (or “worst case” if it’s all non-alphanumeric, e.g. “—————”), this may not be ideal. In this case, you can give the label a “normal” name e.g. “divider”, and put the text in a tagged value called
text. The label will be displayed as “divider” in the wireframe, but will be displayed correctly in the generated UI.
Label component is primarily configured through the following tagged values:
|Tag name||Values||Default value||Notes|
| ||string value||If absent, the component name is used||The label text.|
| ||Any CSS class name, without a preceding ||See the notes above about creating a heading or sub-heading.|
| ||Any “standard” Bootstrap variant value - see Variant in the Tagged Values reference||For React, this will turn the label into an “Alert” component, with a background and text colour matching the variant. Useful for callouts, notes and static warnings (“Clicking OK will delete all your data”).|
Common tagged values shared by most components.