【HarmonyOS】低代码平台组件拖拽使用技巧之页签容器

news2024/11/20 10:29:37

【关键字】

HarmonyOS、低代码平台、Tabs、TabContent、页签导航

1、写在前面

前面几篇分别介绍了低代码平台中的堆叠容器、滚动容器、网格布局等三种容器的使用,实际开发中我们经常会有这样的需求,页面底部是三个Tab按钮点击时会分别切换不同的视图内容,本篇我们就来介绍低代码平台为我们提供的一种可以快速实现页面试图切换的容器——页签容器,需要注意的是,页签组件是需要配合页签内容来使用的,话不多说,开整。

2、开发实战

老规矩,操作部分的内容我会尽量用动态图来完整体现整个过程。

首先我们进入到低代码平台的页面编辑区,从左侧组件树中拖拽一个页签容器到画布中,修改宽高的属性,然后依次拖入3个页签内容组件到页签容器中,按顺序鼠标绿色指针靠最右侧边界处时松开鼠标,在右侧属性面板中“页签位置”的属性设置上选择“结束”选项,将页签置于页面底部,如下图所示:

1.gif

然后我们依次选中每一个页签内容,在右侧属性面板中的上方部位有“图片内容”和“文字内容”这两项设置,我们分别为每个页签内容的tabs设置不同的图片和文字,如下图所示:

2.gif

最后我们选中首页的页签内容组件,在它的内部拖入一个文本组件,修改宽高和文本显示位置,填入“首页内容”的文本,如下图所示:

3.gif

最后以同样的方式为剩余的两个页签内容设置对应文本,用来在页面切换时区分不同的页面,方便我们更清晰的查看页面切换时的效果,实际开发中肯定是需要根据设计需求来拖入不同的组件实现需求了。

最后来看一下我们实现的效果吧:

4f.gif

OK,通过以上步骤,我们就可以很快的实现页面切换的效果了,今天的内容就这么多,下期再会!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1232922.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【点云上采样】基于移动最小二乘(MLS)的上采样

文章目录 声明简介代码参考 声明 示例结果比较奇怪,可能是参数没调好,如有问题,望指正! 简介 基于MLS(Moving Least Squares)的上采样是一种常用的点云处理方法,用于增加稀疏点云数据的密度和…

「Qt Widget中文示例指南」如何创建一个计算器?(一)

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写,所有平台无差别运行,更提供了几乎所有开发过程中需要用到的工具。如今,Qt已被运用于超过70个行业、数千家企业,支持数百万设备及应用。 本文将展示如何使用…

Django 入门学习总结8-管理页面的生成

