当前位置: 首页 > news >正文

[UI5 常用控件] 03.Icon, Avatar,Image

文章目录

  • 前言
  • 1. Icon
  • 2. Avatar
    • 2.1 displayShape
    • 2.2 initials
    • 2.3 backgroundColor
    • 2.4 Size
    • 2.5 fallbackIcon
    • 2.6 badgeIcon
    • 2.7 badgeValueState
    • 2.8 active
  • 3. Image


前言

本章节记录常用控件Title,Link,Label。
其路径分别是:

  • sap.m.Icon
  • sap.m.Avatar
  • sap.m.Image

1. Icon

  • 常用属性有src, class, color, press等
    在这里插入图片描述
  • View
<PanelheaderText="Icon"class="sapUiLargeMargin"
><HBox width="50%"><core:Iconsrc="sap-icon://syringe"class="size1"color="#031E48"><core:layoutData><FlexItemData growFactor="1" /></core:layoutData></core:Icon><core:Iconsrc="sap-icon://pharmacy"class="size2"color="#64E4CE"><core:layoutData><FlexItemData growFactor="2" /></core:layoutData></core:Icon><core:Iconsrc="sap-icon://electrocardiogram"class="size3"color="#E69A17"><core:layoutData><FlexItemData growFactor="3" /></core:layoutData></core:Icon><core:Iconsrc="sap-icon://doctor"class="size4"color="#1C4C98"><core:layoutData><FlexItemData growFactor="4" /></core:layoutData></core:Icon><core:Iconsrc="sap-icon://stethoscope"class="size5"color="#8875E7"press="handleStethoscopePress"><core:layoutData><FlexItemData growFactor="5" /></core:layoutData></core:Icon></HBox>
</Panel>

2. Avatar

2.1 displayShape

  • 显示形状(方形,圆形)
    在这里插入图片描述
  • View
<PanelheaderText="displayShape"class="sapUiLargeMarginBottom"
><HBox><VBox alignItems="Center"><Avatarsrc="img/1.webp"displaySize="XL"displayShape="Square"showBorder="true"press="onPress"/><Text text="Square" /></VBox><VBoxalignItems="Center"class="sapUiLargeMarginBegin"><Avatarsrc="img/1.webp"displaySize="XL"showBorder="true"press="onPress"/><Text text="默认或者Circle" /></VBox></HBox>
</Panel>

2.2 initials

  • 显示initials文字
    在这里插入图片描述
  • View
<PanelheaderText="显示initials: IS"class="sapUiLargeMarginBottom"
><HBox><VBox alignItems="Center"><Avatarinitials="IS"displaySize="XL"displayShape="Square"press="onPress"/><Text text="两个字母" /></VBox><VBoxalignItems="Center"class="sapUiLargeMarginBegin"><Avatarenabled="false"initials="PI"displaySize="XL"press="onPress"/><Text text="虚化:enabled=false" /></VBox><VBoxalignItems="Center"class="sapUiLargeMarginBegin"><AvatardisplaySize="XL"press="onPress"initials="ABC"/><Text text="三个字母" /></VBox></HBox>
</Panel>

2.3 backgroundColor

  • 背景色(Transparent,TileIcon, Placeholder, Random)
  • Random会在每次渲染时随机分配颜色
    在这里插入图片描述
  • View
<PanelheaderText="背景色: backgroundColor"class="sapUiLargeMarginBottom"
><HBox><VBoxalignItems="Center"class="sapUiLargeMarginBegin"><AvatardisplaySize="XL"backgroundColor="Transparent"press="onPress"/><Text text="Transparent" /></VBox><VBoxalignItems="Center"class="sapUiLargeMarginBegin"><Avatarinitials="IS"displaySize="XL"backgroundColor="TileIcon"press="onPress"/><Text text="TileIcon" /></VBox><VBoxalignItems="Center"class="sapUiLargeMarginBegin"><AvatardisplaySize="XL"backgroundColor="Placeholder"displayShape="Square"press="onPress"/><Text text="Placeholder" /></VBox></HBox>
</Panel>

2.4 Size

  • 指定大小(XL,L,M,S,XS,Custom)
    在这里插入图片描述
  • View
