QT QUICK · C++ · PYTHON

One design language.
Native applications.

Build desktop interfaces with QML components, shared tokens and practical examples you can run yourself.

Get started Explore components →

QML Core is a separate product. C++ and Python hosts share the same QML screens.

Syidax QML workbench running in the native application — A real Qt Quick application, built with Syidax Core.

QML CORE

Components

Search components

56 of 56 components

START WITH A WORKING APP

From download to your first window

C++ · CMake

Unzip the SDK and use a Qt kit compatible with the plugin edition.

cmake -S examples/cmake-app -B build -G Ninja -DCMAKE_BUILD_TYPE=Release -DCMAKE_PREFIX_PATH=C:/Qt/6.12.0/msvc2022_64 -DCMAKE_MSVC_DEBUG_INFORMATION_FORMAT=Embedded -DCMAKE_POLICY_DEFAULT_CMP0141=NEW
cmake --build build
build/syidax-example --license your.license.json --example workbench

Python · PySide6

Use the pure QML edition. Select your binding explicitly.

python -m venv .venv
.venv/Scripts/python -m pip install -r examples/python-app/requirements-pyside6.txt
.venv/Scripts/python examples/python-app/main.py --binding pyside6 --license your.license.json --example records

Run with --diagnose --json to check your Qt version, import path, fonts, runtime and license. No license token is printed.

The Gallery evaluation app is available now. Paid SDK sales and downloads are coming soon. The installation examples above preview the SDK workflow.

Tested Windows configurations

Native window and example smoke checks cover the versions below. Qt 6.8 is a source minimum, not a promise of tested support for every Qt release. Gallery uses software rendering.

Two complete application examples

Step-by-step captures from the running Windows applications. Play, pause and inspect each state.

Workbench: mark a task done, save changes and see release progress update.

Record Manager: preserve a failed save, retry, search and confirm before deleting.

See the components in context

TRY IT YOURSELF

The native Gallery

Browse examples, inspect properties and switch between light and dark themes in a Windows application. The Gallery is for evaluation; commercial SDK access is separate.

Download Gallery · Windows x64

Download QML examples and sample assets

QML Core

$24.99 / month

$249.99 / year per developer

Same regular unit price as Chart. The same price applies to first purchases, additional seats and renewals.

Documentation, runnable examples and diagnostics are included. Individual technical support, onboarding and SLAs are not provided.

View purchase and license terms →

Troubleshooting

Module not found

The --qml path must contain the Syidax folder. Python uses qml-pure. Run from the unzipped SDK, independently of the source repository.

License is inactive or frozen

Download your QML Core certificate and pass it with --license. Web Core, Chart and Grid certificates do not activate QML. Monthly use ends at expiry. Annual licenses retain only releases covered by their update period.

Qt or plugin mismatch

Check the Qt version and architecture used to build plugins. Do not mix Python Qt bindings. qml-pure removes the compiled plugin ABI dependency.

PDF or icons missing

PDF requires the optional QtQuick.Pdf module. Other Core components remain usable without it. For icon packs and resource paths, read SDK docs/ICON-PACKS.md.

Save failure or corrupt settings

Examples write only to their application-data folder. Check permissions and disk space. Invalid JSON is backed up before reset. A failed save preserves your draft.

← All components

Modal

Open a dialog over the application for confirmation, focused input or a separate task.

import Syidax.Core.Modal

Supported QML types

Type	Definition / role
	Modal dialog that keeps focus and interaction inside while open.

Previews are images of native Qt runs. Use the buttons below each image to view a result.

01 Basic composition

Compare the configuration and result of Basic composition.

Basic composition · Opened — Qt capture · image

QML code

import QtQuick
import Syidax.Core

