QT QUICK · C++ · PYTHON

하나의 디자인 언어.
네이티브 앱까지.

QML 컴포넌트, 공통 디자인 토큰과 직접 실행할 수 있는 예제로 데스크톱 화면을 만드세요.

시작하기 컴포넌트 살펴보기 →

QML Core는 별도 제품입니다. C++와 Python에서 같은 QML 화면을 사용합니다.

Syidax QML workbench running in the native application — Syidax Core로 만든 실제 Qt Quick 애플리케이션입니다.

QML CORE

컴포넌트

컴포넌트 검색

56개 컴포넌트 중 56개

START WITH A WORKING APP

다운로드부터 첫 화면까지

C++ · CMake

SDK 압축을 풀고 플러그인 버전과 호환되는 Qt 키트로 빌드하세요.

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

순수 QML 버전을 사용하고 Python 바인딩을 명시적으로 선택하세요.

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

--diagnose --json으로 Qt 버전, import 경로, 폰트, 실행 상태와 라이선스를 점검하세요. 라이선스 토큰은 출력하지 않습니다.

Gallery 평가 앱을 지금 사용할 수 있습니다. 유료 SDK 판매와 다운로드는 준비 중입니다. 위 설치 예제는 SDK 출시 후 사용하는 방법입니다.

실행을 확인한 Windows 환경

아래 버전에서 네이티브 창과 예제의 기본 실행을 검사했습니다. Qt 6.8은 소스 최소 기준이며 모든 Qt 버전의 검증을 뜻하지 않습니다. Gallery는 software 렌더러를 사용합니다.

완성된 두 가지 업무 예제

실행 중인 Windows 앱을 단계별로 캡처했습니다. 재생·일시 정지로 각 상태를 살펴보세요.

Workbench: 작업 완료 처리, 변경 저장과 출시 진행률 갱신.

Record Manager: 저장 실패 후 초안 보존, 재시도, 검색과 삭제 전 확인.

실제 화면에서 확인하세요

TRY IT YOURSELF

직접 실행하는 Gallery

Windows 앱에서 예제를 실행하고 속성을 살펴보며 밝은 테마와 어두운 테마를 전환하세요. Gallery는 평가용이며 상업용 SDK는 별도 제품입니다.

Gallery 다운로드 · Windows x64

QML 예제 소스와 샘플 파일 다운로드

QML Core

$24.99 / 월

$249.99 / 년 · 개발자 1명 기준

Chart와 동일한 정규 단가입니다. 첫 구매·추가 좌석·갱신에 같은 가격이 적용됩니다.

문서, 실행 가능한 예제와 진단 도구를 제공합니다. 개별 기술 지원, 온보딩, SLA는 제공하지 않습니다.

구매 및 라이선스 조건 보기 →

문제 해결

모듈을 찾지 못함

--qml 경로가 Syidax 폴더를 포함하는지 확인하세요. Python에서는 qml-pure를 사용합니다. 소스 저장소가 아닌 압축 해제한 SDK를 기준으로 실행하세요.

라이선스가 inactive 또는 frozen

QML Core 인증서를 다시 다운로드한 뒤 --license로 전달하세요. Web Core·Chart·Grid 인증서는 QML을 활성화하지 않습니다. 월간 만료 시 사용이 종료되며, 연간은 이용 기간 내 출시 버전에 한해 보유 권한이 적용됩니다.

Qt 버전 또는 플러그인 오류

플러그인 빌드의 Qt 버전과 아키텍처를 확인하세요. 서로 다른 Python Qt 바인딩을 혼용하지 마세요. qml-pure로 플러그인 ABI 의존성을 피할 수 있습니다.

PDF 또는 아이콘이 표시되지 않음

PDF는 별도 QtQuick.Pdf 모듈이 필요합니다. 이 모듈이 없어도 나머지 Core 컴포넌트는 사용 가능합니다. 아이콘 팩 등록과 리소스 경로는 SDK의 ICON-PACKS 문서를 확인하세요.

저장 실패 또는 설정 손상

예제는 사용자 앱 데이터 폴더에만 저장합니다. 권한과 디스크 공간을 확인하세요. 잘못된 JSON은 백업한 뒤 초기 데이터로 복구됩니다. 저장 실패 시 입력 값이 유지됩니다.

