sapui5 - sap.ui.commons.Panel Collapse / Expanded event

Question

Welcome To Ask or Share your Answers For Others

sapui5 - sap.ui.commons.Panel Collapse / Expanded event

asked Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

is it possible to add an event to SAPUI5 sap.ui.commons.Panel's minimize and maximize? What i need is to add a different style when the Panel's collapse- or expand-Button is clicked.

If the user clicks on the minus-Symbol i have to add a styleclass like pnl.addStyleClass("XYZ"); when the user clicks on "maximize" a different styleclass should be added to the panel pnl.addStyleClass("ZYFDEFD");

if i overwrite the .setCollapse- or .setExpanded-function the panel doesn't collapse or expand anymore, so something else has to be found.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

244 views

1 Answer

深蓝 · Answer 1 · 2022-01-31T07:13:31+0000

A couple of possible options...

1) You could make use the standard style class (sapUiPanelColl) which is added to the control depending on the expanded state - see example below...

var oPanel = new sap.ui.commons.Panel({});
oPanel.addStyleClass("myPanel");
oPanel.placeAt("content");

.myPanel { background-color: green; }
.myPanel.sapUiPanelColl { background-color: red; }

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>sap.ui.commons.Panel style class example</title>
</head>
<body id="content">
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m,sap.ui.commons"></script>

</body>
</html>

Categories

sapui5 - sap.ui.commons.Panel Collapse / Expanded event

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags