Label#
General information#
Label is a basic UI component designed to display non-editable text fields on screenshots. This component is widely used to add descriptive text, titles, or simply display information that the user cannot change.
Parameters#
Component Properties:
Settings group |
Setting Field |
Value Options |
Purpose |
|---|---|---|---|
(Global settings) |
Name |
- |
Name of the UI Component in the system |
Text |
Font size |
- |
Size of the font |
Color |
- |
Text color (CSS) |
|
Bold |
true, false |
Bold font |
|
Italic |
true, false |
Italic font |
|
Text alignment |
Left, Right, Center, Justify |
Text alignment |
|
Common |
Binding |
Multiselect of Catalog |
Binding to Data |
Value |
- |
Static field value |
|
Format |
- |
Data input/output format (For DataTime) |
CSS Properties:
Settings group |
Setting Field |
Value Options |
Purpose |
|---|---|---|---|
Layout |
Align items |
None, Center, End, Start, Stretch |
Aligning elements in a flex container |
Width |
- |
Component width |
|
Height |
- |
Component height |
|
Grow |
true, false |
Stretching a component in a container |
|
Margin |
- |
Outer padding |
|
Padding |
- |
Inner padding |
|
Appearance |
CornerRadius |
- |
Corner radius |
BorderThickness |
- |
Border thickness |
|
Brush |
Background |
- |
Background color |
BorderBrush |
- |
Border color |
Cases#
Information Tips: Using a label to provide supporting information next to other UI elements, such as explaining the functions of buttons or input data.
Section Headings: Labels can serve as headings for different sections of the interface, clearly delineating content to improve the user experience.
Status Display: In cases where it is necessary to display the status or result of an operation, a label can be used to display the corresponding messages (for example, “Loading…”, “Successfully completed”).
Exceptions#
Non-Editability: Label is not intended for user input or editing of text. Trying to use it for these purposes will result in ineffective interface design.
Format Restrictions: While label allows a certain level of text customization, it cannot contain complex text elements such as hyperlinks or inline images.