Item {
    component EventLog: Rectangle {
        id: logBox
        property var lines: []
        implicitWidth: 440
        implicitHeight: Math.max(56, logText.implicitHeight + 24)
        radius: 4; color: Theme.semantic.backgroundBold
        function log(value) { lines = lines.slice(-3).concat([String(value)]) }
        Text {
            id: logText; x: 12; y: 12; width: parent.width - 24
            text: logBox.lines.length ? logBox.lines.join("\n") : "Interact with the controls to see event results."
            wrapMode: Text.Wrap; color: Theme.semantic.textDefault
            font.family: Theme.monoFontFamily; font.pixelSize: 12
        }
    }

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height

    property QtObject settings: QtObject {
        id: storyArgs
        property string variant: "dialog"
        property string title: "Delete this row?"
        property bool closable: true
        property bool hideFooter: false
        property bool maskClosable: false
        property bool maskless: false
        property bool enableModalMaximize: false
        property string animation: "none"
        property string cancelText: ""
        property string okText: ""
    }

    

    Column {
        spacing: 12
        SyModal {
            id: dialog
            variant: storyArgs.variant
            title: storyArgs.title
            closable: storyArgs.closable
            hideFooter: storyArgs.hideFooter
            maskClosable: storyArgs.maskClosable
            maskless: storyArgs.maskless
            enableModalMaximize: storyArgs.enableModalMaximize
            animation: storyArgs.animation
            cancelText: storyArgs.cancelText
            okText: storyArgs.okText
            onClosed: (detail) => output.log(detail.event)
            Text { text: "This cannot be undone."; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.modal.contentTextEnabled }
        }
        SyButton { id: exampleControl1;  text: "Open"; onClicked: dialog.setOpen() }
        EventLog { id: output }
    }

}

02 variant · enableModalMaximize · windowWidth · windowHeight

Compare the configuration and result of variant · enableModalMaximize · windowWidth · windowHeight.

variant · enableModalMaximize · windowWidth · windowHeight · Opened — Qt capture · image

QML code

import QtQuick
import Syidax.Core

Item {
    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    // Focused Gallery routes: keep only the selected API and its prerequisites.
    id: featureStory

    property QtObject settings: QtObject {
        id: storyArgs
        property int windowWidth: 420
        property int windowHeight: 260
        property bool enableModalMaximize: true
    }

    

    Column {
        spacing: 12
        SyModal {
            id: settings
            variant: "modal"
            title: "Settings"
            open: true
            closable: true
            enableModalMaximize: storyArgs.enableModalMaximize
            windowWidth: storyArgs.windowWidth
            windowHeight: storyArgs.windowHeight
            Text { text: "Drag the header, resize the edges, maximize with the icon."; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.modal.contentTextEnabled }
        }
        SyButton { text: "Open window"; onClicked: settings.setOpen() }
    }
}

03 closed

closed(detail) is the modal's only custom signal.

QML code

import QtQuick
import Syidax.Core

Item {
    component EventLog: Rectangle {
        id: logBox
        property var lines: []
        implicitWidth: 440
        implicitHeight: Math.max(56, logText.implicitHeight + 24)
        radius: 4; color: Theme.semantic.backgroundBold
        function log(value) { lines = lines.slice(-3).concat([String(value)]) }
        Text {
            id: logText; x: 12; y: 12; width: parent.width - 24
            text: logBox.lines.length ? logBox.lines.join("\n") : "Interact with the controls to see event results."
            wrapMode: Text.Wrap; color: Theme.semantic.textDefault
            font.family: Theme.monoFontFamily; font.pixelSize: 12
        }
    }

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height

    

    Column {
        spacing: 12
        SyModal {
            id: dialog
            title: "Save changes"
            closable: true
            onClosed: (detail) => output.log(("closed: %1 · value: %2").arg(detail.event).arg(detail.value))
            footer: [
                SyButton { id: exampleControl1;  text: "Discard"; onClicked: dialog.setCancel("discard") },
                SyButton { id: exampleControl2;  text: "Save"; variant: "primary"; onClicked: dialog.setOk("saved") }
            ]
            Text { text: "Save the edits before leaving?"; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.modal.contentTextEnabled }
        }
        SyButton { id: exampleControl3;  text: "Open"; onClicked: dialog.setOpen() }
        EventLog { id: output }
    }
}

04 setOpen · setClose · setCancel · setOk · setMaximum

- setOpen()

QML code

import QtQuick
import Syidax.Core

