<!DOCTYPE HTML>
<html style="height: 100%;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<script defer id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.layout"
data-sap-ui-theme="sap_fiori_3_dark"
data-sap-ui-async="true"
data-sap-ui-oninit="onUI5Init"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-resourceroots='{ "demo": "./" }'
data-sap-ui-xx-waitfortheme="init"
></script>
<script>
globalThis.onUI5Init = () => sap.ui.require([
"sap/ui/core/mvc/XMLView",
], async XMLView => {
"use strict";
const control = await XMLView.create({
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns:layout="sap.ui.layout"
xmlns="sap.m"
displayBlock="true">
<layout:ResponsiveSplitter defaultPane="default">
<layout:PaneContainer>
<layout:SplitPane>
<Panel height="100%">
<Label text="Panel 1" />
</Panel>
<layout:layoutData>
<layout:SplitterLayoutData size="20%" />
</layout:layoutData>
</layout:SplitPane>
<layout:SplitPane>
<Panel height="100%">
<Label text="Panel 2" />
</Panel>
</layout:SplitPane>
</layout:PaneContainer>
</layout:ResponsiveSplitter>
</mvc:View>`,
height: "100%",
});
control.placeAt("content");
});
</script>
</head>
<body id="content" class="sapUiBody">
</body>
</html>