修改polls/admin.py文件为: from django.contrib import admin from .models import Choice, Question class ChoiceInline(admin.StackedInline): model Choice extra 3 class QuestionAdmin(admin.ModelAdmin): fieldsets [ (None, {&q…

如何理解String是不可变的

✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉 🍎个人主页:Leo的博客 💞当前专栏:每天一个知识点 ✨特色专栏&#xff1a…

天猫超市电商营销系统:无代码开发实现API连接集成

无代码开发实现天猫超市与电商系统的高效连接 天猫超市,作为天猫推出的网络零售超市,为广大网购消费者提供了一站式的购物服务。而通过无代码开发的方式,天猫超市能够实现与各种电商系统的连接和集成,这种方式无需进行繁琐的API开…

最前端|低代码平台轻松设计可视化图表【内含网站资源】

在前端设计中,我们经常需要使用可视化图表来呈现数据和信息。然而,每次都要自己从头开始设计图表未免太过繁琐。为了解决这个问题,我们调研了low code平台上的可视化图表功能。 本篇文章为大家带来以下问题的解答: (1&…

Spark---介绍及安装

一、Spark介绍 1、什么是Spark Apache Spark 是专为大规模数据处理而设计的快速通用的计算引擎。Spark是UC Berkeley AMP lab (加州大学伯克利分校的AMP实验室)所开源的类Hadoop MapReduce的通用并行计算框架,Spark拥有Hadoop MapReduce所具有的优点;但…

python数据结构与算法-07_哈希表

哈希表 不知道你有没有好奇过为什么 Python 里的 dict 和 set 查找速度这么快呢,用了什么黑魔法吗? 经常听别人说哈希表(也叫做散列表),究竟什么是哈希表呢?这一章我们来介绍哈希表,后续章节我们会看到 Python 中的字…

申请注册苹果iOS企业级开发者证书需要公司拥有什么规模条件

在全球范围内,iOS应用市场的规模和影响力不断增长,企业级应用在其中扮演着重要角色。为了在苹果设备上开发和发布内部应用,企业需要获取苹果的iOS企业级开发者证书。文章旨在探讨企业在申请此证书时需要满足的条件、注册流程,以及…

QT 搭建opencv 环境

1. 准备工具CMake 一、CMake介绍 CMake是一个被广泛使用的、开源免费并且完全跨平台的构建工具,可以用简单的语句来描述所有平台的安装(编译过程)。它能够输出各种各样的makefile或者project文件,能测试编译器所支持的C特性,类似UNIX下的aut…

代码随想录 11.20 || 单调栈 LeetCode 503.下一个更大元素Ⅱ、42.接雨水

503.下一个更大元素Ⅱ 本题与 496.下一个更大元素Ⅰ 如出一辙,求在给定一维数组中,每个元素右起第一个更大元素。不同之点在于,本题要求将一维数组视为首尾相连的,最后一个元素的下一个元素是第一个元素。问题的重点在于 如何使用…

正版软件|PhotoPad 照片/图像编辑工具

编辑照片/图像从未如此简单! 关于PhotoPad PhotoPad是本世纪最稳定、最易用且功能最全面的照片编辑器之一。 轻松编辑数码照片和其他图片。支持所有流行的图像格式快速裁剪、旋转、调整大小和翻转照片。 PhotoPad旨在快速打开和编辑照片,轻松无忧&…

Echarts设置环形图中心文字

方式一:title 通过在最外层设置title 配置项 title 同时也是环形图标题的配置项,只是通过left和top强制让其移动到环形图中间位置;提前设置好环形图 title: {// 图形标题(如果想要换行则使用ES6 模板字符串)// 例如: 示例// 这…

ros2工作空间

我们先不管ros2工作空间是什么样子的,如果是我自己来搞一个工作空间,我一定是这样安排 一个文件夹用来放自己存放的文件,。。。。。。。。。。对应src文件夹 一个文件夹用来放编译后的文件,。。。。。。。。。。。对应intall文件…

U4_1:图论之DFS/BFS/TS/Scc

文章目录 一、图的基本概念二、广度优先搜索(BFS)记录伪代码时间复杂度流程应用 三、深度优先搜索(DFS)记录伪代码时间复杂度流程时间戳结构BFS和DFS比较 四、拓扑排序一些概念有向图作用拓扑排序 分析伪代码时间复杂度彩蛋 五、强…

OpenAI一朝领导者山姆·奥尔特曼被解除职务,领导能力不再被认可?

原创 | 文 BFT机器人 在11月17日,OpenAI Inc.宣布CEO山姆奥尔特曼 (Sam Altman) 离职。掌舵人发生重大转变,董事会却在这个时候将公司首席技术官 Mira Murati推举为临时首席执行官,这一操作顿时引起了热议。 这突如其来的变化标志着OpenAI的…

C++实战学习笔记

文章目录 erase()uniquevector的insert()std::string::npos erase() (1)erase(pos,n); 删除从pos开始的n个字符,比如erase(0,1)就是删除第一个字符 (2)erase(position);删除position处的一个字符(position是个string类…

element表格分页+数据过滤筛选

目录 前言效果展示分页效果展示搜索效果展示 代码分析分页功能过滤数据功能 全部代码 前言 在el-element的标签里的tableData数据过多时,会导致表格页面操作卡顿。为解决这一问题,有以下解决方法: 分页加载: 将大量数据进行分页&…

Android File Transfer(安卓文件传输工具)

Android File Transfer 是一款安卓文件传输工,它允许在Mac操作系统和Android设备之间进行文件传输。 该软件通过USB连接将文件从Mac电脑传输到连接的Android设备,或者反过来从Android设备传输文件到Mac电脑。这包括照片、视频、音乐、文档和其他文件类型…

最新企业服务总线ESB的国内主要厂商和开源厂商排名,方案书价格多少

企业服务总线ESB是什么? ESB平台(企业服务总线,Enterprise Service Bus)是一种企业级集成平台,它提供了一种开放的、基于标准的消息机制,通过简单的标准适配器和接口,来完成粗粒度应用&#xff…