输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

快应用

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
指南
指南快应用专题框架自定义组件章节标题组件

章节标题组件

更新时间: 2024-03-07 06:50
本文导读
展开章节

简介

章节标题（title）组件通常用于记录页面标题，例如商品标题、新闻标题等。章节标题一般具有如下特点：

  • 可设置章节标题的标题类型
  • 可设置章节标题的对齐方式
  • 可设置章节标题的内容及字体颜色

效果图如下：

基本布局代码如下：

收起
自动换行
深色代码主题
复制
  1. <import name="title" src="./Title/title1.ux"></import>
  2. <template>
  3.   <!-- Only one root node is allowed in template. -->
  4.   <div class="container">  
  5.     <text>章节标题通常用于记录页面标题，例如商品标题、新闻标题等</text>
  6.     <div class="item-content"> 
  7.       <text class="section">基本用法</text>
  8.       <div class="example-body">
  9.         <title  type="h1" title="h1 一级标题 设置左对齐" color="black" align="left"> </title>
  10.         <title  type="h2" title="h2 二级标题 设置标题类型" color="black" align="left"> </title>
  11.         <title  type="h3" title="h3 三级标题 设置居中" color="black" align="center"> </title>
  12.         <title  type="h4" title="h4 四级标题 设置右对齐" color="black" align="right"> </title>
  13.         <title  type="h5" title="h5 五级标题 改变颜色" color="#7db9f7" align="left"> </title>
  14.       </div>
  15.     </div>
  16.   </div>
  17. </template>

开发指引

自定义子组件

  1. 定义布局样式。

    章节标题组件由div和text组件构成。

    收起
    自动换行
    深色代码主题
    复制
    1. <template>
    2.  <div class="box" style="align-items:{{textAlign}}">
    3.   <text class="{{type}}"  style="color: {{color}}">{{title}}</text> 
    4.  </div>
    5. </template>
  2. 规划属性。

    支持的属性：

    展开

    属性

    类型

    默认值

    描述

    type

    String

    -

    标题类型，可选值：h1、h2、h3、h4、h5，章节标题字体会比正常字长字体粗。

    title

    String

    -

    章节标题内容。

    align

    String

    left

    对齐方式，可选值：

    • left:左对齐
    • center:居中
    • right:右对齐

    color

    String

    #333333

    字体颜色。

父子组件通信

子组件的props中定义相关属性值，父组件引用时传入属性值，子组件通过 this.xxx 获取值并进行处理。

收起
自动换行
深色代码主题
复制
  1. props: {
  2.   type: {
  3.     type: String,
  4.     default: ''
  5.   },
  6.   title: {
  7.     type: String,
  8.     default: ''
  9.   },
  10.   align: {
  11.     type: String,
  12.     default: 'left'
  13.   },
  14.   color: {
  15.     type: String,
  16.     default: '#333333'
  17.   },
  18. },

计算style样式

使用计算属性computed方法，通过props属性动态计算样式，返回给组件使用。

收起
自动换行
深色代码主题
复制
  1. computed: {
  2.   textAlign() {
  3.     let align = 'center';
  4.     switch (this.align) {
  5.       case 'left':
  6.         align = 'flex-start'
  7.         break;
  8.       case 'center':
  9.         align = 'center'
  10.         break;
  11.       case 'right':
  12.         align = 'flex-end'
  13.         break;
  14.     }
  15.     return align
  16.   }
  17. },

示例代码

章节标题title.ux代码：

收起
自动换行
深色代码主题
复制
  1. <template>
  2.   <div class="box" style="align-items:{{textAlign}}">
  3.     <text class="{{type}}"  style="color: {{color}}">{{title}}</text>
  4.   </div>        
  5. </template> 
  7. <style lang="less" >
  8.     .box {  
  9.     flex-direction: column;
  10.     justify-content: center;
  11.     }
  12.     .h1 {
  13.       font-size: 30px;
  14.       color: #333;
  15.       font-weight: bold;
  16.     }
  17.     .h2 {
  18.       font-size: 28px;
  19.       color: #333;
  20.       font-weight: bold;
  22.     }
  23.     .h3 {
  24.       font-size: 26px;
  25.       color: #333;
  26.       font-weight: bold;
  27.       /* font-weight: 400; */
  28.     }
  29.     .h4 {
  30.       font-size: 24px;
  31.       color: #333;
  32.       font-weight: bold;
  33.       /* font-weight: 300; */
  34.     }
  35.     .h5 {
  36.       font-size: 22px;
  37.       color: #333;
  38.       font-weight: bold;
  39.       /* font-weight: 200; */
  40.     }
  41. </style>
  43. <script>
  44.   export default {
  45.     props: {
  46.       type: {
  47.         type: String,
  48.         default: ''
  49.       },
  50.       title: {
  51.         type: String,
  52.         default: ''
  53.       },
  54.       align: {
  55.         type: String,
  56.         default: 'left'
  57.       },
  58.       color: {
  59.         type: String,
  60.         default: '#333333'
  61.       },
  62.     },
  63.     computed: {
  64.       textAlign() {
  65.         let align = 'center';
  66.         switch (this.align) {
  67.           case 'left':
  68.             align = 'flex-start'
  69.             break;
  70.           case 'center':
  71.             align = 'center'
  72.             break;
  73.           case 'right':
  74.             align = 'flex-end'
  75.             break;
  76.         }
  77.         return align
  78.       }
  79.     },
  80.   }
  81. </script>

