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

Collapse

Organize content into sections that users can expand or collapse as needed.

import Syidax.Core.Collapse

Supported QML types

Type	Definition / role
	Container that coordinates expandable SyCollapsePanel sections.
	One section with a clickable header and collapsible content.

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

01 Basic composition

SyCollapse stacks SyCollapsePanel sections: each one is a 40 px header that folds the content declared inside it.

Basic composition · Default — Qt capture · image

Default execution

QML code

import QtQuick
import Syidax.Core

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

    property QtObject settings: QtObject {
        id: storyArgs
        property bool accordion: false
        property bool borderless: false
        property bool ghost: false
        property bool disabled: false
        property bool arrow: false
    }

    readonly property string arrowProp: storyArgs.arrow ? "; arrow: true" : ""
    readonly property string members: [
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("Shipping") + "; active: true" + arrowProp,
        "    Text { text: " + JSON.stringify("Orders ship within two business days.") + " }",
        "}",
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("Returns") + arrowProp,
        "    Text { text: " + JSON.stringify("Returns are accepted within 30 days.") + " }",
        "}",
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("Payment") + arrowProp,
        "    Text { text: " + JSON.stringify("Cards and bank transfer.") + " }",
        "}"
    ].join("\n")

    SyCollapse {
        accordion: storyArgs.accordion
        borderless: storyArgs.borderless
        ghost: storyArgs.ghost
        disabled: storyArgs.disabled
        SyCollapsePanel {
            title: "Shipping"; active: true; arrow: storyArgs.arrow
            Text { text: "Orders ship within two business days."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
        SyCollapsePanel {
            title: "Returns"; arrow: storyArgs.arrow
            Text { text: "Returns are accepted within 30 days."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
        SyCollapsePanel {
            title: "Payment"; arrow: storyArgs.arrow
            Text { text: "Cards and bank transfer."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
    }

}

02 active · arrow · disabled · ghost

Per panel: active: true opens it at the start (silently — no changed; in an accordion stack declare only one panel active, since a preset active does not close the others).

active · arrow · disabled · ghost · Default — Qt capture · image

Default execution

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

    SyCollapse {
        width: 420
        SyCollapsePanel { id: featureTarget0; title: "Open at the start"; active: true; Text { text: "Orders ship within two business days."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
        SyCollapsePanel { id: featureTarget1; title: "Chevron on the left"; arrow: true; Text { text: "Returns are accepted within 30 days."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
        SyCollapsePanel { id: featureTarget2; title: "Disabled"; disabled: true; Text { text: "Cards and bank transfer."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
        SyCollapsePanel { id: featureTarget3; title: "Ghost"; ghost: true; Text { text: "Cards and bank transfer."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
    }
}

03 changed

Every SyCollapsePanel emits changed(detail) with detail = { active: bool } when it opens (true) or closes (false)

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

    

    Column {
        spacing: 12
        SyCollapse {
            width: 420
            SyCollapsePanel {
                id: shipping
                title: "Shipping"
                onChanged: (detail) => output.log(("%1 changed: %2").arg(shipping.title).arg(detail.active))
                Text { text: "Orders ship within two business days."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
            }
            SyCollapsePanel {
                id: returns
                title: "Returns"
                onChanged: (detail) => output.log(("%1 changed: %2").arg(returns.title).arg(detail.active))
                Text { text: "Returns are accepted within 30 days."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
            }
        }
        EventLog { id: output }
    }
}

04 openAll · closeAll · openPanel · closePanel · toggle

Compare the configuration and result of openAll · closeAll · openPanel · closePanel · toggle.

openAll · closeAll · openPanel · closePanel · toggle · Default — 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

    Column {
        spacing: 24
        SyCollapse {
            id: faq
            width: 420
            SyCollapsePanel { id: first; title: "Shipping"; Text { text: "Orders ship within two business days."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyCollapsePanel { id: second; title: "Returns"; Text { text: "Returns are accepted within 30 days."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
        }
        Flow {
            width: 460
            spacing: 8
            SyButton { id: exampleControl1;  visible: true; text: "faq.openAll()"; variant: "secondary"; size: "small"; onClicked: faq.openAll() }
            SyButton { id: exampleControl2;  visible: true; text: "faq.closeAll()"; variant: "secondary"; size: "small"; onClicked: faq.closeAll() }
            SyButton { id: exampleControl3;  visible: true; text: "faq.openPanel(0)"; variant: "secondary"; size: "small"; onClicked: faq.openPanel(0) }
            SyButton { visible: true; text: "faq.closePanel(0)"; variant: "secondary"; size: "small"; onClicked: faq.closePanel(0) }
            SyButton { visible: true; text: "second.toggle()"; variant: "secondary"; size: "small"; onClicked: second.toggle() }
        }
        Text {
            text: "first.active === " + first.active + "   second.active === " + second.active
            font.family: Theme.monoFontFamily
            font.pixelSize: 12
            color: Theme.semantic.textSubtle
        }
    }
}

05 Accordion

Accordion, configured with accordion.

Default execution

QML code

import QtQuick
import Syidax.Core

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

    property QtObject settings: QtObject {
        id: storyArgs
        property bool accordion: true
        property bool borderless: false
        property bool ghost: false
        property bool disabled: false
        property bool arrow: false
    }

    readonly property string arrowProp: storyArgs.arrow ? "; arrow: true" : ""
    readonly property string members: [
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("Shipping") + "; active: true" + arrowProp,
        "    Text { text: " + JSON.stringify("Orders ship within two business days.") + " }",
        "}",
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("Returns") + arrowProp,
        "    Text { text: " + JSON.stringify("Returns are accepted within 30 days.") + " }",
        "}",
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("Payment") + arrowProp,
        "    Text { text: " + JSON.stringify("Cards and bank transfer.") + " }",
        "}"
    ].join("\n")

    SyCollapse {
        accordion: storyArgs.accordion
        borderless: storyArgs.borderless
        ghost: storyArgs.ghost
        disabled: storyArgs.disabled
        SyCollapsePanel {
            title: "Shipping"; active: true; arrow: storyArgs.arrow
            Text { text: "Orders ship within two business days."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
        SyCollapsePanel {
            title: "Returns"; arrow: storyArgs.arrow
            Text { text: "Returns are accepted within 30 days."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
        SyCollapsePanel {
            title: "Payment"; arrow: storyArgs.arrow
            Text { text: "Cards and bank transfer."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
    }

}

06 Ghost panels

Ghost panels, configured with ghost.

Ghost panels · Result — Qt capture · image

Default execution

QML code

import QtQuick
import Syidax.Core

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

    property QtObject settings: QtObject {
        id: storyArgs
        property bool accordion: false
        property bool borderless: false
        property bool ghost: true
        property bool disabled: false
        property bool arrow: false
    }

    readonly property string arrowProp: storyArgs.arrow ? "; arrow: true" : ""
    readonly property string members: [
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("Shipping") + "; active: true" + arrowProp,
        "    Text { text: " + JSON.stringify("Orders ship within two business days.") + " }",
        "}",
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("Returns") + arrowProp,
        "    Text { text: " + JSON.stringify("Returns are accepted within 30 days.") + " }",
        "}",
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("Payment") + arrowProp,
        "    Text { text: " + JSON.stringify("Cards and bank transfer.") + " }",
        "}"
    ].join("\n")

    SyCollapse {
        accordion: storyArgs.accordion
        borderless: storyArgs.borderless
        ghost: storyArgs.ghost
        disabled: storyArgs.disabled
        SyCollapsePanel {
            title: "Shipping"; active: true; arrow: storyArgs.arrow
            Text { text: "Orders ship within two business days."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
        SyCollapsePanel {
            title: "Returns"; arrow: storyArgs.arrow
            Text { text: "Returns are accepted within 30 days."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
        SyCollapsePanel {
            title: "Payment"; arrow: storyArgs.arrow
            Text { text: "Cards and bank transfer."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
    }

}

07 Borderless panels

Borderless panels, configured with borderless.

Borderless panels · Result — Qt capture · image

Default execution

QML code

import QtQuick
import Syidax.Core

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

    property QtObject settings: QtObject {
        id: storyArgs
        property bool accordion: false
        property bool borderless: true
        property bool ghost: false
        property bool disabled: false
        property bool arrow: false
    }

    readonly property string arrowProp: storyArgs.arrow ? "; arrow: true" : ""
    readonly property string members: [
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("Shipping") + "; active: true" + arrowProp,
        "    Text { text: " + JSON.stringify("Orders ship within two business days.") + " }",
        "}",
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("Returns") + arrowProp,
        "    Text { text: " + JSON.stringify("Returns are accepted within 30 days.") + " }",
        "}",
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("Payment") + arrowProp,
        "    Text { text: " + JSON.stringify("Cards and bank transfer.") + " }",
        "}"
    ].join("\n")

    SyCollapse {
        accordion: storyArgs.accordion
        borderless: storyArgs.borderless
        ghost: storyArgs.ghost
        disabled: storyArgs.disabled
        SyCollapsePanel {
            title: "Shipping"; active: true; arrow: storyArgs.arrow
            Text { text: "Orders ship within two business days."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
        SyCollapsePanel {
            title: "Returns"; arrow: storyArgs.arrow
            Text { text: "Returns are accepted within 30 days."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
        SyCollapsePanel {
            title: "Payment"; arrow: storyArgs.arrow
            Text { text: "Cards and bank transfer."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
    }

}

08 Disabled panels

Disabled panels, configured with disabled.

Disabled panels · Result — Qt capture · image

Default execution

QML code

import QtQuick
import Syidax.Core

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

    property QtObject settings: QtObject {
        id: storyArgs
        property bool accordion: false
        property bool borderless: false
        property bool ghost: false
        property bool disabled: true
        property bool arrow: false
    }

    readonly property string arrowProp: storyArgs.arrow ? "; arrow: true" : ""
    readonly property string members: [
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("Shipping") + "; active: true" + arrowProp,
        "    Text { text: " + JSON.stringify("Orders ship within two business days.") + " }",
        "}",
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("Returns") + arrowProp,
        "    Text { text: " + JSON.stringify("Returns are accepted within 30 days.") + " }",
        "}",
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("Payment") + arrowProp,
        "    Text { text: " + JSON.stringify("Cards and bank transfer.") + " }",
        "}"
    ].join("\n")

    SyCollapse {
        accordion: storyArgs.accordion
        borderless: storyArgs.borderless
        ghost: storyArgs.ghost
        disabled: storyArgs.disabled
        SyCollapsePanel {
            title: "Shipping"; active: true; arrow: storyArgs.arrow
            Text { text: "Orders ship within two business days."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
        SyCollapsePanel {
            title: "Returns"; arrow: storyArgs.arrow
            Text { text: "Returns are accepted within 30 days."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
        SyCollapsePanel {
            title: "Payment"; arrow: storyArgs.arrow
            Text { text: "Cards and bank transfer."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
    }

}

API 55

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

Properties · SyCollapse

Type	Default	Description
list (default property)	—	The panels declared inside, in order
bool	`false`	One panel open at a time: opening one closes the others; `openAll()` ignored
bool	`false`	No borders on the panels (backgrounds stay)
bool	`false`	No borders and no backgrounds on every panel
bool	`false`	Every header inert
bool	`false`	Applies to every panel (each panel's `effectiveFullheight` = its own or the stack's)
var	`[]`	The collected panels — read `panels()`

Properties · SyCollapsePanel

Type	Default	Description
list (default property)	—	The body: what the panel folds
list	—	Items placed in the header after the title
string	`""`	The header text (hidden when empty)
bool	`false`	Open. Set it to open or close silently; the user and the methods change it and emit `changed`
bool	`false`	The chevron on the left, before the title, instead of the right end
bool	`false`	Header greyed and inert; `toggle()` / `open()` ignored, `close()` allowed
bool	`false`	This panel without border and backgrounds
bool	`false`	The open body is measured by the children's bounding height alone (min 18 px); `effectiveFullheight` (read-only) is this or the stack's `fullheight`
bool (read-only)	—	The panel's or the stack's `disabled` · `ghost` · the stack's `borderless`
bool (read-only)	—	The panel's or the stack's `disabled` · `ghost` · the stack's `borderless`
bool (read-only)	—	The panel's or the stack's `disabled` · `ghost` · the stack's `borderless`
bool (read-only)	—	Pointer over the header
bool (read-only)	—	the header has keyboard focus
var	`null`	The owning stack (set by the stack)

Methods

Method	Description
	`open()` on every panel; ignored when `accordion` is on. Disabled panels stay closed
	`close()` on every panel
	`open()` / `close()` on the panel at `index` (0-based, among the stack's panels); unknown index: nothing
	`open()` / `close()` on the panel at `index` (0-based, among the stack's panels); unknown index: nothing
	Returns the panels in order
	`close()` when open, else `open()`; ignored while disabled
	Opens and emits `changed({ active: true })`; ignored while disabled or already open; closes the others under accordion
	Closes and emits `changed({ active: false })`; ignored when already closed; allowed while disabled

Signals

Signal	Arguments	When
	`detail: { active: bool }`	The panel opened or closed by the user, by its methods, by the stack's methods, or by the accordion rule. Not when `active` is set from a binding, and not when a call changes nothing

Signals

Item	Behavior / conditions
	`SyCollapse` has no signals of its own.

Behavior

Item	Behavior / conditions
	Open. Set it to open or close silently; the user and the methods change it and emit `changed`
	The panel opened or closed by the user, by its methods, by the stack's methods, or by the accordion rule. Not when `active` is set from a binding, and not when a call changes nothing
	One panel open at a time: opening one closes the others; `openAll()` ignored
	Opens and emits `changed({ active: true })`; ignored while disabled or already open; closes the others under accordion
	With `accordion: true` on the stack, opening a panel (by the user or by `open()` / `openPanel()`) closes every other panel, each of which emits `changed({ active: false })`.
	`open()` on every panel; ignored when `accordion` is on. Disabled panels stay closed
	The chevron on the left, before the title, instead of the right end
	The header text (hidden when empty)
	Items placed in the header after the title
	Give the content a width (`width: parent.width`) so text wraps.
	No borders on the panels (backgrounds stay)
	No borders and no backgrounds on every panel
	Every header inert
	Header greyed and inert; `toggle()` / `open()` ignored, `close()` allowed
	`close()` when open, else `open()`; ignored while disabled
	Closes and emits `changed({ active: false })`; ignored when already closed; allowed while disabled
	`close()` on every panel
	`close()`, `closeAll()` and `closePanel()` still close a disabled panel.
	Tab reaches the enabled headers; Space / Enter toggle the focused one.
	Applies to every panel (each panel's `effectiveFullheight` = its own or the stack's)
	`fullheight` on the stack reaches every panel (a panel's `effectiveFullheight` is its own `fullheight` or the stack's): the open body is then measured by the children's bounding height alone (at least 18 px) instead of their offset plus height; it rarely makes a visible difference.
	The open body is measured by the children's bounding height alone (min 18 px); `effectiveFullheight` (read-only) is this or the stack's `fullheight`
	Returns the panels in order

Keyboard

Item	Behavior / conditions
	`SyTabGroup` switches views instead of stacking them; `SyCard` frames a section that is always open.

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

Collapse

Supported QML types

Learn by example

01 Basic composition

02 active · arrow · disabled · ghost

03 changed

04 openAll · closeAll · openPanel · closePanel · toggle

05 Accordion

06 Ghost panels

07 Borderless panels

08 Disabled panels

Properties · SyCollapse

Properties · SyCollapsePanel

Methods

Signals

Signals

Behavior

Keyboard

One design language.
Native applications.