A component for displaying body text, supporting text dimension, thickness, color, alignment mode, as well as various options like truncation, italic, strikethrough, and editable.
Basic Usage
Define text content by setting value, and control text size with size.
Template example:
<Text value="Hello world" size="md" />
Effect display as follows:
Attribute Description
Property Name
Type
Description
Default value
value ★
string
Text Content
-
size
"xs" | "sm" | "md" | "lg" | "xl"
text dimension
"md"
color
string
Text color (supports CSS color value)
-
weight
"normal" | "medium" | "semibold" | "bold"
Font thickness
"normal"
textAlign
"start" | "center" | "end"
text alignment
"start"
truncate
boolean
Truncate text that exceeds the length
false
maxLines
number
maximum display lines
-
streaming
boolean
Enable streaming-friendly transition effect
false
italic
boolean
Italic required or not
false
lineThrough
boolean
Whether to display strikethrough
false
width
number | string
text container width
-
minLines
number
Minimum number of rows
-
editable
false | EditableConfig
Whether it is editable and edit configuration
false
Note:
★ Marked with required attribute.
EditableConfig Object
When editable is not false, you can configure the following properties:
Property Name
Type
Description
Default value
name ★
string
Form Field Name
-
autoFocus
boolean
auto-focus
false
autoSelect
boolean
Automatic selection
false
autoComplete
string
auto-completion property
-
allowAutofillExtensions
boolean
Allow automatic filling expansion
false
pattern
string
Verify regular
-
placeholder
string
Placeholder
-
required
boolean
Required
false
disabled
boolean
Disable or not
false
Important Note
streaming: Once the incremental update is completed, set this attribute to false.
Note: Streaming animation is currently not implemented in basic text components, but planned to be added as an optional feature in a future version.