<PanelheaderText="Size"class="sapUiLargeMarginBottom"
><HBox><VBoxalignItems="Center"class="sapUiSmallMarginEnd"><Avatarsrc="sap-icon://lab"displaySize="XL"backgroundColor="Accent6"/><Texttext="XL"class="sapUiSmallMarginTop"/></VBox><VBoxalignItems="Center"class="sapUiSmallMarginEnd"><Avatarsrc="sap-icon://lab"displaySize="L"backgroundColor="Accent7"/><Texttext="L"class="sapUiSmallMarginTop"/></VBox><VBoxalignItems="Center"class="sapUiSmallMarginEnd"><Avatarsrc="sap-icon://lab"displaySize="M"backgroundColor="Accent8"/><Texttext="M"class="sapUiSmallMarginTop"/></VBox><VBoxalignItems="Center"class="sapUiSmallMarginEnd"><Avatarsrc="sap-icon://lab"displaySize="S"backgroundColor="Accent9"/><Texttext="S"class="sapUiSmallMarginTop"/></VBox><VBoxalignItems="Center"class="sapUiSmallMarginEnd"><Avatarsrc="sap-icon://lab"displaySize="XS"backgroundColor="Accent10"/><Texttext="XS"class="sapUiSmallMarginTop"/></VBox><VBox alignItems="Center"><Avatarsrc="img/lamp.png"displaySize="Custom"customDisplaySize="200px"displayShape="Circle"/><Texttext="displaySize=Custom, customDisplaySize=200px"class="sapUiSmallMarginTop"/></VBox></HBox>
</Panel>

2.5 fallbackIcon

  • Avatar会根据displayShape属性有默认图标,也可以指定图标。 如果指定路径有问题将会显示initials
    在这里插入图片描述
  • View
<PanelheaderText="图标"class="sapUiLargeMarginBottom"
><HBox><VBoxalignItems="Center"class="sapUiLargeMarginEnd"><AvatardisplaySize="L"displayShape="Square"backgroundColor="Random"/><Texttext="Square默认图标"class="sapUiSmallMarginTop"/></VBox><VBoxalignItems="Center"class="sapUiLargeMarginEnd"><AvatardisplaySize="L"displayShape="Circle"backgroundColor="Random"/><Texttext="Circle默认图标"class="sapUiSmallMarginTop"/></VBox><VBoxalignItems="Center"class="sapUiLargeMarginEnd"><AvatardisplaySize="L"displayShape="Square"fallbackIcon="sap-icon://accelerated"backgroundColor="Random"/><Texttext="指定图标fallbackIcon"class="sapUiSmallMarginTop"/></VBox><VBoxalignItems="Center"class="sapUiLargeMarginEnd"><AvatardisplaySize="L"initials="PB"src="{/test}"backgroundColor="Random"/><Texttext="错误的图片路径将显示initials"class="sapUiSmallMarginTop"textAlign="Center"/></VBox></HBox>
</Panel>

2.6 badgeIcon

  • badgeIcon只能在激活press属性并且在控制器里有对应function时激活
    在这里插入图片描述

  • View

<PanelheaderText="badgeIcon"class="sapUiLargeMarginBottom"
><HBox><VBox alignItems="Center"><AvatardisplaySize="M"backgroundColor="Accent3"press="onPress"badgeIcon="sap-icon://edit"/><TexttextAlign="Center"text="edit"class="sapUiSmallMarginTop"/></VBox><VBoxalignItems="Center"class="sapUiLargeMarginBegin"><AvatardisplaySize="XL"press="onPress"badgeIcon="sap-icon://camera"badgeTooltip="Sabine Mayer"/><TexttextAlign="Center"text="camera"class="sapUiSmallMarginTop"/></VBox><VBoxalignItems="Center"class="sapUiLargeMarginBegin"><AvatardisplaySize="XL"backgroundColor="Accent5"src="sap-icon://soccer"displayShape="Square"press="onPress"badgeIcon="sap-icon://edit"/><TexttextAlign="Center"text="add"class="sapUiSmallMarginTop"/></VBox><VBoxalignItems="Center"class="sapUiLargeMarginBegin"><Avatarsrc="img/lamp.png"displaySize="L"displayShape="Circle"><detailBox><LightBox><LightBoxItemimageSrc="img/lamp.png"alt="灯泡"title="这是灯泡"subtitle="闪闪发光"/></LightBox></detailBox></Avatar><TexttextAlign="Center"text="LightBox事件"class="sapUiSmallMarginTop"/></VBox></HBox>
</Panel>