Item {
    component EventLog: Rectangle {
        id: logBox
        property var lines: []
        implicitWidth: 440
        implicitHeight: Math.max(56, logText.implicitHeight + 24)
        radius: 4; color: Theme.semantic.backgroundBold
        function log(value) { lines = lines.slice(-3).concat([String(value)]) }
        Text {
            id: logText; x: 12; y: 12; width: parent.width - 24
            text: logBox.lines.length ? logBox.lines.join("\n") : "Interact with the controls to see event results."
            wrapMode: Text.Wrap; color: Theme.semantic.textDefault
            font.family: Theme.monoFontFamily; font.pixelSize: 12
        }
    }

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    // Focused Gallery routes: keep only the selected API and its prerequisites.
    id: featureStory

    Column {
        spacing: 24
        SyModal { id: dialog; variant: "modal"; title: "Settings"; maskless: true; enableModalMaximize: true; onClosed: (detail) => output.log(detail.event); Text { text: "This cannot be undone."; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.modal.contentTextEnabled } }
        Flow {
            width: 480
            spacing: 8
            SyButton { id: exampleControl1;  visible: true; text: "dialog.setOpen()"; variant: "secondary"; size: "small"; onClicked: dialog.setOpen() }
            SyButton { id: exampleControl2;  visible: true; text: "dialog.setClose()"; variant: "secondary"; size: "small"; onClicked: dialog.setClose() }
            SyButton { id: exampleControl3;  visible: true; text: "dialog.setCancel()"; variant: "secondary"; size: "small"; onClicked: dialog.setCancel() }
            SyButton { visible: true; text: "dialog.setOk(\"done\")"; variant: "secondary"; size: "small"; onClicked: dialog.setOk("done") }
            SyButton { visible: true; text: "dialog.setMaximum()"; variant: "secondary"; size: "small"; onClicked: dialog.setMaximum() }
        }
        Text {
            text: "dialog.open === " + dialog.open + "   dialog.maximized === " + dialog.maximized
            font.family: Theme.monoFontFamily
            font.pixelSize: 12
            color: Theme.semantic.textSubtle
        }
        EventLog { id: output }
    }
}

05 Content-only dialog

Content-only dialog, configured with hideFooter.

Content-only dialog · Opened — Qt capture · image

QML code

import QtQuick
import Syidax.Core

Item {
    component EventLog: Rectangle {
        id: logBox
        property var lines: []
        implicitWidth: 440
        implicitHeight: Math.max(56, logText.implicitHeight + 24)
        radius: 4; color: Theme.semantic.backgroundBold
        function log(value) { lines = lines.slice(-3).concat([String(value)]) }
        Text {
            id: logText; x: 12; y: 12; width: parent.width - 24
            text: logBox.lines.length ? logBox.lines.join("\n") : "Interact with the controls to see event results."
            wrapMode: Text.Wrap; color: Theme.semantic.textDefault
            font.family: Theme.monoFontFamily; font.pixelSize: 12
        }
    }

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height

    property QtObject settings: QtObject {
        id: storyArgs
        property string variant: "dialog"
        property string title: "Delete this row?"
        property bool closable: true
        property bool hideFooter: true
        property bool maskClosable: false
        property bool maskless: false
        property bool enableModalMaximize: false
        property string animation: "none"
        property string cancelText: ""
        property string okText: ""
    }

    

    Column {
        spacing: 12
        SyModal {
            id: dialog
            variant: storyArgs.variant
            title: storyArgs.title
            closable: storyArgs.closable
            hideFooter: storyArgs.hideFooter
            maskClosable: storyArgs.maskClosable
            maskless: storyArgs.maskless
            enableModalMaximize: storyArgs.enableModalMaximize
            animation: storyArgs.animation
            cancelText: storyArgs.cancelText
            okText: storyArgs.okText
            onClosed: (detail) => output.log(detail.event)
            Text { text: "This cannot be undone."; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.modal.contentTextEnabled }
        }
        SyButton { text: "Open"; onClicked: dialog.setOpen() }
        EventLog { id: output }
    }

}

06 Maximizable dialog

Maximizable dialog, configured with enableModalMaximize, variant.

Maximizable dialog · Opened — Qt capture · image

QML code

import QtQuick
import Syidax.Core

Item {
    component EventLog: Rectangle {
        id: logBox
        property var lines: []
        implicitWidth: 440
        implicitHeight: Math.max(56, logText.implicitHeight + 24)
        radius: 4; color: Theme.semantic.backgroundBold
        function log(value) { lines = lines.slice(-3).concat([String(value)]) }
        Text {
            id: logText; x: 12; y: 12; width: parent.width - 24
            text: logBox.lines.length ? logBox.lines.join("\n") : "Interact with the controls to see event results."
            wrapMode: Text.Wrap; color: Theme.semantic.textDefault
            font.family: Theme.monoFontFamily; font.pixelSize: 12
        }
    }

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height

    property QtObject settings: QtObject {
        id: storyArgs
        property string variant: "modal"
        property string title: "Delete this row?"
        property bool closable: true
        property bool hideFooter: false
        property bool maskClosable: false
        property bool maskless: false
        property bool enableModalMaximize: true
        property string animation: "none"
        property string cancelText: ""
        property string okText: ""
    }

    

    Column {
        spacing: 12
        SyModal {
            id: dialog
            variant: storyArgs.variant
            title: storyArgs.title
            closable: storyArgs.closable
            hideFooter: storyArgs.hideFooter
            maskClosable: storyArgs.maskClosable
            maskless: storyArgs.maskless
            enableModalMaximize: storyArgs.enableModalMaximize
            animation: storyArgs.animation
            cancelText: storyArgs.cancelText
            okText: storyArgs.okText
            onClosed: (detail) => output.log(detail.event)
            Text { text: "This cannot be undone."; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.modal.contentTextEnabled }
        }
        SyButton { text: "Open"; onClicked: dialog.setOpen() }
        EventLog { id: output }
    }

}

07 Named confirmation actions

Named confirmation actions, configured with okText, cancelText.

Named confirmation actions · Opened — Qt capture · image

QML code

import QtQuick
import Syidax.Core

Item {
    component EventLog: Rectangle {
        id: logBox
        property var lines: []
        implicitWidth: 440
        implicitHeight: Math.max(56, logText.implicitHeight + 24)
        radius: 4; color: Theme.semantic.backgroundBold
        function log(value) { lines = lines.slice(-3).concat([String(value)]) }
        Text {
            id: logText; x: 12; y: 12; width: parent.width - 24
            text: logBox.lines.length ? logBox.lines.join("\n") : "Interact with the controls to see event results."
            wrapMode: Text.Wrap; color: Theme.semantic.textDefault
            font.family: Theme.monoFontFamily; font.pixelSize: 12
        }
    }

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height

    property QtObject settings: QtObject {
        id: storyArgs
        property string variant: "dialog"
        property string title: "Delete this row?"
        property bool closable: true
        property bool hideFooter: false
        property bool maskClosable: false
        property bool maskless: false
        property bool enableModalMaximize: false
        property string animation: "none"
        property string cancelText: "Keep editing"
        property string okText: "Publish"
    }

    

    Column {
        spacing: 12
        SyModal {
            id: dialog
            variant: storyArgs.variant
            title: storyArgs.title
            closable: storyArgs.closable
            hideFooter: storyArgs.hideFooter
            maskClosable: storyArgs.maskClosable
            maskless: storyArgs.maskless
            enableModalMaximize: storyArgs.enableModalMaximize
            animation: storyArgs.animation
            cancelText: storyArgs.cancelText
            okText: storyArgs.okText
            onClosed: (detail) => output.log(detail.event)
            Text { text: "This cannot be undone."; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.modal.contentTextEnabled }
        }
        SyButton { text: "Open"; onClicked: dialog.setOpen() }
        EventLog { id: output }
    }

}

08 Dialog without mask

Dialog without mask, configured with maskless.

Dialog without mask · Opened — Qt capture · image

QML code

import QtQuick
import Syidax.Core

Item {
    component EventLog: Rectangle {
        id: logBox
        property var lines: []
        implicitWidth: 440
        implicitHeight: Math.max(56, logText.implicitHeight + 24)
        radius: 4; color: Theme.semantic.backgroundBold
        function log(value) { lines = lines.slice(-3).concat([String(value)]) }
        Text {
            id: logText; x: 12; y: 12; width: parent.width - 24
            text: logBox.lines.length ? logBox.lines.join("\n") : "Interact with the controls to see event results."
            wrapMode: Text.Wrap; color: Theme.semantic.textDefault
            font.family: Theme.monoFontFamily; font.pixelSize: 12
        }
    }

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height

    property QtObject settings: QtObject {
        id: storyArgs
        property string variant: "dialog"
        property string title: "Delete this row?"
        property bool closable: true
        property bool hideFooter: false
        property bool maskClosable: false
        property bool maskless: true
        property bool enableModalMaximize: false
        property string animation: "none"
        property string cancelText: ""
        property string okText: ""
    }

    

    Column {
        spacing: 12
        SyModal {
            id: dialog
            variant: storyArgs.variant
            title: storyArgs.title
            closable: storyArgs.closable
            hideFooter: storyArgs.hideFooter
            maskClosable: storyArgs.maskClosable
            maskless: storyArgs.maskless
            enableModalMaximize: storyArgs.enableModalMaximize
            animation: storyArgs.animation
            cancelText: storyArgs.cancelText
            okText: storyArgs.okText
            onClosed: (detail) => output.log(detail.event)
            Text { text: "This cannot be undone."; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.modal.contentTextEnabled }
        }
        SyButton { text: "Open"; onClicked: dialog.setOpen() }
        EventLog { id: output }
    }

}

API 90

Hover or select an item for its QML example and copy button.

Properties

Type	Default	Description
bool	`false`	Shows / hides the sheet; `setOpen()` and the close methods set it.
string	`"dialog"`	`"dialog"` (fixed, centred) or `"modal"` (drag, resize, maximise).
string	`"Modal"`	The header text; `""` hides it.
list (alias)	—	Items after the title
list (alias)	—	items replacing the default buttons.
—	—	The body items (padded 12 px, clipped).
string	`""`	Texts of the default buttons (`""` = "Cancel" / "Ok").
string	`""`	Texts of the default buttons (`""` = "Cancel" / "Ok").
bool	`false`	Shows the × and lets Escape close (both event `"close"`); without it Escape is ignored.
bool	`false`	Removes the footer row.
bool	`false`	No mask: the application behind stays visible and clickable.
bool	`false`	A click on the mask closes with `"close"`.
bool	`false`	The maximise icon and `setMaximum()` (`"modal"` only).
real	`-1`	Position on the sheet; `-1` = centred.
real	`-1`	Position on the sheet; `-1` = centred.
real	`0`	Size; `0` = content size (min 200 wide).
real	`0`	Size; `0` = content size (min 200 wide).
string	`"none"`	Entrance / exit: `none` · `fade` · `fade-scale` · `zoom` · `pop` · `slide-top/bottom/left/right` · `slide-fade-…` · `slide` · `slide-fade` · `reveal`.
string	`"fast"`	`x-fast` 100 · `fast` 150 · `medium` 250 · `slow` 350 · `x-slow` 500 ms.
string	`"top"`	Side and distance of a direction-less slide.
real	`24`	Side and distance of a direction-less slide.
color	`Theme.semantic.backdropBackground`	The mask colour.
bool (read-only)	`false`	Whether a `"modal"` window fills the sheet.
bool (read-only)	—	`variant === "modal"` · `footer` has items.
bool (read-only)	—	`variant === "modal"` · `footer` has items.
string	`"closed"`	`closed` · `opening` · `open` · `closing` · whether the sheet is visible.
bool (read-only)	`"closed"`	`closed` · `opening` · `open` · `closing` · whether the sheet is visible.
Item (read-only)	—	The full-window sheet (its `width` / `height` are the window's).
real	—	The restore geometry (bound to the window properties until a drag / resize).
real	—	The restore geometry (bound to the window properties until a drag / resize).
real	—	The restore geometry (bound to the window properties until a drag / resize).
real	—	The restore geometry (bound to the window properties until a drag / resize).
real (read-only)	—	What the content needs.
real (read-only)	—	What the content needs.
string	`"close"`	What the next `closed` will report.
var	`undefined`	What the next `closed` will report.

Methods

Method	Description
	`open = true`; re-places the window; plays the entrance.
	Close with event `"close"` / `"cancel"` / `"ok"` and that `value`.
	Close with event `"close"` / `"cancel"` / `"ok"` and that `value`.
	Close with event `"close"` / `"cancel"` / `"ok"` and that `value`.
	Toggles `maximized` (`"modal"` + `enableModalMaximize` only).
	Re-binds the geometry to `windowX` / `windowY` / `windowWidth` / `windowHeight`.

Signals

Signal	Arguments	When
	`detail: { event, value, maximized, position: { top, left, width, height } }`	After the exit animation of every close; `event` is `"ok"`, `"cancel"` or `"close"`.
	—	`open` changed (before the animation).
	—	The entrance animation finished (`phase` is `"open"`).
	—	The exit animation finished and the sheet is hidden; just before `closed`.
	—	A click on the mask outside the panel — also when `maskClosable` is off.
	—	Escape on the sheet (the modal then closes when `closable`).

Behavior

Item	Behavior / conditions
	The modal item is `visible: false` and occupies nothing in its parent.
	Shows / hides the sheet; `setOpen()` and the close methods set it.
	When `open` becomes `true`, a full-window sheet (a child of the window's overlay, z 100) is shown with a mask (`mask`, bound to `!maskless`; colour `maskColor`) and the panel.
	No mask: the application behind stays visible and clickable.
	The mask colour.
	A click on the mask outside the panel — also when `maskClosable` is off.
	`open = true`; re-places the window; plays the entrance.
	`setOpen()` and `open = true` are the same; `setClose(value)` / `setCancel(value)` / `setOk(value)` store the event and value and set `open = false`.
	`setOpen()` and `open = true` are the same; `setClose(value)` / `setCancel(value)` / `setOk(value)` store the event and value and set `open = false`.
	`setOpen()` and `open = true` are the same; `setClose(value)` / `setCancel(value)` / `setOk(value)` store the event and value and set `open = false`.
	Shows the × and lets Escape close (both event `"close"`); without it Escape is ignored.
	A click on the mask closes with `"close"`.
	The exit animation finished and the sheet is hidden; just before `closed`.
	After the exit animation of every close; `event` is `"ok"`, `"cancel"` or `"close"`.
	Entrance / exit: `none` · `fade` · `fade-scale` · `zoom` · `pop` · `slide-top/bottom/left/right` · `slide-fade-…` · `slide` · `slide-fade` · `reveal`.
	`animation` names the entrance and exit: `"none"` (default), `"fade"`, `"fade-scale"` (from 95 %), `"zoom"` (from 80 %), `"pop"` (from 90 % with an overshoot), `"slide-top"` / `"slide-bottom"` / `"slide-left"` / `"slide-right"` (24 px, `slideDistance`), `"slide-fade-…"` (slide plus fade), `"slide"` / `"slide-fade"` / `"reveal"` (from `slideSide`, default `"top"`).
	`animation` names the entrance and exit: `"none"` (default), `"fade"`, `"fade-scale"` (from 95 %), `"zoom"` (from 80 %), `"pop"` (from 90 % with an overshoot), `"slide-top"` / `"slide-bottom"` / `"slide-left"` / `"slide-right"` (24 px, `slideDistance`), `"slide-fade-…"` (slide plus fade), `"slide"` / `"slide-fade"` / `"reveal"` (from `slideSide`, default `"top"`).
	`x-fast` 100 · `fast` 150 · `medium` 250 · `slow` 350 · `x-slow` 500 ms.
	`phase` reports `"closed"` → `"opening"` → `"open"` → `"closing"`; `entered()` fires at the end of the entrance.
	The entrance animation finished (`phase` is `"open"`).
	The panel is `panelW × panelH` at `panelX, panelY` on the sheet: `windowWidth` / `windowHeight` when > 0, else the content size (`contentWidth` = body + 24 px, at least 200; `contentHeight` = 44 px header + the body plus 24 px (at least 50 px) + 44 px footer when shown); `windowX` / `windowY` when ≥ 0, else centred.
	The panel is `panelW × panelH` at `panelX, panelY` on the sheet: `windowWidth` / `windowHeight` when > 0, else the content size (`contentWidth` = body + 24 px, at least 200; `contentHeight` = 44 px header + the body plus 24 px (at least 50 px) + 44 px footer when shown); `windowX` / `windowY` when ≥ 0, else centred.
	The panel is `panelW × panelH` at `panelX, panelY` on the sheet: `windowWidth` / `windowHeight` when > 0, else the content size (`contentWidth` = body + 24 px, at least 200; `contentHeight` = 44 px header + the body plus 24 px (at least 50 px) + 44 px footer when shown); `windowX` / `windowY` when ≥ 0, else centred.
	The panel is `panelW × panelH` at `panelX, panelY` on the sheet: `windowWidth` / `windowHeight` when > 0, else the content size (`contentWidth` = body + 24 px, at least 200; `contentHeight` = 44 px header + the body plus 24 px (at least 50 px) + 44 px footer when shown); `windowX` / `windowY` when ≥ 0, else centred.
	The panel is `panelW × panelH` at `panelX, panelY` on the sheet: `windowWidth` / `windowHeight` when > 0, else the content size (`contentWidth` = body + 24 px, at least 200; `contentHeight` = 44 px header + the body plus 24 px (at least 50 px) + 44 px footer when shown); `windowX` / `windowY` when ≥ 0, else centred. The body is clipped and padded 12 px; give wide content an explicit width or set `windowWidth`.
	The panel is `panelW × panelH` at `panelX, panelY` on the sheet: `windowWidth` / `windowHeight` when > 0, else the content size (`contentWidth` = body + 24 px, at least 200; `contentHeight` = 44 px header + the body plus 24 px (at least 50 px) + 44 px footer when shown); `windowX` / `windowY` when ≥ 0, else centred.
	The panel is `panelW × panelH` at `panelX, panelY` on the sheet: `windowWidth` / `windowHeight` when > 0, else the content size (`contentWidth` = body + 24 px, at least 200; `contentHeight` = 44 px header + the body plus 24 px (at least 50 px) + 44 px footer when shown); `windowX` / `windowY` when ≥ 0, else centred.
	The panel is `panelW × panelH` at `panelX, panelY` on the sheet: `windowWidth` / `windowHeight` when > 0, else the content size (`contentWidth` = body + 24 px, at least 200; `contentHeight` = 44 px header + the body plus 24 px (at least 50 px) + 44 px footer when shown); `windowX` / `windowY` when ≥ 0, else centred.
	The panel is `panelW × panelH` at `panelX, panelY` on the sheet: `windowWidth` / `windowHeight` when > 0, else the content size (`contentWidth` = body + 24 px, at least 200; `contentHeight` = 44 px header + the body plus 24 px (at least 50 px) + 44 px footer when shown); `windowX` / `windowY` when ≥ 0, else centred.
	The panel is `panelW × panelH` at `panelX, panelY` on the sheet: `windowWidth` / `windowHeight` when > 0, else the content size (`contentWidth` = body + 24 px, at least 200; `contentHeight` = 44 px header + the body plus 24 px (at least 50 px) + 44 px footer when shown); `windowX` / `windowY` when ≥ 0, else centred.
	Re-binds the geometry to `windowX` / `windowY` / `windowWidth` / `windowHeight`.
	`"dialog"` (fixed, centred) or `"modal"` (drag, resize, maximise).
	The maximise icon and `setMaximum()` (`"modal"` only).
	Whether a `"modal"` window fills the sheet.
	Toggles `maximized` (`"modal"` + `enableModalMaximize` only).
	The header text; `""` hides it.
	The header is 44 px: `title` (16 px, medium, elided), then the `header` items, then the maximise icon and the ×.
	The footer is 44 px with the `footer` items right-aligned; when `footer` is empty, the default Cancel (`cancelText`, default "Cancel") and Ok (`okText`, default "Ok", primary) buttons are shown; `hideFooter` removes the footer entirely.
	The footer is 44 px with the `footer` items right-aligned; when `footer` is empty, the default Cancel (`cancelText`, default "Cancel") and Ok (`okText`, default "Ok", primary) buttons are shown; `hideFooter` removes the footer entirely.
	The footer is 44 px with the `footer` items right-aligned; when `footer` is empty, the default Cancel (`cancelText`, default "Cancel") and Ok (`okText`, default "Ok", primary) buttons are shown; `hideFooter` removes the footer entirely.
	Removes the footer row.

Keyboard

Item	Behavior / conditions
	`SyDrawer` (a panel at a window edge on the same sheet base), `SyModeless` (floating windows inside an item), `SyPopconfirm` (an anchored question), `SyButton` (the footer).

One design language.Native applications.

Components

From download to your first window

C++ · CMake

Python · PySide6

Tested Windows configurations

Two complete application examples

See the components in context

The native Gallery

QML Core

Troubleshooting

Modal

Supported QML types

Learn by example

01 Basic composition

02 variant · enableModalMaximize · windowWidth · windowHeight

03 closed

04 setOpen · setClose · setCancel · setOk · setMaximum

05 Content-only dialog

06 Maximizable dialog

07 Named confirmation actions

08 Dialog without mask

Properties

Methods

Signals

Behavior

Keyboard

One design language.
Native applications.