SAP UI5 Web Component的图标实现

例子：我的SAP UI5 Web Component开发而成的React应用上，显示了这个加号图标：

在React Component里引入加号图标：

在此处给ShellBarItem的icon属性赋以add按钮：

运行时效果如下：

我们再回过头看看在代码里导入的add.js的内容：

pathData里包含的值，其实就是基于SVG绘制而成的加号图标在浏览器里对应的g标签的d属性，如下图所示：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

SAP UI5 Web Component的图标实现相关推荐

SAP UI5 web Component里的条件渲染机制
我的SAP UI5 web Component同时定义了两个图表标签,即BarChart和LineChart: 运行时效果如下: 现在我想针对这两个图表控件做一个条件显示,即点击屏幕一次,显示A图表, ...
如何实现SAP UI5 Web Component React控件的加载效果
假设我使用SAP UI5 Web Component的React控件, 比如柱状图和折线图: 导入useState函数,默认加载状态为false: 每次点击屏幕后,首先将Loading状态使用切换函数 ...
SAP UI5 Web Component for React的图标和图片处理
这个React应用左上角的react图标,以及右上角的小人图标,是如何显示出来的? 把图片放到React应用的public文件夹下: 在React应用的ShellBar组件里,将图片名称赋给对应的lo ...
如何使用SAP UI5 web Component的React框架的柱状图和折线图
导入柱状图和折线图: import { BarChart, LineChart } from "@ui5/webcomponents-react-charts": 在自定义的Rea ...
SAP UI5 web Component的React组件，如何实现事件响应
在我们自定义的React Component实现里,定义一个事件响应函数handleHeaderClick: 然后通过第15行的onHeaderClick注册. 一旦点击上图的Card,就会触发事件响 ...
如何使用SAP UI5 Web Component for React的padding功能
导入组件@ui5/webcomponents-react-base: 然后在第17行的Text标签里给style属性附上值:spacing.sapUiContentPadding的值在运行时为padd ...
SAP UI5 Web Component里最简单的React列表控件的用法
从@ui5/webcomponents-react里导入 List,StandardListItem和ValueState: 用下列方式绘制列表(list): <List><Stan ...
SAP UI5 Web Component的React表格控件用法
从@ui5/webcomponents-react导入表格组件AnalyticalTable: 生成表格的抬头列标签数组和行数据数组: 使用AnalyticalTable标签页,将data和colum ...
SAP UI5 Web Component不同React页面的跳转实现
(1) 从react-router-dom里导入Switch,Route和Redirect组件: (2) 路径/home指定成加载Home Component ,/detail则加载Detail Co ...

SAP UI5 Web Component的图标实现

SAP UI5 Web Component的图标实现相关推荐

最新文章

热门文章