鸿蒙5.0开发进阶：JS组件-基础组件（label）

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线
  
• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南
  
• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）
  

---

label

   阐明
  从API version 4开始支持。后续版本如有新增内容，则接纳上角标单独标记该内容的起始版本。
  为input、button、textarea组件界说相应的标注，点击该标注时会触发绑定组件的点击结果。
权限列表

无
子组件

不支持。
属性

除支持通用属性外，还支持如部属性：
名称范例默认值必填描述targetstring-否目标组件的属性id值。 样式

除支持通用样式外，还支持如下样式：
名称范例默认值必填描述color<color>#e5000000否设置文本的颜色。font-size<length>30px否设置文本的尺寸。allow-scalebooleantrue否 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
如果必要支持动态收效，请参看config描述文件中config-changes标签。
letter-spacing<length>0px否设置文本的字符间距。font-stylestringnormal否 设置文本的字体样式，可选值为：
- normal：标准的字体样式；
- italic：斜体的字体样式。
font-weightnumber | stringnormal否 设置文本的字体粗细，number范例取值[100, 900]，默以为400，取值越大，字体越粗。
number取值必须为100的整数倍。
string范例取值支持如下四个值：lighter、normal、bold、bolder。
text-decorationstringnone否 设置文本的文本修饰，可选值为：
- underline：笔墨下划线修饰；
- line-through：穿过文本的修饰线n
- none：标准文本。
text-alignstring start
否 设置文本的文本对齐方式，可选值为：
- left：文本左对齐；
- center：文本居中对齐；
- right：文本右对齐；
- start：根据笔墨书写相同的方向对齐；
- end：根据笔墨书写相反的方向对齐。
如文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐结果可能会不明显。
line-height<length>0px否设置文本的文本行高，设置为0px时，不限定文本行高，自适应字体大小。text-overflowstringclip否 在设置了最大行数的情况下收效，可选值为：
- clip：将文本根据父容器大小进行裁剪体现；
- ellipsis：根据父容器大小体现，体现不下的文本用省略号取代。需配合max-lines使用。
font-familystringsans-serif否设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自界说字体指定的字体，会被选中作为文本的字体。max-linesnumber-否设置文本的最大行数。min-font-size<length>-否文本最小字号，必要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不收效。max-font-size<length>-否文本最大字号，必要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不收效。font-size-step<length>1px否文本动态调整字号时的步长，必要设置最小，最大字号样式收效。prefer-font-sizes<array>-否 预设的字号聚集，在动态尺寸调整时，优先使用预设字号聚会合的字号匹配设置的最大行数，如果预设字号聚集未设置，则使用最大最小和步长调整字号。针对仍然无法满意最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不收效。
如：prefer-font-sizes: 12px,14px,16px
  变乱

不支持。
方法

不支持。
示例

1. <!--xxx.hml -->
2. <div class="container">
3.   <div class="row">
4.     <label class="label" target="textId">input</label>
5.     <input class="input" id="textId" type="text"></input>
6.   </div>
7.   <div class="row">
8.     <label class="label" target="radioId">radio</label>
9.     <input class="input" id="radioId" type="radio" name="group" value="group"></input>
10.   </div>
11.   <div class="row">
12.     <label class="label" target="checkboxId">checkbox</label>
13.     <input class="input" id="checkboxId" type="checkbox"></input>
14.   </div>
15. </div>

复制代码

1. /*xxx.css */
2. .container {
3.   flex-direction: column;
4.   margin-left: 20px;
5. }
6. .row {
7.   flex-direction: row;
8. }
9. .label {
10.   width: 200px;
11.   margin-top: 50px;
12. }
13. .input {
14.   margin-left: 100px;
15.   margin-top: 50px;
16. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。