2.7 badgeValueState

  • 会给badgeIcon上颜色
    在这里插入图片描述
  • View
<PanelheaderText="badgeValueState"class="sapUiLargeMarginBottom"
><HBox><VBoxalignItems="Center"class=""><AvatardisplaySize="M"imageFitType="Cover"badgeValueState="Warning"press="onPress"badgeIcon="sap-icon://alert"badgeTooltip="Sabine Mayer"/><TexttextAlign="Center"text="Warning"class="sapUiSmallMarginTop"/></VBox><VBoxalignItems="Center"class="sapUiLargeMarginBegin"><AvatardisplaySize="M"imageFitType="Cover"badgeValueState="Information"press="onPress"badgeIcon="sap-icon://information"badgeTooltip="Sabine Mayer"/><TexttextAlign="Center"text="information"class="sapUiSmallMarginTop"/></VBox><VBoxalignItems="Center"class="sapUiLargeMarginBegin"><AvatardisplaySize="M"imageFitType="Cover"badgeValueState="Success"press="onPress"badgeIcon="sap-icon://message-success"badgeTooltip="Sabine Mayer"/><TexttextAlign="Center"text="Success"class="sapUiSmallMarginTop"/></VBox><VBoxalignItems="Center"class="sapUiLargeMarginBegin"><AvatardisplaySize="M"imageFitType="Cover"badgeValueState="Error"press="onPress"badgeIcon="sap-icon://message-error"badgeTooltip="Sabine Mayer"/><TexttextAlign="Center"text="Error"class="sapUiSmallMarginTop"/></VBox></HBox>
</Panel>

2.8 active

  • 只有绑定press事件时才能激活该属性
  • Active背景颜色和Non-Active背景颜色有差异
    在这里插入图片描述
    在这里插入图片描述
  • View
<PanelheaderText="Active - Popover menu"class="sapUiLargeMarginBottom"
><VBox><MessageStriptext="Active state of Avatar is set, when the user clicks on the Avatar and the Popover menu is opened. When the menu is closed, Active state is removed."showIcon="false"showCloseButton="false"class="sapUiTinyMargin"/><HBox><Avatarid="myAvatar"active="false"displaySize="L"showBorder="true"class="sapUiTinyMargin"press="onPressPopover"/></HBox></VBox>
</Panel>
  • 点击事件
onPressPopover: function (oEvent) {var oEventSource = oEvent.getSource(),bActive = this.oMyAvatar.getActive();this.oMyAvatar.setActive(!bActive);if (bActive) {this._oPopover.close();} else {this._oPopover.openBy(oEventSource);}}

3. Image

  • Image可以显示主流图片文件,也可以显示BASE64图片文件
    在这里插入图片描述
  • View
<PanelheaderText="Image"class="sapUiLargeMargin"
><HBox width="50%"><VBoxalignItems="Center"class="sapUiLargeMarginBegin"><Imagesrc="img/lamp.png"width="150px"/><Texttext="PNG格式"class="sapUiSmallMarginBottom"/></VBox><VBoxalignItems="Center"class="sapUiLargeMarginBegin"><Imagesrc="img/1.webp"width="150px"/><Texttext="webp格式"class="sapUiSmallMarginBottom"/></VBox><VBoxalignItems="Center"class="sapUiLargeMarginBegin"><Image src="img/sap-logo.svg" /><Texttext="svg格式"class="sapUiSmallMarginBottom"/></VBox><VBoxalignItems="Center"class="sapUiLargeMarginBegin"><Image src="{/imgurl}" /><Texttext="BASE64值"class="sapUiSmallMarginBottom"/></VBox></HBox>
</Panel>
  • 读取本地图片并转成base64
