harmony 鸿蒙text

  • 2023-06-24
  • 浏览 (670)

text

The <text> component is used to display a piece of textual information.

NOTE

This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.

Child Components

Not supported

Attributes

Name Type Default Value Mandatory Description
id string - No Unique ID of the component.
style string - No Style declaration of the component.
class string - No Style class of the component, which is used to refer to a style table.
ref string - No Reference information of child elements, which is registered with the parent component on $refs.

Events

Name Parameter Description
click - Triggered when the component is clicked.
longpress - Triggered when the component is long pressed.
swipe5+ SwipeEvent Triggered when a user quickly swipes on the component.

Styles

Name Type Default Value Mandatory Description
color &lt;color&gt; #ffffff No Font color.
font-size &lt;length&gt; 30px No Font size.
letter-spacing &lt;length&gt; 2px No Character spacing (px).
text-align string left No Text alignment mode. Available values are as follows:
- left: The text is left-aligned.
- center: The text is center-aligned.
- right: The text is right-aligned.
text-overflow string clip No Available values are as follows:
- clip: The text is clipped and displayed based on the size of the parent container.
- ellipsis: The text is displayed based on the size of the parent container. The text that cannot be displayed is replaced with ellipsis.
font-family string SourceHanSansSC-Regular No Font. Only the SourceHanSansSC-Regular font is supported.
width &lt;length&gt; |&lt;percentage&gt;5+ 0px No Component width.
Unit: pixel
If this attribute is not set, the default value 0 is used.
height &lt;length&gt; |&lt;percentage&gt;5+ 0px No Component height.
Unit: pixel
If this attribute is not set, the default value 0 is used.
padding &lt;length&gt; 0 No Shorthand attribute to set the padding for all sides.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.
- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.
- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).
padding-[left|top|right|bottom] &lt;length&gt; 0 No Left, top, right, and bottom padding.
margin &lt;length&gt; |&lt;percentage&gt;5+ 0 No Shorthand attribute to set the margin for all sides. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.
- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).
margin-[left|top|right|bottom] &lt;length&gt; |&lt;percentage&gt;5+ 0 No Left, top, right, and bottom margins.
border-width &lt;length&gt; 0 No Shorthand attribute to set the margin for all sides.
border-color &lt;color&gt; black No Shorthand attribute to set the color for all borders.
border-radius &lt;length&gt; - No Radius of round-corner borders.
background-color &lt;color&gt; - No Background color.
opacity5+ number 1 No Opacity of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.
display string flex No How and whether to display the box containing an element. Available values are as follows:
- flex: flexible layout
- none: not rendered
[left|top] &lt;length&gt; |&lt;percentage&gt;6+ - No Edge of the element.
- left: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.
- top: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
line-height10+ number 0px No Text line height.
Unit: pixel
If this attribute is not set, the text line height is adaptive.

Example

<!-- xxx.hml -->
<div class="container">
    <text class="title">
        Hello {{ title }}
    </text>
</div>

/* xxx.css */
.container {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.title {
    width: 100px;
    font-size: 30px;
    text-align: center;
    color: red;
}

// xxx.js
export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = "World";
    }
}

text

你可能感兴趣的鸿蒙文章

harmony 鸿蒙JavaScript-compatible Web-like Development Paradigm (ArkUI.Lite)

harmony 鸿蒙Universal Attributes

harmony 鸿蒙Universal Events

harmony 鸿蒙Universal Styles

harmony 鸿蒙chart

harmony 鸿蒙image-animator

harmony 鸿蒙image

harmony 鸿蒙input

harmony 鸿蒙marquee

harmony 鸿蒙picker-view

0  赞
  • 所属分类： 后端技术
  • 本文标签：
  • 版权声明： 原创文章如转载，请注明本文链接: https://www.seaxiang.com/blog/92f9b7a0e0ae4ed3b111b159e2050d8f
热门推荐
标签云
Linux Java Spring Spring Boot docker 大数据 前端 生活 maven golang 软件 spring cloud fintech mac vscode 其他 区块链 以太坊 V神 开发者 技术 股票 git greenplum 分布式事务 chrome mysql flink kafka 设计模式 原理 鸿蒙 seo
最新文章
本文目录