← 전체 컴포넌트

타입	정의 / 역할
	명령 항목·하위 메뉴·제목이 있는 그룹을 담는 메뉴입니다.
	선택 유지나 체크 상태를 지원하는 개별 메뉴 명령입니다.
	옆으로 하위 메뉴를 여는 메뉴 항목입니다.
	관련 메뉴 항목을 제목 아래에 묶는 섹션입니다.

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") : "컨트롤을 조작하면 이벤트 결과가 표시됩니다."
            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 bool checkable: false
        property string direction: "right"
        property bool disabled: false
    }

    readonly property string members: [
        "SyMenuItem { text: " + JSON.stringify("편집") + "; value: \"edit\" }",
        "SyMenuItem { text: " + JSON.stringify("복제") + "; value: \"duplicate\" }",
        "SyMenuGroup {",
        "    title: " + JSON.stringify("공유"),
        "    SyMenuItem { text: " + JSON.stringify("링크 복사") + "; value: \"link\" }",
        "    SyMenuSub {",
        "        title: " + JSON.stringify("내보내기"),
        "        SyMenuItem { text: \"PDF\"; value: \"pdf\" }",
        "        SyMenuItem { text: \"CSV\"; value: \"csv\" }",
        "    }",
        "}",
        "SyMenuItem { text: " + JSON.stringify("제거") + "; value: \"remove\"; disabled: true }"
    ].join("\n")

    Column {
        spacing: 12
        SyDropdown { id: exampleControl1; 
            title: "작업"
            SyMenu {
                checkable: storyArgs.checkable
                direction: storyArgs.direction
                disabled: storyArgs.disabled
                onItemSelected: (detail) => output.log(detail.value)
                SyMenuItem { text: "편집"; value: "edit" }
                SyMenuItem { text: "복제"; value: "duplicate" }
                SyMenuGroup {
                    title: "공유"
                    SyMenuItem { text: "링크 복사"; value: "link" }
                    SyMenuSub { id: exampleControl2; 
                        title: "내보내기"
                        SyMenuItem { text: "PDF"; value: "pdf" }
                        SyMenuItem { text: "CSV"; value: "csv" }
                    }
                }
                SyMenuItem { text: "제거"; value: "remove"; disabled: true }
            }
        }
        EventLog { id: output }
    }

}

02 trigger · position

hovered를 보고하는 컨트롤 — 여기서는 SyButton — 안에 선언하면 메뉴는 자기 자리를 차지하지 않고 그 컨트롤에 붙은 팝업으로 열립니다.

QML 코드

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: story
    property QtObject settings: QtObject {
        id: storyArgs
        property string trigger: "hover"
        property string position: "bottomLeft"
    }

    readonly property string label: (storyArgs.trigger === "contextmenu" ? "오른쪽 클릭" : "메뉴 열기")

    Item {
        width: 360
        height: 160
        SyButton {
            anchors.centerIn: parent
            text: story.label
            SyMenu { id: featureTarget0;
                trigger: storyArgs.trigger
                position: storyArgs.position
                SyMenuItem { text: "편집"; value: "edit" }
                SyMenuItem { text: "복제"; value: "duplicate" }
                SyMenuItem { text: "제거"; value: "remove" }
            }
        }
    }
}

03 selectable · checkable · disabled · loading

각 SyMenuItem은 text(라벨), value(선택 시 보고되는 값), 그리고 네 가지 상태 스위치를 가집니다.

selectable · checkable · disabled · loading · 열린 화면 — Qt 실행 화면 · 이미지

QML 코드

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

    SyMenu { id: exampleControl1; 
        SyMenuItem { id: featureTarget0; text: "선택 유지"; value: "a"; selectable: true; select: true }
        SyMenuItem { id: featureTarget1; text: "체크 가능"; value: "b"; checkable: true; checked: true }
        SyMenuItem { id: featureTarget2; text: "비활성"; value: "c"; disabled: true }
        SyMenuItem { id: featureTarget3; text: "로딩 중"; value: "d"; loading: true }
    }
}

04 opened · itemSelected · itemChecked

SyMenu에는 시그널이 셋 있습니다.

