Adornments
You can enhance the visual and functional aspects of the TextArea component by using custom adornments in the form of prefixes and suffixes. Decorating the component allows you to make it more user-friendly and engaging.
Prefix Adornments
The TextBox allows you to add custom items as prefix adornments by using the TextAreaPrefixComponent
.
Suffix Adornments
The TextBox allows you to add custom items suffix adornments by using the TextAreaSuffixComponent
.
Flow Direction
The TextArea provides the option for specifying the flow direction and adornment's orientation:
- By default, the flow is vertical. To change the direction, set the
flow
option of the TextArea tohorizontal
. - By default, the adornment's orientation is horizontal. To change the direction, set the
adornmentsOrientation
option of the TextArea tovertical
.
Separator
To visually separate the prefix and suffix, set the showPrefixSeparator
and showSuffixSeparator
properties of the TextArea to true
.
To separate multiple adornment items, you can add a Separator
component.
Disabling Adornments
You can ensure the consistent appearance of the TextArea component by controlling the disabled state of the adornments inside the prefix and suffix containers.
The following example demonstrates how to set the disabled
property of the buttons that are used as adornments when you disable the TextArea.