SAP UI5 Web Component for React的图标和图片处理

举报
Jerry Wang 发表于 2022/02/21 20:50:36 2022/02/21
【摘要】 这个React应用左上角的react图标,以及右上角的小人图标,是如何显示出来的?把图片放到React应用的public文件夹下:在React应用的ShellBar组件里,将图片名称赋给对应的logo和profile属性即可:运行时的实现:假设我使用SAP UI5 Web Component的React控件, 比如柱状图和折线图:导入useState函数,默认加载状态为false:每次点击屏...

这个React应用左上角的react图标,以及右上角的小人图标,是如何显示出来的?

把图片放到React应用的public文件夹下:

在React应用的ShellBar组件里,将图片名称赋给对应的logo和profile属性即可:

运行时的实现:

假设我使用SAP UI5 Web Component的React控件, 比如柱状图和折线图:


导入useState函数,默认加载状态为false:

每次点击屏幕后,首先将Loading状态使用切换函数setLoading设置成true,这样可以看到控件正在加载的动画效果。2秒钟后,setLoading设置为false,关闭动画效果。

下图这道渐进式显示的横线就是控件加载时的动画效果。

最后把loading变量赋给两个Chart的loading属性:

我的SAP UI5 web Component同时定义了两个图表标签,即BarChart和LineChart:

运行时效果如下:

现在我想针对这两个图表控件做一个条件显示,即点击屏幕一次,显示A图表,再点击,显示B图表。

(1) 引入useState函数:

使用该useState生成一组控制器,返回的值通过toggerCharts和setToggerCharts保存。

前者是一个数组,值为默认显示的图表类型:lineChart,后者是一个函数。

在handleHeaderClick这个事件响应函数里,根据点击更改图表类型。

(2) 在card正文里,通过类似Java的三元表达式的语法来控制图表的显示:

最后效果如下:


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200