opened · itemSelected · itemChecked · 열린 화면 — Qt 실행 화면 · 이미지

QML 코드

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") : "컨트롤을 조작하면 이벤트 결과가 표시됩니다."
            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: 12
        SyButton {
            text: "메뉴 열기"
            SyMenu { id: exampleControl1; 
                trigger: "click"
                onOpened: (state) => { if (true) { output.log(("opened: %1").arg(state)) } }
                onItemSelected: (detail) => { if (true) { output.log(("itemSelected: %1").arg(detail.value)) } }
                onItemChecked: (detail) => { if (true) { output.log(("itemChecked: %1 %2").arg(detail.value).arg(detail.checked)) } }
                SyMenuItem { text: "편집"; value: "edit" }
                SyMenuItem { text: "굵게"; value: "bold"; checkable: true }
            }
        }
        EventLog { id: output }
    }
}

05 setOpen · setClose · toggle · setSelectableAllItems · clearSelectedItem

setOpen()은 팝업을 열고 opened(true)를 발생시킵니다.

setOpen · setClose · toggle · setSelectableAllItems · clearSelectedItem · 열린 화면 — Qt 실행 화면 · 이미지

QML 코드

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
        Item {
            width: 560; height: 220
            SyButton {
                x: 24; y: 24
 text: "메뉴 열기"; SyMenu { id: menu; trigger: "click"; SyMenuItem { text: "편집"; value: "edit" } SyMenuItem { text: "복제"; value: "duplicate" } } }
        }
        Flow {
            objectName: "exampleCommands"

            width: 460
            spacing: 8
            SyButton { id: exampleControl1;  visible: true; text: "menu.setOpen()"; variant: "secondary"; size: "small"; onClicked: menu.setOpen() }
            SyButton { id: exampleControl2;  visible: true; text: "menu.setClose()"; variant: "secondary"; size: "small"; onClicked: menu.setClose() }
            SyButton { id: exampleControl3;  visible: true; text: "menu.toggle()"; variant: "secondary"; size: "small"; onClicked: menu.toggle() }
            SyButton { id: exampleControl4;  visible: true; text: "menu.setSelectableAllItems()"; variant: "secondary"; size: "small"; onClicked: menu.setSelectableAllItems() }
            SyButton { id: exampleControl5;  visible: true; text: "menu.clearSelectedItem()"; variant: "secondary"; size: "small"; onClicked: menu.clearSelectedItem() }
        }
        Text {
            text: "menu.open === " + menu.open
            font.family: Theme.monoFontFamily
            font.pixelSize: 12
            color: Theme.semantic.textSubtle
        }
    }
}

06 선택 가능한 메뉴 항목

checkable 설정을 적용한 선택 가능한 메뉴 항목 예제입니다.

QML 코드

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") : "컨트롤을 조작하면 이벤트 결과가 표시됩니다."
            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 bool checkable: true
        property string direction: "right"
        property bool disabled: false
    }

    readonly property string members: [
        "SyMenuItem { text: " + JSON.stringify("편집") + "; value: \"edit\" }",
        "SyMenuItem { text: " + JSON.stringify("복제") + "; value: \"duplicate\" }",
        "SyMenuGroup {",
        "    title: " + JSON.stringify("공유"),
        "    SyMenuItem { text: " + JSON.stringify("링크 복사") + "; value: \"link\" }",
        "    SyMenuSub {",
        "        title: " + JSON.stringify("내보내기"),
        "        SyMenuItem { text: \"PDF\"; value: \"pdf\" }",
        "        SyMenuItem { text: \"CSV\"; value: \"csv\" }",
        "    }",
        "}",
        "SyMenuItem { text: " + JSON.stringify("제거") + "; value: \"remove\"; disabled: true }"
    ].join("\n")

    Column {
        spacing: 12
        SyDropdown { id: exampleControl1; 
            title: "작업"
            SyMenu {
                checkable: storyArgs.checkable
                direction: storyArgs.direction
                disabled: storyArgs.disabled
                onItemSelected: (detail) => output.log(detail.value)
                SyMenuItem { text: "편집"; value: "edit" }
                SyMenuItem { text: "복제"; value: "duplicate" }
                SyMenuGroup {
                    title: "공유"
                    SyMenuItem { text: "링크 복사"; value: "link" }
                    SyMenuSub { id: exampleControl2; 
                        title: "내보내기"
                        SyMenuItem { text: "PDF"; value: "pdf" }
                        SyMenuItem { text: "CSV"; value: "csv" }
                    }
                }
                SyMenuItem { text: "제거"; value: "remove"; disabled: true }
            }
        }
        EventLog { id: output }
    }

}

