Display text, which can either be simple/static, or bound to a component such as a table’s selected row. Turn a label into a heading by adding a
css class tagged value with
h2 etc (named after Bootstrap classes).
Depending which modeling tool you’re using, add the following component from the palette into the wireframe:
|Displays a single text value||The component can display an individual text value, which can be derived from a bound UI event (e.g. table row selection).|
|Reactive||The component can listen to UI events triggered by another component, via the |
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.
Using EA, 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. If you want the label to contain a whole paragraph, in EA set the
multiline property to true. (This doesn’t affect how the UI element is generated, as it’ll naturally word-wrap depending on the CSS styling).
Using MagicDraw, either use
name as with EA, or use the
text property. If
text is non-empty, it’ll be used instead of `name’.
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.
| ||Makes this UI Element listen to another UI element for events (e.g. row item selected), via a Redux UI global state selector. |
This tag is the same as connecting the elements with a Dependency arrow. However, you can use this tag, for example, if the other UI element is on a different wireframe.
The following component types can be ‘state-bound’ (i.e. listen to another UI Element via the bind tag or dependency arrow):
Button, Checkbox, ComboBox, Link, ListBox, MapPicker, MediaPlayer, PasswordField, RangeInput, Table, TextArea, TextField
|DEFAULT: the UI element name||Text to display, if not using the component name. |
For EA wireframes the element name is normally used; however this tag will override that if the name needs to be different, e.g. to avoid duplicate element names, or if the text won’t map well to variable names etc.
| ||DEFAULT: no||If true (or yes), the input element can’t be edited; updates are only via a bound element such as a ComboBox.|
| ||Any CSS class name, without a preceding ||Adds the specified CSS class (or classes) to the UI element. If you define a class in a custom CSS file, you can apply it to a component using this tag. CodeBot will also recognise any ‘standard’ Bootstrap CSS classes such as |
|Must be one of: primary, secondary, success, danger, warning, info, light, dark, link||Changes a UI Element’s appearance. The allowed values are based on Bootstrap’s variant CSS classes. |
For React Labels, 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”).