SAP UI5 web Component里的条件渲染机制

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

运行时效果如下:

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

(1) 引入useState函数:

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

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

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

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

最后效果如下:


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

原文地址:https://www.cnblogs.com/sap-jerry/p/12303050.html

时间: 2024-08-30 12:10:20

SAP UI5 web Component里的条件渲染机制的相关文章

如何实现SAP UI5 Web Component React控件的加载效果

假设我使用SAP UI5 Web Component的React控件, 比如柱状图和折线图: 导入useState函数,默认加载状态为false: 每次点击屏幕后,首先将Loading状态使用切换函数setLoading设置成true,这样可以看到控件正在加载的动画效果.2秒钟后,setLoading设置为false,关闭动画效果. 下图这道渐进式显示的横线就是控件加载时的动画效果. 最后把loading变量赋给两个Chart的loading属性: 要获取更多Jerry的原创文章,请关注公众号"

如何使用SAP UI5 web Component的React框架的柱状图和折线图

导入柱状图和折线图: import { BarChart, LineChart } from "@ui5/webcomponents-react-charts": 在自定义的React Component里,为图标创建数据集和数据标签对应的JavaScript数组: 最后在React 自定义组件里,直接为LineChart和BarChart这两个标签页维护刚才创建好的JavaScript数组: 最后的效果,折线图: 柱状图: 不出意外,还是通过canvas实现的: 要获取更多Jerry

如何使用SAP UI5 Web Component for React的padding功能

导入组件@ui5/webcomponents-react-base: 然后在第17行的Text标签里给style属性附上值:spacing.sapUiContentPadding的值在运行时为padding: 1rem 这个值定义在文件夹C:\temp\react\my-app\[email protected]\webcomponents-react-base\cjs下面的文件base.development.js里: 要获取更多Jerry的原创文章,请关注公众号"汪子熙": 原文地

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

这个React应用左上角的react图标,以及右上角的小人图标,是如何显示出来的? 把图片放到React应用的public文件夹下: 在React应用的ShellBar组件里,将图片名称赋给对应的logo和profile属性即可: 运行时的实现: 要获取更多Jerry的原创文章,请关注公众号"汪子熙": 原文地址:https://www.cnblogs.com/sap-jerry/p/12303005.html

SAP UI5和angular里的常量定义

SAP UI5 以我们以前负责的Opportunity为例,直接创建一个新的js文件,然后用所有字段为大写格式的JSON对象来模拟constant.UI5 framework也是用的这种方式. Angular 用constant方法注入: app.constant('MONGOLAB_CONFIG', { baseUrl: '/databases/', dbName: 'ascrum' }); 在要使用这个常量的地方直接声明依赖,然后使用: Angular的常量注入有三种方式 // 在provi

如何在SAP UI5应用里添加使用摄像头拍照的功能

昨天Jerry的文章 纯JavaScript实现的调用设备摄像头并拍照的功能 介绍了纯JavaScript借助WebRTC API来开发支持调用设备的摄像头拍照的web应用.而我同事遇到的实际情况是,需要使用SAP UI5这个前端框架来开发web应用.在有了前一篇文章的知识储备后,在SAP UI5里完成这个功能,可以采取同样的思路. 我们先回忆前一篇文章里提到的技术实现的要点: (1) 在web应用的HTML页面里定义HTML5用于显示视频的原生标签:video (2) 使用WebRTC的API

HTML5开发移动web应用——SAP UI5篇(7)

SAPUI5中支持利用Component对组件进行封装.想封装一个组件,Component的基本代码例如以下: sap.ui.define([ "sap/ui/core/UIComponent"], function (UIComponent) { "use strict"; return UIComponent.extend("", { init : function () { // call the init function of the

HTML5开发移动web应用——SAP UI5篇(8)

本次对之前学习的SAP UI5框架知识进行简单小结.以及重点部分知识的梳理. 1.在UI5使用过程中,命名空间的概念非常重要. 2.一般的sap组件引用格式例如以下: sap.ui.define([ "sap/ui/core/UIComponent", "sap/ui/model/json/JSONModel", "sap/ui/model/resource/ResourceModel"], function (UIComponent, JSON

SAP UI5 - Component

学习下UI5的Component概念 UI5有两种Component: 一种是faceless component (class: sap.ui.core.Component), 这种component没有用户界面,一般用于从后台系统获取数据. 另一种是UI component(class: sap.ui.core.UIComponent), 这些组件是用于屏幕展示的,一般对应一个屏幕区域或者元素,可以被重复利用. 这两种component的基准类都是sap.ui.core.Component,