07 왼쪽으로 하위 메뉴 열기

direction 설정을 적용한 왼쪽으로 하위 메뉴 열기 예제입니다.

QML 코드

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") : "컨트롤을 조작하면 이벤트 결과가 표시됩니다."
            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 bool checkable: false
        property string direction: "left"
        property bool disabled: false
    }

    readonly property string members: [
        "SyMenuItem { text: " + JSON.stringify("편집") + "; value: \"edit\" }",
        "SyMenuItem { text: " + JSON.stringify("복제") + "; value: \"duplicate\" }",
        "SyMenuGroup {",
        "    title: " + JSON.stringify("공유"),
        "    SyMenuItem { text: " + JSON.stringify("링크 복사") + "; value: \"link\" }",
        "    SyMenuSub {",
        "        title: " + JSON.stringify("내보내기"),
        "        SyMenuItem { text: \"PDF\"; value: \"pdf\" }",
        "        SyMenuItem { text: \"CSV\"; value: \"csv\" }",
        "    }",
        "}",
        "SyMenuItem { text: " + JSON.stringify("제거") + "; value: \"remove\"; disabled: true }"
    ].join("\n")

    Column {
        spacing: 12
        SyDropdown { id: exampleControl1; 
            title: "작업"
            SyMenu {
                checkable: storyArgs.checkable
                direction: storyArgs.direction
                disabled: storyArgs.disabled
                onItemSelected: (detail) => output.log(detail.value)
                SyMenuItem { text: "편집"; value: "edit" }
                SyMenuItem { text: "복제"; value: "duplicate" }
                SyMenuGroup {
                    title: "공유"
                    SyMenuItem { text: "링크 복사"; value: "link" }
                    SyMenuSub { id: exampleControl2; 
                        title: "내보내기"
                        SyMenuItem { text: "PDF"; value: "pdf" }
                        SyMenuItem { text: "CSV"; value: "csv" }
                    }
                }
                SyMenuItem { text: "제거"; value: "remove"; disabled: true }
            }
        }
        EventLog { id: output }
    }

}

08 비활성 메뉴

disabled 설정을 적용한 비활성 메뉴 예제입니다.

기본 실행 화면

QML 코드

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") : "컨트롤을 조작하면 이벤트 결과가 표시됩니다."
            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 bool checkable: false
        property string direction: "right"
        property bool disabled: true
    }

    readonly property string members: [
        "SyMenuItem { text: " + JSON.stringify("편집") + "; value: \"edit\" }",
        "SyMenuItem { text: " + JSON.stringify("복제") + "; value: \"duplicate\" }",
        "SyMenuGroup {",
        "    title: " + JSON.stringify("공유"),
        "    SyMenuItem { text: " + JSON.stringify("링크 복사") + "; value: \"link\" }",
        "    SyMenuSub {",
        "        title: " + JSON.stringify("내보내기"),
        "        SyMenuItem { text: \"PDF\"; value: \"pdf\" }",
        "        SyMenuItem { text: \"CSV\"; value: \"csv\" }",
        "    }",
        "}",
        "SyMenuItem { text: " + JSON.stringify("제거") + "; value: \"remove\"; disabled: true }"
    ].join("\n")

    Column {
        spacing: 12
        SyDropdown {
            title: "작업"
            SyMenu {
                checkable: storyArgs.checkable
                direction: storyArgs.direction
                disabled: storyArgs.disabled
                onItemSelected: (detail) => output.log(detail.value)
                SyMenuItem { text: "편집"; value: "edit" }
                SyMenuItem { text: "복제"; value: "duplicate" }
                SyMenuGroup {
                    title: "공유"
                    SyMenuItem { text: "링크 복사"; value: "link" }
                    SyMenuSub {
                        title: "내보내기"
                        SyMenuItem { text: "PDF"; value: "pdf" }
                        SyMenuItem { text: "CSV"; value: "csv" }
                    }
                }
                SyMenuItem { text: "제거"; value: "remove"; disabled: true }
            }
        }
        EventLog { id: output }
    }

}

