span
NOTE
This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
As a child component of <text>, the <span> component is used as a text modifier.
Required Permissions
None
Child Components
Not supported
Attributes
The universal attributes are supported.
NOTE
The focusable and disabled attributes are not supported.
Styles
Only the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
|---|---|---|---|---|
| color | <color> | - | No | Font color of the modified text. |
| font-size | <length> | 30px | No | Font size of the modified text. |
| allow-scale | boolean | true | No | Whether the font size of the modified text changes with the system's font size settings. If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart. |
| font-style | string | normal | No | Font style of the modified text. For details, see font-style of the <text> component. |
| font-weight | number | string | normal | No | Font weight of the modified text. For details, see font-weight of the <text> component. |
| text-decoration | string | none | No | Text decoration of the modified text. For details, see text-decoration of the <text> component. |
| font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified custom font is used for the text. |
Events
Only the click event in Universal Events is supported.
Methods
Not supported
Example
<!-- xxx.hml -->
<div class="container">
<text class="title">
<span class="spanTxt">span</span>
</text>
</div>
/* xxx.css */
.container {
display: flex;
justify-content: center;
align-items: center;
}
.title {
font-size: 30px;
text-align: center;
width: 100%;
height: 100px;
}
.spanTxt{
color: chartreuse;
font-size: 100px;
}