页面hello.ux代码：

收起
自动换行
深色代码主题
复制
  1. <import name="title" src="./Title/title1.ux"></import>
  2. <template>
  3.   <!-- Only one root node is allowed in template. -->
  4.   <div class="container">  
  5.     <text>章节标题通常用于记录页面标题，例如商品标题、新闻标题等</text>
  6.     <div class="item-content"> 
  7.       <text class="section">不同类型:</text>
  8.       <div class="example-body">
  9.         <title  type="h1" title="h1 一级标题" color="black" align="left"> </title>
  10.         <title  type="h2" title="h2 二级标题" color="black" align="left"> </title>
  11.         <title  type="h3" title="h3 三级标题" color="black" align="left"> </title>
  12.         <title  type="h4" title="h4 四级标题" color="black" align="left"> </title>
  13.         <title  type="h5" title="h5 五级标题" color="black" align="left"> </title>
  14.       </div>
  15.       </div>
  16.      <div class="item-content">
  17.       <text class="section">对齐方式:</text>
  18.       <div class="example-body">
  19.         <title  type="h1" title="h1 左对齐" color="#027fff" align="left"> </title>
  20.         <title  type="h2" title="h2 居中" color="#027fff" align="center"> </title>
  21.         <title  type="h3" title="h3 右对齐" color="#027fff" align="right"> </title>
  22.         <title  type="h4" title="h4 居中" color="#027fff" align="center"> </title>
  23.         <title  type="h5" title="h5 左对齐" color="#027fff" align="left"> </title>
  24.       </div>
  25.     </div>
  27.     <div class="item-content">
  28.        <text class="section">改变颜色:</text>
  29.       <div class="example-body">
  30.         <title  type="h1" title="h1 一级标题" color="#027fff" align="left"> </title>
  31.         <title  type="h2" title="h2 二级标题" color="#2490ff" align="left"> </title>
  32.         <title  type="h3" title="h3 三级标题" color="#439ffc" align="left"> </title>
  33.         <title  type="h4" title="h4 四级标题" color="#60adfb" align="left"> </title>
  34.         <title  type="h5" title="h5 五级标题" color="#7db9f7" align="left"> </title>
  35.       </div>
  36.     </div>
  38.     <div class="item-content">
  39.        <text class="section">组合示例:</text>
  40.       <div class="example-body">
  41.           <title  class="box-head" type="h1" title="章节标题" color="#027fff" align="center"> </title>
  42.           <title  class="box" type="h3" title="1 简介" color="#2490ff" align="left"> </title>
  43.         <div>
  44.           <text class="text">章节标题通常用于记录页面标题，例如商品标题、新闻标题等。章节标题一般具有如下特点：</text>
  45.         </div>
  46.         <title type="h5" color="#666" title="- 可设置章节标题的标题类型,章节标题字体会比正常字长字体粗"></title>
  47.         <title type="h5" color="#666" title="- 可设置章节标题的对齐方式"></title>
  48.         <title type="h5" color="#666" title="- 可设置章节标题的内容及字体颜色"></title>
  50.         </div>
  51.         <div class="example-body">
  52.           <title class="box" type="h3" title="2 开发指引" color="#2490ff" align="left"> </title>
  53.           <title class="box" type="h4" title="2.1 自定义子组件" align="left"></title>
  54.           <div>
  55.              <text class="text">1.定义布局样式。 </text>
  56.           </div>
  57.            <div>
  58.              <text class="text">2.规划属性和支持的事件。</text>
  59.           </div>
  61.           <title class="box" type="h4" title="2.2 父子组件通信" align="left"></title>
  62.           <div>
  63.             <text class="text">子组件的props中定义参数。</text>
  64.           </div>
  65.           <title class="box" type="h4" title="2.3 计算style样式" align="left"></title>
  66.           <div>
  67.             <text class="text">使用计算属性computed方法，通过props属性动态计算数据和样式，返回给组件使用。</text>
  68.           </div>
  69.         </div>
  71.         <div class="example-body">
  72.            <title type="h2" title="示例代码" align="left"></title>
  73.         </div>   
  75.     </div>
  77.   </div>
  78. </template>
  79. <style>
  80.   .container {
  81.     flex-direction: column;    
  82.   }
  83.   .section {
  84.    font-size: 35px;
  85.    padding: 10px;
  86.    background-color: rgb(235, 233, 233);   
  87.   }
  88.   .item-content {
  89.     width: 100%;
  90.     flex-direction: column;
  91.     align-content: center;  
  92.   }
  93.   .example-body {
  94.     padding: 10px;
  95.     flex-direction: column;
  96.   }
  97.   .text {
  98.     font-size: 25px;
  99.     line-height: 22px;
  100.     color: #333;
  101.     line-height: 45px 
  102.   }
  103.   .box-head {
  104.     height: 100px;
  105.   }
  106.   .box {
  107.     height: 60px;
  108.   }  
  109. </style>
  110. 

  111. <script>
  112.   module.exports = {
  113.     data() { 
  114.     },
  115.     onInit() {
  116.       this.$page.setTitleBar({text: '章节标题'})
  117.     },
  118.   }
  119. </script>
导航栏组件
角标组件
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 指南 中进行搜索
请输入您想要搜索的关键词