API 86

항목을 가리키거나 선택하면 QML 예제와 복사 버튼이 나타납니다.

속성 · SyMenu

타입	기본값	설명
list (기본 속성)	—	안에 선언한 행: SyMenuItem, SyMenuSub, SyMenuGroup, 순서대로
bool	`false`	팝업 상태. 바인딩으로 열고 닫을 수 있고(`opened` 시그널 없음) 읽어서 알 수 있으며, 팝업이 동기화를 유지합니다. 인라인에서는 눈에 띄는 효과 없음
bool	`false`	모든 행에 체크 박스가 붙고 `itemSelected` 대신 `itemChecked`를 보고
string	`"bottomLeft"`	팝업 위치: `bottomLeft` · `bottomRight` · `topLeft` · `topRight`; 공간이 없으면 뒤집힘. 인라인에서는 무시
string	`"hover"`	팝업을 여는 것: `hover` · `click` · `contextmenu`(오른쪽 클릭). 인라인에서는 무시
string	`"right"`	서브메뉴가 열리는 쪽: `right` · `left`
bool	`false`	모든 행과 서브메뉴 멈춤; `setOpen()`과 오른쪽 클릭 트리거 거부
string	`"inline"`	`inline` 또는 `popup` — 선언된 자리에서 결정됨; 직접 설정하지 마십시오
bool	`false`	`mode`가 결정되면 `true`(생성 후 이벤트 루프 한 턴 뒤)
real	`160`	모든 행이 가지는 폭: 가장 넓은 행, 최소 160
var	`[]`	수집된 행 — 대신 `items()`를 읽으십시오

속성 · SyMenuItem

타입	기본값	설명
list (기본 속성)	—	글자 뒤에 놓이는 아이템(아이콘, 단축키 안내)
string	`""`	라벨; 시그널 detail에 `label`로 보고됨. 비어 있으면 숨김
string	`""`	선택 시 보고되는 값
bool	`false`	멈추고 회색으로
bool	`false`	글자 앞에 작은 스피너; 멈춤
bool	`false`	고른 것이 강조된 채 남음(`select`); 메뉴당 강조 행 하나
bool	`false`	강조: 선택 시 설정되고, 다른 곳의 다음 선택이나 `clearSelectedItem()`으로 지워짐. `selectable`일 때만 그려짐
bool	`false`	글자 앞 체크 박스; 선택이 `checked`를 토글하고 `itemChecked`를 보고
bool	`false`	체크 박스 상태
string (읽기 전용)	—	`text`와 같음
bool (읽기 전용)	—	`disabled`, `loading`, 또는 메뉴가 disabled
bool (읽기 전용)	—	`selectable && select` — 강조가 그려짐
bool (읽기 전용)	—	행 또는 메뉴의 `checkable`
bool (읽기 전용)	—	포인터가 행 위에 있음
bool (읽기 전용)	—	행에 키보드 포커스가 있음
var	`null`	소유하는 SyMenu(메뉴가 설정)

속성 · SyMenuSub

타입	기본값	설명
list (기본 속성)	—	서브메뉴의 행(아이템, 그룹, 또 다른 서브메뉴)
string	`""`	행 글자
bool	`false`	서브메뉴 상태; 설정해서 열고 닫고, 읽어서 알 수 있음
string	`"hover"`	`hover`(포인터가 떠난 뒤 150 ms 후 닫힘) · `click`
bool	`false`	행 멈춤; 서브메뉴가 열리지 않음
bool (읽기 전용)	—	서브메뉴가 보이는 중인지
bool (읽기 전용)	—	행 또는 메뉴의 `disabled`
bool (읽기 전용)	—	포인터가 행 위에 있음
bool (읽기 전용)	—	키보드 포커스
var	`null`	소유하는 SyMenu(메뉴가 설정)

속성 · SyMenuGroup

