Move this dialog around the screen by dragging it by its header.
@@ -898,6 +925,10 @@
scrollHelper.style.display = cbScrollable.checked ? "block" : "none";
});
+ cbRtl.addEventListener("ui5-change", function () {
+ document.documentElement.dir = cbRtl.checked ? "rtl" : "ltr";
+ });
+
let preventClosing = true;
btnOpenDialog.addEventListener("click", function () {
@@ -1000,6 +1031,10 @@
window["resizable-custom-header-close"].addEventListener("click", function () { window["resizable-dialog-custom-header"].open = false; });
window["draggable-and-resizable-open"].addEventListener("click", function () { window["draggable-and-resizable-dialog"].open = true; });
window["draggable-and-resizable-close"].addEventListener("click", function () { window["draggable-and-resizable-dialog"].open = false; });
+ window["fullscreen-open"].addEventListener("click", function () { window["fullscreen-dialog"].open = true; });
+ window["fullscreen-close"].addEventListener("click", function () { window["fullscreen-dialog"].open = false; });
+ window["fullscreen-long-title-open"].addEventListener("click", function () { window["fullscreen-long-title"].open = true; });
+ window["fullscreen-long-title-close"].addEventListener("click", function () { window["fullscreen-long-title"].open = false; });
window["rtl-draggable-and-resizable-open"].addEventListener("click", function () { window["rtl-draggable-and-resizable-dialog"].open = true; });
window["rtl-draggable-and-resizable-close"].addEventListener("click", function () { window["rtl-draggable-and-resizable-dialog"].open = false; });
window["rtl-maxwidth-resizable-open"].addEventListener("click", function () { window["rtl-maxwidth-resizable-dialog"].open = true; });
diff --git a/packages/website/docs/_components_pages/main/Dialog.mdx b/packages/website/docs/_components_pages/main/Dialog.mdx
index 403387ab4706..539c059b0c53 100644
--- a/packages/website/docs/_components_pages/main/Dialog.mdx
+++ b/packages/website/docs/_components_pages/main/Dialog.mdx
@@ -4,6 +4,7 @@ slug: ../Dialog
import Basic from "../../_samples/main/Dialog/Basic/Basic.md";
import DraggableAndResizable from "../../_samples/main/Dialog/DraggableAndResizable/DraggableAndResizable.md";
+import Fullscreen from "../../_samples/main/Dialog/Fullscreen/Fullscreen.md";
import BarInDialog from "../../_samples/main/Dialog/BarInDialog/BarInDialog.md";
import WithState from "../../_samples/main/Dialog/WithState/WithState.md";
@@ -19,6 +20,10 @@ import WithState from "../../_samples/main/Dialog/WithState/WithState.md";
### Draggable and Resizable
+### Fullscreen
+Users can toggle between standard and full screen size. The full screen button is positioned top-right in the dialog's title bar. The fullscreen toggle can also be triggered by pressing Shift+Ctrl+F or by double-clicking the dialog header.
+
+
### Usage of Bar as header/footer
The Bar component can be used as header and/or footer of the Dialog
diff --git a/packages/website/docs/_samples/main/Dialog/Fullscreen/Fullscreen.md b/packages/website/docs/_samples/main/Dialog/Fullscreen/Fullscreen.md
new file mode 100644
index 000000000000..0c062a836e84
--- /dev/null
+++ b/packages/website/docs/_samples/main/Dialog/Fullscreen/Fullscreen.md
@@ -0,0 +1,5 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+import react from '!!raw-loader!./sample.tsx';
+
+
diff --git a/packages/website/docs/_samples/main/Dialog/Fullscreen/main.js b/packages/website/docs/_samples/main/Dialog/Fullscreen/main.js
new file mode 100644
index 000000000000..380d54aca254
--- /dev/null
+++ b/packages/website/docs/_samples/main/Dialog/Fullscreen/main.js
@@ -0,0 +1,21 @@
+import "@ui5/webcomponents/dist/Dialog.js";
+import "@ui5/webcomponents/dist/Button.js";
+import "@ui5/webcomponents/dist/Toolbar.js";
+import "@ui5/webcomponents/dist/ToolbarButton.js";
+
+var dialogOpener = document.getElementById("dialogOpener");
+var dialog = document.getElementById("dialog");
+var dialogClosers = [...dialog.querySelectorAll(".dialogCloser")];
+
+dialogOpener.accessibilityAttributes = {
+ hasPopup: "dialog",
+ controls: dialog.id,
+};
+dialogOpener.addEventListener("click", () => {
+ dialog.open = true;
+});
+dialogClosers.forEach(btn => {
+ btn.addEventListener("click", () => {
+ dialog.open = false;
+ });
+})
diff --git a/packages/website/docs/_samples/main/Dialog/Fullscreen/sample.html b/packages/website/docs/_samples/main/Dialog/Fullscreen/sample.html
new file mode 100644
index 000000000000..8e162573f4e6
--- /dev/null
+++ b/packages/website/docs/_samples/main/Dialog/Fullscreen/sample.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+ Sample
+
+
+
+
+
+ Open Fullscreen Dialog
+
+
+ This dialog has a fullscreen toggle button in the header.
+ Click the fullscreen button or press Shift+Ctrl+F to toggle fullscreen mode.
+ You can also double-click the header to toggle.
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/website/docs/_samples/main/Dialog/Fullscreen/sample.tsx b/packages/website/docs/_samples/main/Dialog/Fullscreen/sample.tsx
new file mode 100644
index 000000000000..9bae0850e0f4
--- /dev/null
+++ b/packages/website/docs/_samples/main/Dialog/Fullscreen/sample.tsx
@@ -0,0 +1,50 @@
+import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
+import { useState } from "react";
+import ButtonClass from "@ui5/webcomponents/dist/Button.js";
+import DialogClass from "@ui5/webcomponents/dist/Dialog.js";
+import ToolbarClass from "@ui5/webcomponents/dist/Toolbar.js";
+import ToolbarButtonClass from "@ui5/webcomponents/dist/ToolbarButton.js";
+
+const Button = createReactComponent(ButtonClass);
+const Dialog = createReactComponent(DialogClass);
+const Toolbar = createReactComponent(ToolbarClass);
+const ToolbarButton = createReactComponent(ToolbarButtonClass);
+
+function App() {
+ const [dialogOpen, setDialogOpen] = useState(false);
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+export default App;