1 Star 1 Fork 5.3K

Dragon / docs

forked from OpenHarmony / docs 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
adding-title-and-paragraph-text.md 1.39 KB
一键复制 编辑 原始数据 按行查看 历史
mamingshuai 提交于 2021-06-02 01:00 . update OpenHarmony 2.0 Canary

Adding Title and Paragraph Text

The <text> component is most commonly used to display text in title and paragraph areas. You can set attributes and styles for a <text> component and add the text to be displayed between the <text> and </text> tags. The following is an example of adding title and paragraph text on a page:

<!-- xxx.hml -->
<div class="container">
  <text class="title-text">{{headTitle}}</text>
  <text class="paragraph-text">{{paragraphFirst}}</text>
  <text class="paragraph-text">{{paragraphSecond}}</text>
</div>
/* xxx.css */
.container {
  flex-direction: column;
  margin-top: 20px;
  margin-left: 30px;
}
.title-text {
  color: #1a1a1a;
  font-size: 50px;
  margin-top: 40px;
  margin-bottom: 20px;
}
.paragraph-text {
  color: #000000;
  font-size: 35px;
  line-height: 60px;
}
// 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.',
  },
}
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/hbu-dragon/docs.git
git@gitee.com:hbu-dragon/docs.git
hbu-dragon
docs
docs
master

搜索帮助

344bd9b3 5694891 D2dac590 5694891