타입	기본값	설명
list (기본 속성)	—	제목 아래의 행
string	`""`	구역 제목(12 px); 비어 있으면 제목 행 생략
var	`null`	소유하는 SyMenu(메뉴가 설정)

메서드

메서드	설명
	팝업을 열고 `opened(true)` 발생. `disabled`이면 무시; 호스트 컨트롤이 활성이어야 함. 인라인: `open`만 설정하고 발생
	팝업을 닫고 `opened(false)` 발생. disabled여도 동작
	팝업을 닫고 `opened(false)` 발생. disabled여도 동작
	`open`이면 `setClose()`, 아니면 `setOpen()`
	중첩된 것까지 모든 SyMenuItem의 `selectable`을 `true`로
	모든 SyMenuItem의 `select`를 `false`로 — 강조가 사라짐; `checked`는 그대로
	SyMenuItem과 SyMenuSub 행을 선언 순서대로, 그룹과 서브메뉴 속까지 평평하게 반환
	클릭이 하는 일: 선택, 또는 체크 박스 토글. 멈춘 동안 무시
	서브메뉴 열기(disabled면 거부)
	닫기
	토글

시그널

시그널	인자	시점
	`state: bool`	팝업이 열림(`true`) 또는 닫힘(`false`): 트리거, 선택, Escape, 바깥 누름, 또는 `setOpen()` / `setClose()` / `toggle()` / `close()`. 바인딩으로 `open`을 바꿀 때는 아님. 인라인: 메서드로만
	`detail: { value, label }`	일반 행이나 selectable 행을 골랐음(클릭, Space, Enter). checkable 행, 멈춘 행, disabled 메뉴에서는 아님
	`detail: { value, label, checked }`	checkable 행이 토글됨; 팝업은 열린 채
	위와 같음	행 자신의 시그널, 메뉴의 것 직전에 발생
	위와 같음	행 자신의 시그널, 메뉴의 것 직전에 발생

동작

항목	동작 / 조건
	그렇지 않고 네 단계 안의 조상이 bool `hovered`를 보고하면(Core 컨트롤은 모두 그렇습니다) 그 조상이 팝업의 앵커가 되고 모드는 `popup`입니다.
	`mode`가 결정되면 `true`(생성 후 이벤트 루프 한 턴 뒤)
	팝업 상태. 바인딩으로 열고 닫을 수 있고(`opened` 시그널 없음) 읽어서 알 수 있으며, 팝업이 동기화를 유지합니다. 인라인에서는 눈에 띄는 효과 없음
	팝업을 여는 것: `hover` · `click` · `contextmenu`(오른쪽 클릭). 인라인에서는 무시
	팝업 위치: `bottomLeft` · `bottomRight` · `topLeft` · `topRight`; 공간이 없으면 뒤집힘. 인라인에서는 무시
	클릭이 하는 일: 선택, 또는 체크 박스 토글. 멈춘 동안 무시
	일반 행이나 selectable 행을 골랐음(클릭, Space, Enter). checkable 행, 멈춘 행, disabled 메뉴에서는 아님
	일반 행을 클릭, Space, Enter로 고르면 행의 `itemSelected(detail)`가 먼저, 메뉴의 것이 다음에 발생하며 `detail = { value, label }`입니다(`label`은 행의 `text`). 팝업 모드에서는 이어서 팝업이 닫히고(`opened(false)`), 드롭다운 안의 인라인이면 드롭다운의 `select(detail)`가 실행되어 드롭다운이 `selected`를 발생시키고 닫힙니다.
	선택 시 보고되는 값
	`text`와 같음
	라벨; 시그널 detail에 `label`로 보고됨. 비어 있으면 숨김
	팝업이 열림(`true`) 또는 닫힘(`false`): 트리거, 선택, Escape, 바깥 누름, 또는 `setOpen()` / `setClose()` / `toggle()` / `close()`. 바인딩으로 `open`을 바꿀 때는 아님. 인라인: 메서드로만
	강조: 선택 시 설정되고, 다른 곳의 다음 선택이나 `clearSelectedItem()`으로 지워짐. `selectable`일 때만 그려짐
	고른 것이 강조된 채 남음(`select`); 메뉴당 강조 행 하나
	체크 박스 상태
	`selectable` 없는 `select`는 아무것도 그리지 않습니다. checkable 행은 다르게 동작합니다: 클릭이 `checked`를 토글해 `select`에 복사하고, 행과 메뉴에서 `itemChecked({ value, label, checked })`를 발생시키며, `itemSelected`는 발생시키지 않고, 팝업을 열린 채 둡니다.
	일반 행을 클릭, Space, Enter로 고르면 행의 `itemSelected(detail)`가 먼저, 메뉴의 것이 다음에 발생하며 `detail = { value, label }`입니다(`label`은 행의 `text`). `selectable` 없는 `select`는 아무것도 그리지 않습니다. checkable 행은 다르게 동작합니다: 클릭이 `checked`를 토글해 `select`에 복사하고, 행과 메뉴에서 `itemChecked({ value, label, checked })`를 발생시키며, `itemSelected`는 발생시키지 않고, 팝업을 열린 채 둡니다.
	글자 앞 체크 박스; 선택이 `checked`를 토글하고 `itemChecked`를 보고
	모든 행과 서브메뉴 멈춤; `setOpen()`과 오른쪽 클릭 트리거 거부
	글자 앞에 작은 스피너; 멈춤
	멈추고 회색으로
	팝업을 열고 `opened(true)` 발생. `disabled`이면 무시; 호스트 컨트롤이 활성이어야 함. 인라인: `open`만 설정하고 발생
	행 글자
	서브메뉴가 열리는 쪽: `right` · `left`
	서브메뉴가 보이는 중인지
	SyMenuItem과 SyMenuSub 행을 선언 순서대로, 그룹과 서브메뉴 속까지 평평하게 반환
	모든 행이 가지는 폭: 가장 넓은 행, 최소 160
	Tab으로 행에 도달합니다. 포커스된 행에서 Up / Down은 이전 / 다음 활성 행으로 이동(순환), Space / Enter는 선택, Escape는 메뉴를 닫습니다. 포커스된 서브메뉴 행에서 Right는 열기, Left 또는 Escape는 닫기, Space / Enter는 토글입니다.
	`setClose()`는 disabled여도 동작하고 `setOpen()`은 그렇지 않습니다.

