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

2024-01-27 15:12
文章标签 常用 03 控件 image icon avatar ui5

本文主要是介绍[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的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/650624。

相关文章

MyBatis常用XML语法详解

MyBatis常用XML语法详解

《MyBatis常用XML语法详解》文章介绍了MyBatis常用XML语法,包括结果映射、查询语句、插入语句、更新语句、删除语句、动态SQL标签以及ehcache.xml文件的使用,感兴趣的朋友跟随小... 目录1、定义结果映射2、查询语句3、插入语句4、更新语句5、删除语句6、动态 SQL 标签7、ehc
阅读更多...
Python打包成exe常用的四种方法小结

Python打包成exe常用的四种方法小结

《Python打包成exe常用的四种方法小结》本文主要介绍了Python打包成exe常用的四种方法,包括PyInstaller、cx_Freeze、Py2exe、Nuitka,文中通过示例代码介绍的非... 目录一.PyInstaller11.安装：2. PyInstaller常用参数下面是pyinstal
阅读更多...
Python 常用数据类型详解之字符串、列表、字典操作方法

Python 常用数据类型详解之字符串、列表、字典操作方法

《Python常用数据类型详解之字符串、列表、字典操作方法》在Python中,字符串、列表和字典是最常用的数据类型,它们在数据处理、程序设计和算法实现中扮演着重要角色,接下来通过本文给大家介绍这三种... 目录一、字符串（String）（一）创建字符串（二）字符串操作1. 字符串连接2. 字符串重复3. 字
阅读更多...
python语言中的常用容器(集合)示例详解

python语言中的常用容器(集合)示例详解

《python语言中的常用容器(集合)示例详解》Python集合是一种无序且不重复的数据容器,它可以存储任意类型的对象,包括数字、字符串、元组等,下面：本文主要介绍python语言中常用容器(集合... 目录1.核心内置容器1. 列表2. 元组3. 集合4. 冻结集合5. 字典2.collections模块
阅读更多...
JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法

JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法

《JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法》：本文主要介绍JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法,每种方法结合实例代码给大家介绍的非常... 目录引言：为什么"相等"判断如此重要？方法1：使用some()+includes()（适合小数组）方法2
阅读更多...
SpringBoot 获取请求参数的常用注解及用法

SpringBoot 获取请求参数的常用注解及用法

《SpringBoot获取请求参数的常用注解及用法》SpringBoot通过@RequestParam、@PathVariable等注解支持从HTTP请求中获取参数,涵盖查询、路径、请求体、头、C... 目录SpringBoot 提供了多种注解来方便地从 HTTP 请求中获取参数以下是主要的注解及其用法：1
阅读更多...
Java Stream流以及常用方法操作实例

Java Stream流以及常用方法操作实例

《JavaStream流以及常用方法操作实例》Stream是对Java中集合的一种增强方式,使用它可以将集合的处理过程变得更加简洁、高效和易读,：本文主要介绍JavaStream流以及常用方法... 目录一、Stream流是什么？二、stream的操作2.1、stream流创建2.2、stream的使用2.
阅读更多...
MySQL常用字符串函数示例和场景介绍

MySQL常用字符串函数示例和场景介绍

《MySQL常用字符串函数示例和场景介绍》MySQL提供了丰富的字符串函数帮助我们高效地对字符串进行处理、转换和分析,本文我将全面且深入地介绍MySQL常用的字符串函数,并结合具体示例和场景,帮你熟练... 目录一、字符串函数概述1.1 字符串函数的作用1.2 字符串函数分类二、字符串长度与统计函数2.1
阅读更多...
MySQL 内存使用率常用分析语句

MySQL 内存使用率常用分析语句

《MySQL内存使用率常用分析语句》用户整理了MySQL内存占用过高的分析方法,涵盖操作系统层确认及数据库层bufferpool、内存模块差值、线程状态、performance_schema性能数据... 目录一、 OS层二、 DB层1. 全局情况2. 内存占js用详情最近连续遇到mysql内存占用过高导致
阅读更多...
Linux系统中查询JDK安装目录的几种常用方法

Linux系统中查询JDK安装目录的几种常用方法

《Linux系统中查询JDK安装目录的几种常用方法》：本文主要介绍Linux系统中查询JDK安装目录的几种常用方法,方法分别是通过update-alternatives、Java命令、环境变量及目... 目录方法 1：通过update-alternatives查询（推荐）方法 2：检查所有已安装的 JDK方
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2