_convertImageToBase64: function (filePath) {return new Promise(function (resolve, reject) {// 创建一个XMLHttpRequest对象var xhr = new XMLHttpRequest();// 配置请求,使用GET方法获取文件xhr.open("GET", filePath, true);// 设置响应类型为blob(二进制数据)xhr.responseType = "blob";// 注册加载完成的回调函数xhr.onload = function () {if (xhr.status === 200) {// 读取到的文件数据var blob = xhr.response;// 创建一个FileReader对象var reader = new FileReader();// 注册读取完成的回调函数reader.onloadend = function () {// 获取Base64编码的文件内容var base64Data = reader.result;resolve(base64Data);};// 读取blob数据为Base64编码reader.readAsDataURL(blob);} else {reject(new Error("Failed to load the image."));}};// 注册错误回调函数xhr.onerror = function () {reject(new Error("Failed to make the request."));};// 发送请求xhr.send();});
}
  • onInit中调用
// 调用函数将文件转换为base64编码
this._convertImageToBase64("img/2.jpg").then(function (base64Data) {that.getView().setModel(new JSONModel({ "imgurl": base64Data }))}).catch(function (error) {console.error(error);});

相关文章:

[UI5 常用控件] 03.Icon, Avatar,Image

文章目录 前言1. Icon2. Avatar2.1 displayShape2.2 initials2.3 backgroundColor2.4 Size2.5 fallbackIcon2.6 badgeIcon2.7 badgeValueState2.8 active 3. Image 前言 本章节记录常用控件Title,Link,Label。 其路径分别是&#xff1a; sap.m.Iconsap.m.Avatarsap.m.Image 1…...

python爬虫demo——爬取历史平均房价

简单爬取历史房价 需求 爬取的网站汇聚数据的城市房价 https://fangjia.gotohui.com/ 功能 选择城市 https://fangjia.gotohui.com/fjdata-3 需要爬取年份的数据&#xff0c;等等 https://fangjia.gotohui.com/years/3/2018/ 使用bs4模块 使用bs4模块快速定义需要爬取的…...

力扣0100——相同的树

相同的树 难度&#xff1a;简单 题目描述 给你两棵二叉树的根节点 p 和 q &#xff0c;编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同&#xff0c;并且节点具有相同的值&#xff0c;则认为它们是相同的。 示例1 输入&#xff1a; p [1,2,3], q [1,2,3]…...

Vue-40、Vue中TodoList案例

1、MyHeader.vue <template><div class"todo-header"><input type"text" placeholder"请输入你的任务名称&#xff0c;按回车键确认" v-model"title" keyup.enter"add"></div> </template>&…...

dvwa靶场文件上传high

dvwa upload high 第一次尝试&#xff08;查看是否是前端验证&#xff09;第二次尝试我的上传思路最后发现是图片码上传修改配置文件尝试蚁&#x1f5e1;连接菜刀连接 第一次尝试&#xff08;查看是否是前端验证&#xff09; 因为我是初学者&#xff0c;所以无法从代码审计角度…...

​ PaddleHub 首页图像 - 文字识别chinese_ocr_db_crnn_server​

PaddleHub 便捷地获取PaddlePaddle生态下的预训练模型&#xff0c;完成模型的管理和一键预测。配合使用Fine-tune API&#xff0c;可以基于大规模预训练模型快速完成迁移学习&#xff0c;让预训练模型能更好地服务于用户特定场景的应用 零基础快速开始WindowsLinuxMac Paddle…...

如何在Win系统安装Jupyter Notbook并实现无公网ip远程访问本地笔记

文章目录 1.前言2.Jupyter Notebook的安装2.1 Jupyter Notebook下载安装2.2 Jupyter Notebook的配置2.3 Cpolar下载安装 3.Cpolar端口设置3.1 Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1.前言 在数据分析工作中&#xff0c;使用最多的无疑就是各种函数、图表、…...

腾讯云轻量应用Windows服务器如何搭建幻兽帕鲁Palworld私服?

幻兽帕鲁/Palworld是一款2024年Pocketpair开发的开放世界生存制作游戏&#xff0c;在帕鲁的世界&#xff0c;玩家可以选择与神奇的生物“帕鲁”一同享受悠闲的生活&#xff0c;也可以投身于与偷猎者进行生死搏斗的冒险。而帕鲁可以进行战斗、繁殖、协助玩家做农活&#xff0c;也…...

AR眼镜_ar智能眼镜显示方案|光学方案

AR眼镜是一种智能眼镜&#xff0c;能够将虚拟现实和现实世界相结合&#xff0c;使人们能够在日常生活中体验和参与虚拟现实。然而&#xff0c;AR智能眼镜的制造成本高&#xff0c;开发周期长。要实现AR眼镜的各项功能&#xff0c;需要良好的硬件条件&#xff0c;而AR智能眼镜的…...

C语言之猜凶手

一、题目 日本某地发生了一件谋杀案&#xff0c;警察通过排查确定杀人凶手必为4个嫌疑犯的一个。 以下为4个嫌疑犯的供词: A说&#xff1a;不是我。B说&#xff1a;是C。C说&#xff1a;是D。D说&#xff1a;C在胡说 已知3个人说了真话&#xff0c;1个人说的是假话。 现在…...

#Uniapp: uni.previewImage(OBJECT) 预览图片

uni.previewImage(OBJECT) 预览图片。 api地址 媒体-图片 示例 handlePreviewImg(current) {const urls this.rightList.map(x > x.icon)uni.previewImage({urls,current})}OBJECT 参数说明 参数名类型必填说明平台差异说明countNumber否最多可以选择的图片张数&#…...

SpringCloud-高级篇(十六)

前面学习了Lua的语法&#xff0c;就可以在nginx去做编程&#xff0c;去实现nginx类里面的业务&#xff0c;查询Redis&#xff0c;查询tomcat等 &#xff0c;业务逻辑的编写依赖于其他组件&#xff0c;这些组件会用到OpenResty的工具去实现 &#xff08;1&#xff09;安装OpenRe…...

【C++基础】C++内存处理机制面试题(以面促学 )

&#x1f308;欢迎来到C基础专栏 &#x1f64b;&#x1f3fe;‍♀️作者介绍&#xff1a;前PLA队员 目前是一名普通本科大三的软件工程专业学生 &#x1f30f;IP坐标&#xff1a;湖北武汉 &#x1f349; 目前技术栈&#xff1a;C/C、Linux系统编程、计算机网络、数据结构、Mysq…...

arcgis 批量删除字段

一、打开ArcToolbox-数据管理工具-字段-删除字段。 二、在输入表中选择要删除字段的要素&#xff0c;在删除字段栏中选择要删除的字段&#xff0c;点击确认即可。...

尚无忧球馆助教系统源码,助教小程序源码,助教源码,陪练系统源码

特色功能&#xff1a; 不同助教服务类型选择 助教申请&#xff0c;接单&#xff0c;陪练师入住&#xff0c;赚取外快 线下场馆入住 设置自己服务 城市代理 分销商入住 优惠券 技术栈&#xff1a;前端uniapp后端thinkphp 独立全开源...

Spring-集成Junit

一、引子 我们在Spring概念中提到&#xff1a;Spring的一大优势在于可以集成众多优秀的框架。毫无疑问&#xff0c;我首先向读者推荐的就是Junti框架。因为我们在前期的学习中&#xff0c;写一些小的demo&#xff0c;用Junit来进行小测试是非常合适的。下面让我们来具体看看如…...

DS:经典算法OJ题(1)

创作不易&#xff0c;友友们给个三连呗&#xff01;&#xff01; 本文为经典算法OJ题练习&#xff0c;大部分题型都有多种思路&#xff0c;每种思路的解法博主都试过了&#xff08;去网站那里验证&#xff09;是正确的&#xff0c;大家可以参考&#xff01;&#xff01; 一、移…...

最好理解文章——什么是闭包?

学习Javascript闭包&#xff08;Closure&#xff09; 闭包&#xff08;closure&#xff09;是Javascript语言的一个难点&#xff0c;也是它的特色&#xff0c;很多高级应用都要依靠闭包实现。 一、变量的作用域 要理解闭包&#xff0c;首先必须理解Javascript特殊的变量作用…...

Git 教程 | 将本地修改后的文件推送到 Github 指定远程分支上

Git 是一种分布式版本控制系统&#xff0c;用于敏捷高效地处理任何大小的项目。它是由 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的开源版本控制软件。Git 的本地克隆就是一个完整的版本控制存储库&#xff0c;无论脱机还是远程都能轻松工作。开发人员会在本地提交其工…...

漏洞原理linux操作系统的SqlMap工具的使用

漏洞原理linux操作系统的SqlMap工具的使用 Linux操作系统基础操作链接: 1024一篇通俗易懂的liunx命令操作总结(第十课)-CSDN博客 kali的IP地址:192.168.56.1 实操 # kali中使用sqlmap http://192.168.56.1/ sqlmap -u http://192.168.56.1/news/show.php?id46 sqlmap -u …...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...