키보드

항목	동작 / 조건
	`SyDropdown`은 제목 상자 아래에 인라인 메뉴를 품고, `SyButton`은 흔한 팝업 호스트이며, `SyNav`는 내비게이션용 사이드바 짝입니다.

하나의 디자인 언어.
네이티브 앱까지.

컴포넌트

다운로드부터 첫 화면까지

C++ · CMake

Python · PySide6

실행을 확인한 Windows 환경

완성된 두 가지 업무 예제

실제 화면에서 확인하세요

직접 실행하는 Gallery

QML Core

문제 해결

Menu

지원 QML 타입

01 기본 구성

02 trigger · position

03 selectable · checkable · disabled · loading

04 opened · itemSelected · itemChecked

05 setOpen · setClose · toggle · setSelectableAllItems · clearSelectedItem

06 선택 가능한 메뉴 항목

07 왼쪽으로 하위 메뉴 열기

08 비활성 메뉴

속성 · SyMenu

속성 · SyMenuItem

속성 · SyMenuSub

속성 · SyMenuGroup

메서드

시그널

동작

키보드

하나의 디자인 언어.네이티브 앱까지.

컴포넌트

다운로드부터 첫 화면까지

C++ · CMake

Python · PySide6

실행을 확인한 Windows 환경

완성된 두 가지 업무 예제

실제 화면에서 확인하세요

직접 실행하는 Gallery

QML Core

문제 해결

Menu

지원 QML 타입

예제로 보기

01 기본 구성

02 trigger · position

03 selectable · checkable · disabled · loading

04 opened · itemSelected · itemChecked

05 setOpen · setClose · toggle · setSelectableAllItems · clearSelectedItem

06 선택 가능한 메뉴 항목

07 왼쪽으로 하위 메뉴 열기

08 비활성 메뉴

속성 · SyMenu

속성 · SyMenuItem

속성 · SyMenuSub

속성 · SyMenuGroup

메서드

시그널

동작

키보드

하나의 디자인 언어.
네이티브 앱까지.