实现标题和文本区域最常用的是基础组件 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.',
},
}
备案信息: 粤ICP备15087711号-2
Copyright © 2008-2024 啊嘎哇在线工具箱 All Rights.
本站所有资料来源于网络,版权归原作者所有,仅作学习交流使用,如不慎侵犯了您的权利,请联系我们。