HarmonyOS Next开发学习手册——容器组件(stepper开发）

最新推荐文章于 2025-02-24 17:00:00 发布

OpenHarmony_小贾

最新推荐文章于 2025-02-24 17:00:00 发布

阅读量813

点赞数 30

分类专栏：移动开发鸿蒙开发 HarmonyOS 文章标签： harmonyos 学习 OpenHarmony ui 深度学习

本文链接：https://blog.youkuaiyun.com/maniuT/article/details/140473063

版权

当一个任务需要多个步骤时，可以使用stepper组件展示当前进展。

创建stepper组件

在pages/index目录下的hml文件中创建一个stepper组件。

<!-- xxx.hml -->
<div class="container"> 
 <stepper>    
   <stepper-item>     
     <text>Step 1</text>
   </stepper-item> 
   <stepper-item>     
     <text>Step 2</text>
   </stepper-item> 
 </stepper> 
</div>

/* xxx.css */
.container {
  width:100%;
  height:100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #F1F3F5;
}
text{
  width: 100%;
  height: 100%;
  text-align: center;
}

设置index属性

页面默认显示索引值为index的步骤。

<!-- xxx.hml -->
<div class="container"> 
 <stepper index="2">    
   <stepper-item>     
     <text>stepper-item1</text>
   </stepper-item> 
   <stepper-item>     
     <text>stepper-item2</text>
   </stepper-item> 
   <stepper-item>     
     <text>stepper-item3</text>
   </stepper-item> 
  </stepper> 
</div>

/* xxx.css */
.container {
  width:100%;
  height:100%;
  flex-direction: column;
  background-color: #F1F3F5;
}
text{
  width: 100%;
  height: 100%;
  text-align: center;
}

通过设置label属性，自定义stepper-item的提示按钮。

<!-- xxx.hml -->
<div class="container"> 
 <stepper index="1">    
   <stepper-item label="{
  {label_1}}">     
     <text>stepper-item1</text>
   </stepper-item> 
   <stepper-item label="{
  {label_2}}">     
     <text>stepper-item2</text>
   </stepper-item> 
   <stepper-item label="{
  {label_3}}">     
     <text>stepper-item3</text>
   </stepper-item>
   <stepper-item>     
     <text>stepper-item4</text>
   </stepper-item> 
 </stepper> 
</div>

/* xxx.css */
.container {  
  width:100%;
  height:100%;
  flex-direction: column;
  background-color: #F1F3F5;
}
text{
  width: 100%;
  height: 100%;
  text-align: center;
}

// xxx.js
export default { 
  data: {
    label_1:{
      nextLabel: 'NEXT',      
      status: 'normal'    
    },
    label_2:{
      prevLabel: 'BACK',
      nextLabel: 'NEXT',
      status: 'normal'
    },
    label_3:{
      prevLabel: 'BACK',
      nextLabel: 'END',
      status: 'disabled'
    },
  },
}