codecamp

鸿蒙OS 添加标题行和文本区域

实现标题和文本区域最常用的是基础组件 text。text 组件用于展示文本,可以设置不同的属性和样式,文本内容需要写在标签内容区,完整属性和样式信息请参考text。在页面中插入标题和文本区域的示例如下:

<!-- xxx.hml -->
<div class="container">
  <div class="left-container">
    <text class="title-text">{{headTitle}}</text>
    <text class="paragraph-text">{{paragraphFirst}}</text>
    <text class="paragraph-text">{{paragraphSecond}}</text>
  </div>
</div>

/* xxx.css */
.container {
  margin-top: 24px;
  background-color: #ffffff;
}
.left-container {
  flex-direction: column;
  margin-left: 48px;
  width: 460px;
}
.title-text {
  color: #1a1a1a;
  font-size: 36px;
  height: 90px;
  width: 400px;
}
.paragraph-text {
  color: #000000;
  margin-top: 12px;
  font-size: 20px;
  line-height: 30px;
}

// xxx.js
export default {
  data: {
    headTitle: 'Capture the Beauty in This Moment',
    paragraphFirst: 'Capture the beauty of light during the transition and fusion of ice and water. At the instant of movement and stillness, softness and rigidity, force and beauty, condensing moving moments.',
    paragraphSecond: 'Reflecting the purity of nature, the innovative design upgrades your visual entertainment and ergonomic comfort. Effortlessly capture what you see and let it speak for what you feel.',
  },
}
鸿蒙OS 绘制布局图
鸿蒙OS 添加图片区域
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

鸿蒙OS 开发

鸿蒙OS 术语

鸿蒙OS Java API参考

鸿蒙OS ohos.aafwk.ability

鸿蒙OS ohos.aafwk.abilityjet.activedata

鸿蒙OS ohos.aafwk.content

鸿蒙OS java.lang

鸿蒙OS java.Util

鸿蒙OS java.Util class

鸿蒙OS ohos.data.dataability

鸿蒙OS ohos.data.dataability class

鸿蒙OS ohos.agp.components

鸿蒙OS ohos.agp.components interface

鸿蒙OS ohos.agp.components class

鸿蒙OS ohos.global.configuration

鸿蒙OS java.io

鸿蒙OS ohos.data.resultset

鸿蒙OS ohos.data.resultset interface

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }