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

Dropdown

Open a floating panel from a trigger to show a menu, custom controls or a small form.

import Syidax.Core.Dropdown

Supported QML types

Type	Definition / role
	Trigger and anchored popup for menu content.

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

01 Basic composition

SyDropdown is a titled box with a chevron that opens whatever is declared inside it on a floating surface under (or over) the box — a SyMenu, a column of buttons, a form, anything.

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 title: "Action"
        property string size: "medium"
        property bool borderless: false
        property bool disabled: false
        property string position: "bottomLeft"
        property string trigger: "click"
        property string tooltip: ""
    }

    

    Column {
        spacing: 12
        SyDropdown {
            id: actions
            title: storyArgs.title
            size: storyArgs.size
            borderless: storyArgs.borderless
            disabled: storyArgs.disabled
            position: storyArgs.position
            trigger: storyArgs.trigger
            tooltip: storyArgs.tooltip
            onSelected: (detail) => output.log(detail)
            Column {
                SyButton { id: exampleControl1;  text: "Edit"; variant: "borderless"; width: 140; onClicked: actions.select("edit") }
                SyButton { id: exampleControl2;  text: "Duplicate"; variant: "borderless"; width: 140; onClicked: actions.select("duplicate") }
                SyButton { id: exampleControl3;  text: "Remove"; variant: "borderless"; width: 140; onClicked: actions.select("remove") }
            }
        }
        EventLog { id: output }
    }

}

02 size · borderless

Compare the configuration and result of size · borderless.

size · borderless · 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

    Row {
        spacing: 16
        SyDropdown { id: featureTarget0; visible: true; title: "Action"; size: "small"; SyButton { text: "…"; variant: "borderless" } }
        SyDropdown { title: "Action"; SyButton { text: "…"; variant: "borderless" } }
        SyDropdown { id: featureTarget1; visible: true; title: "Action"; size: "large"; SyButton { text: "…"; variant: "borderless" } }
        SyDropdown { id: featureTarget2; visible: true; title: "Action"; borderless: true; SyButton { text: "…"; variant: "borderless" } }
    }
}

03 position · trigger

position places the surface relative to the box: "bottomLeft" (the default) and "bottomRight" under it, aligned to the box's left or right edge; "topLeft" and "topRight" over it.

position · trigger · 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 string position: "bottomLeft"
        property string trigger: "click"
    }

    

    Item {
        width: 360
        height: 160
        SyDropdown { id: featureTarget0;
            anchors.centerIn: parent
            title: "Action"; position: storyArgs.position; trigger: storyArgs.trigger
            Column {
                SyButton { text: "Edit"; variant: "borderless"; width: 140 }
                SyButton { text: "Remove"; variant: "borderless"; width: 140 }
            }
        }
    }
}

04 selected

SyDropdown has one signal, selected(detail).

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
        SyDropdown {
            id: sort
            title: "Sort by"
            onSelected: (detail) => output.log(("selected: %1").arg(detail))
            Column {
                SyButton { id: exampleControl1;  text: "Name"; variant: "borderless"; width: 140; onClicked: sort.select("name") }
                SyButton { id: exampleControl2;  text: "Date"; variant: "borderless"; width: 140; onClicked: sort.select("date") }
            }
        }
        EventLog { id: output }
    }
}

05 open · close · select

open() shows the surface regardless of trigger; it is refused while the dropdown is disabled.

open · close · select · 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
    // Focused Gallery routes: keep only the selected API and its prerequisites.
    id: featureStory

    Column {
        spacing: 24
        Item {
            width: 560; height: 190
            SyDropdown {
                x: 24; y: 24
 id: actions; title: "Action"; onSelected: (detail) => output.log(detail); SyButton { visible: true; text: "Edit"; variant: "borderless"; width: 140; onClicked: actions.select("edit") } }
        }
        Row {
            objectName: "exampleCommands"

            spacing: 8
            SyButton { id: exampleControl1;  visible: true; text: "actions.open()"; variant: "secondary"; size: "small"; onClicked: actions.open() }
            SyButton { id: exampleControl2;  visible: true; text: "actions.close()"; variant: "secondary"; size: "small"; onClicked: actions.close() }
            SyButton { id: exampleControl3;  visible: true; text: "actions.select(\"edit\")"; variant: "secondary"; size: "small"; onClicked: actions.select("edit") }
        }
        Text {
            text: "actions.isOpen === " + actions.isOpen
            font.family: Theme.monoFontFamily
            font.pixelSize: 12
            color: Theme.semantic.textSubtle
        }
        EventLog { id: output }
    }
}

06 Compact actions

Compact actions, configured with size, borderless.

Compact 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 title: "Action"
        property string size: "small"
        property bool borderless: true
        property bool disabled: false
        property string position: "bottomLeft"
        property string trigger: "click"
        property string tooltip: ""
    }

    

    Column {
        spacing: 12
        SyDropdown {
            id: actions
            title: storyArgs.title
            size: storyArgs.size
            borderless: storyArgs.borderless
            disabled: storyArgs.disabled
            position: storyArgs.position
            trigger: storyArgs.trigger
            tooltip: storyArgs.tooltip
            onSelected: (detail) => output.log(detail)
            Column {
                SyButton { text: "Edit"; variant: "borderless"; width: 140; onClicked: actions.select("edit") }
                SyButton { text: "Duplicate"; variant: "borderless"; width: 140; onClicked: actions.select("duplicate") }
                SyButton { text: "Remove"; variant: "borderless"; width: 140; onClicked: actions.select("remove") }
            }
        }
        EventLog { id: output }
    }

}

07 Hover trigger

Hover trigger, configured with trigger.

Hover trigger · 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 title: "Action"
        property string size: "medium"
        property bool borderless: false
        property bool disabled: false
        property string position: "bottomLeft"
        property string trigger: "hover"
        property string tooltip: ""
    }

    

    Column {
        spacing: 12
        SyDropdown {
            id: actions
            title: storyArgs.title
            size: storyArgs.size
            borderless: storyArgs.borderless
            disabled: storyArgs.disabled
            position: storyArgs.position
            trigger: storyArgs.trigger
            tooltip: storyArgs.tooltip
            onSelected: (detail) => output.log(detail)
            Column {
                SyButton { text: "Edit"; variant: "borderless"; width: 140; onClicked: actions.select("edit") }
                SyButton { text: "Duplicate"; variant: "borderless"; width: 140; onClicked: actions.select("duplicate") }
                SyButton { text: "Remove"; variant: "borderless"; width: 140; onClicked: actions.select("remove") }
            }
        }
        EventLog { id: output }
    }

}

08 Unavailable actions

Unavailable actions, configured with disabled.

Unavailable actions · Result — Qt capture · image

Default execution

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 title: "Action"
        property string size: "medium"
        property bool borderless: false
        property bool disabled: true
        property string position: "bottomLeft"
        property string trigger: "click"
        property string tooltip: ""
    }

    

    Column {
        spacing: 12
        SyDropdown {
            id: actions
            title: storyArgs.title
            size: storyArgs.size
            borderless: storyArgs.borderless
            disabled: storyArgs.disabled
            position: storyArgs.position
            trigger: storyArgs.trigger
            tooltip: storyArgs.tooltip
            onSelected: (detail) => output.log(detail)
            Column {
                SyButton { text: "Edit"; variant: "borderless"; width: 140; onClicked: actions.select("edit") }
                SyButton { text: "Duplicate"; variant: "borderless"; width: 140; onClicked: actions.select("duplicate") }
                SyButton { text: "Remove"; variant: "borderless"; width: 140; onClicked: actions.select("remove") }
            }
        }
        EventLog { id: output }
    }

}

API 29

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

Properties

Type	Default	Description
list (default property)	—	What the surface shows (re-parented into it)
string	`""`	The box text; hidden when empty
string	`"medium"`	`small` 24 px · `medium` 32 px · `large` 40 px
bool	`false`	No background or border until the box has focus
bool	`false`	Greyed; never opens — clicks, hover, keys and `open()` ignored
string	`""`	Text shown after hovering the box for 500 ms
string	`"bottomLeft"`	`bottomLeft` · `bottomRight` · `topLeft` · `topRight`; flips when there is no room
string	`"click"`	`click` (toggle; closes on Escape or a press outside) · `hover` (closes 100 ms after the pointer leaves)
bool (read-only)	—	The surface is showing
bool (read-only)	—	The box has keyboard focus
bool (read-only)	—	the pointer is over the box

Methods

Method	Description
	Emits `selected(detail)` and closes the surface; works while closed too
	Shows the surface whatever the trigger; refused while disabled
	Hides the surface

Signals

Signal	Arguments	When
	`detail` (anything)	`select(detail)` was called — by a SyMenu pick inside (`{ value, label }`) or by your own item; the surface closes right after. Not on open or close

Behavior

Item	Behavior / conditions
	The box text; hidden when empty
	`small` 24 px · `medium` 32 px · `large` 40 px
	Greyed; never opens — clicks, hover, keys and `open()` ignored
	No background or border until the box has focus
	Text shown after hovering the box for 500 ms
	`click` (toggle; closes on Escape or a press outside) · `hover` (closes 100 ms after the pointer leaves)
	Shows the surface whatever the trigger; refused while disabled
	`bottomLeft` · `bottomRight` · `topLeft` · `topRight`; flips when there is no room
	It has 4 px of padding, is at least as wide as the box and otherwise takes the size of its content; the content is re-parented into it, so `parent` inside is the surface's content item, not the dropdown — give your items explicit sizes.
	Emits `selected(detail)` and closes the surface; works while closed too
	`select(detail)` was called — by a SyMenu pick inside (`{ value, label }`) or by your own item; the surface closes right after. Not on open or close
	The surface is showing
	The box is in the Tab order unless disabled; Space / Enter toggle, Down opens, Escape closes. Keys inside the content belong to the content.

Keyboard

Item	Behavior / conditions
	`SyMenu` is the usual content; `SySelect` when the box must display the chosen value; `SyPopover` for a non-interactive surface from any item.

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

Dropdown

Supported QML types

Learn by example

01 Basic composition

02 size · borderless

03 position · trigger

04 selected

05 open · close · select

06 Compact actions

07 Hover trigger

08 Unavailable actions

Properties

Methods

Signals

Behavior

Keyboard

One design language.
Native applications.