Introduction to Text

Text plays a vital role in the UI, encompassing both the information entered by users and the textual content or symbols displayed to them. The text elements collaborate to bridge the interaction between users and the system, enhancing ease of operation and providing clear information presentation.

For page development, select from the text components below based on your specific requirements.

Text Display

To display static text, use the Text component for straightforward text display, or combine it with Span for more complex text layouts. Alternatively, craft text using StyledString or MutableStyledString and integrate it into the Text component. For details, see Text Display (Text/Span).

Text Input

Choose TextInput for single-line input and TextArea for multi-line input. For details, see Text Input (TextInput/TextArea/Search).

Rich Text

For rich text editing, including the insertion of images and custom icons, use the RichEditor component. For details, see Rich Text Editing (RichEditor).

Symbol Glyph

To display small symbolic representations, use the SymbolGlyph or SymbolSpan component. For details, see Symbol Glyph (SymbolGlyph/SymbolSpan).

Styled String

For character-level or paragraph-level text styling, such as adjusting font sizes, applying colors, adding clickable text spans, or implementing custom text rendering, use the styled string capability. For details, see Styled String (StyledString/MutableStyledString).

Text and Image Layout

You can use Span and ImageSpan to implement basic image and text layouts. For more diverse and complex text-image layouts, use styled strings. For details, see Text and Image Layout.

Soft Keyboard Management

You can control the soft keyboard behavior for text input components, including displaying and hiding the keyboard. For details, see Soft Keyboard Management.