QMLQT QUICK · C++ · PYTHON
QML 컴포넌트, 공통 디자인 토큰과 직접 실행할 수 있는 예제로 데스크톱 화면을 만드세요.
QML Core는 별도 제품입니다. C++와 Python에서 같은 QML 화면을 사용합니다.
QML CORE
56개 컴포넌트 중 56개
START WITH A WORKING APP
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순수 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 출시 후 사용하는 방법입니다.
아래 버전에서 네이티브 창과 예제의 기본 실행을 검사했습니다. Qt 6.8은 소스 최소 기준이며 모든 Qt 버전의 검증을 뜻하지 않습니다. Gallery는 software 렌더러를 사용합니다.
실행 중인 Windows 앱을 단계별로 캡처했습니다. 재생·일시 정지로 각 상태를 살펴보세요.
TRY IT YOURSELF
Windows 앱에서 예제를 실행하고 속성을 살펴보며 밝은 테마와 어두운 테마를 전환하세요. Gallery는 평가용이며 상업용 SDK는 별도 제품입니다.
Gallery 다운로드 · Windows x64$24.99 / 월
$249.99 / 년 · 개발자 1명 기준
Chart와 동일한 정규 단가입니다. 첫 구매·추가 좌석·갱신에 같은 가격이 적용됩니다.
문서, 실행 가능한 예제와 진단 도구를 제공합니다. 개별 기술 지원, 온보딩, SLA는 제공하지 않습니다.
구매 및 라이선스 조건 보기 →--qml 경로가 Syidax 폴더를 포함하는지 확인하세요. Python에서는 qml-pure를 사용합니다. 소스 저장소가 아닌 압축 해제한 SDK를 기준으로 실행하세요.
QML Core 인증서를 다시 다운로드한 뒤 --license로 전달하세요. Web Core·Chart·Grid 인증서는 QML을 활성화하지 않습니다. 월간 만료 시 사용이 종료되며, 연간은 이용 기간 내 출시 버전에 한해 보유 권한이 적용됩니다.
플러그인 빌드의 Qt 버전과 아키텍처를 확인하세요. 서로 다른 Python Qt 바인딩을 혼용하지 마세요. qml-pure로 플러그인 ABI 의존성을 피할 수 있습니다.
PDF는 별도 QtQuick.Pdf 모듈이 필요합니다. 이 모듈이 없어도 나머지 Core 컴포넌트는 사용 가능합니다. 아이콘 팩 등록과 리소스 경로는 SDK의 ICON-PACKS 문서를 확인하세요.
예제는 사용자 앱 데이터 폴더에만 저장합니다. 권한과 디스크 공간을 확인하세요. 잘못된 JSON은 백업한 뒤 초기 데이터로 복구됩니다. 저장 실패 시 입력 값이 유지됩니다.
앱의 화면이나 섹션을 이동하는 세로 내비게이션입니다. 항목을 그룹으로 묶거나 하위 목록으로 펼칠 수 있습니다.
import Syidax.Core.Nav
| 타입 | 정의 / 역할 |
|---|---|
| 앱이 화면을 전환할 수 있도록 선택 값을 전달하는 세로 탐색 메뉴입니다. | |
| 자신의 값이 활성 상태일 때 강조되는 개별 탐색 항목입니다. | |
| 하위 탐색 항목을 접고 펼치는 가지 항목입니다. | |
| 탐색 항목들을 제목 아래에 묶는 섹션입니다. |
미리보기는 Qt 실행 화면의 이미지입니다. 아래 버튼으로 결과를 전환하세요.
SyNav는 세로 내비게이션 목록입니다: SyNavItem 행, 셰브론이 달린 제목 아래로 행들을 한 단계 깊이 접는 SyNavSub 가지, 같은 깊이의 행들 위에 제목을 두는 SyNavGroup 구역.
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 string activeValue: "home"
property bool disabled: false
}
readonly property string members: [
"SyNavItem { text: " + JSON.stringify("홈") + "; value: \"home\" }",
"SyNavSub {",
" title: " + JSON.stringify("프로젝트") + "; value: \"projects\"; open: true",
" SyNavItem { text: " + JSON.stringify("진행 중") + "; value: \"active\" }",
" SyNavItem { text: " + JSON.stringify("보관됨") + "; value: \"archived\" }",
"}",
"SyNavGroup {",
" title: " + JSON.stringify("계정"),
" SyNavItem { text: " + JSON.stringify("프로필") + "; value: \"profile\" }",
" SyNavItem { text: " + JSON.stringify("결제") + "; value: \"billing\"; disabled: true }",
"}"
].join("\n")
Column {
spacing: 12
SyNav {
disabled: storyArgs.disabled
onSelected: (value) => output.log(value)
Binding on activeValue { value: storyArgs.activeValue }
SyNavItem { text: "홈"; value: "home" }
SyNavSub {
title: "프로젝트"; value: "projects"; open: true
SyNavItem { text: "진행 중"; value: "active" }
SyNavItem { text: "보관됨"; value: "archived" }
}
SyNavGroup {
title: "계정"
SyNavItem { text: "프로필"; value: "profile" }
SyNavItem { text: "결제"; value: "billing"; disabled: true }
}
}
EventLog { id: output }
}
}SyNavSub는 펼치고 접는 분기입니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string title: "프로젝트"
property bool open: true
}
SyNav {
width: 240
SyNavSub {
title: storyArgs.title
Binding on open { value: storyArgs.open }
SyNavItem { text: "진행 중"; value: "active" }
SyNavItem { text: "보관됨"; value: "archived" }
}
}
}SyNavGroup은 추가 들여쓰기나 접기 동작 없이 구역의 제목을 표시합니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string title: "계정"
}
SyNav {
width: 240
SyNavGroup {
title: storyArgs.title
SyNavItem { text: "프로필"; value: "profile" }
SyNavItem { text: "설정"; value: "settings" }
}
}
}SyNav의 시그널은 selected(value: string) 하나이며 두 상황에서 발생합니다:
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
Column {
spacing: 12
SyNav {
width: 240
onSelected: (value) => output.log(("selected: %1").arg(value))
SyNavItem { text: "홈"; value: "home" }
SyNavSub {
title: "프로젝트"; value: "projects"
SyNavItem { text: "진행 중"; value: "active" }
}
}
EventLog { id: output }
}
}SyNav.setActive(value)는 activeValue를 설정하여 value가 일치하는 행을 활성 행으로 만듭니다(어떤 행과도 일치하지 않는 값이면 모든 행이 비활성).
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
SyNav {
id: nav
width: 240
SyNavItem { text: "홈"; value: "home" }
SyNavSub { id: projects; title: "프로젝트"; value: "projects"; SyNavItem { text: "진행 중"; value: "active" } }
SyNavItem { text: "프로필"; value: "profile" }
}
Flow {
width: 460
spacing: 8
SyButton { id: exampleControl1; visible: true; text: "nav.setActive(\"profile\")"; variant: "secondary"; size: "small"; onClicked: nav.setActive("profile") }
SyButton { id: exampleControl2; visible: true; text: "projects.setOpen()"; variant: "secondary"; size: "small"; onClicked: projects.setOpen() }
SyButton { id: exampleControl3; visible: true; text: "projects.setClose()"; variant: "secondary"; size: "small"; onClicked: projects.setClose() }
SyButton { visible: true; text: "projects.setTrigger()"; variant: "secondary"; size: "small"; onClicked: projects.setTrigger() }
}
Text {
text: "nav.activeValue === " + JSON.stringify(nav.activeValue) + " projects.open === " + projects.open
font.family: Theme.monoFontFamily
font.pixelSize: 12
color: Theme.semantic.textSubtle
}
}
}activeValue 설정을 적용한 현재 경로 선택 예제입니다.
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 string activeValue: "settings"
property bool disabled: false
}
readonly property string members: [
"SyNavItem { text: " + JSON.stringify("홈") + "; value: \"home\" }",
"SyNavSub {",
" title: " + JSON.stringify("프로젝트") + "; value: \"projects\"; open: true",
" SyNavItem { text: " + JSON.stringify("진행 중") + "; value: \"active\" }",
" SyNavItem { text: " + JSON.stringify("보관됨") + "; value: \"archived\" }",
"}",
"SyNavGroup {",
" title: " + JSON.stringify("계정"),
" SyNavItem { text: " + JSON.stringify("프로필") + "; value: \"profile\" }",
" SyNavItem { text: " + JSON.stringify("결제") + "; value: \"billing\"; disabled: true }",
"}"
].join("\n")
Column {
spacing: 12
SyNav {
disabled: storyArgs.disabled
onSelected: (value) => output.log(value)
Binding on activeValue { value: storyArgs.activeValue }
SyNavItem { text: "홈"; value: "home" }
SyNavSub {
title: "프로젝트"; value: "projects"; open: true
SyNavItem { text: "진행 중"; value: "active" }
SyNavItem { text: "보관됨"; value: "archived" }
}
SyNavGroup {
title: "계정"
SyNavItem { text: "프로필"; value: "profile" }
SyNavItem { text: "결제"; value: "billing"; disabled: true }
}
}
EventLog { id: output }
}
}항목을 가리키거나 선택하면 QML 예제와 복사 버튼이 나타납니다.
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| list (기본 속성) | — | 안에 선언한 항목: SyNavItem, SyNavSub, SyNavGroup, 순서대로 | |
| string | "" | 활성 행의 value. 경로를 따르려면 설정; 클릭도 설정함 | |
| bool | false | 모든 행과 가지 헤더 멈춤 | |
| var | [] | 중첩된 것까지 모든 SyNavItem과 SyNavSub를 순서대로(그룹 제외); 내비가 유지 |
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| list (기본 속성) | — | 글자 뒤에 놓이는 아이템(아이콘, 배지) | |
| string | "" | 행 라벨(비어 있으면 숨김) | |
| string | "" | 클릭이 보고하는 값이자 activeValue와 비교되는 값; 빈 값은 절대 활성 아님 | |
| bool | false | 회색, 클릭과 키 무시 | |
| int | 0 | 중첩 단계 — 내비가 설정; 단계마다 20 px 들여쓰기 | |
| bool (읽기 전용) | — | activeValue가 이 행의 비어 있지 않은 value와 같음 | |
| bool (읽기 전용) | — | 행 또는 내비의 disabled | |
| bool (읽기 전용) | — | 포인터가 행 위에 있음 | |
| bool (읽기 전용) | — | 키보드 포커스 | |
| var | null | 소유하는 SyNav(내비가 설정) |
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| list (기본 속성) | — | 한 단계 깊은 행(그룹이나 가지도 가능) | |
| string | "" | 헤더 글자 | |
| string | "" | 가지가 열리거나 닫힐 때 selected로 보고되는 값 | |
| bool | false | 가지 상태; 설정하면 조용히 열리거나 닫히고, 읽어서 알 수 있음 | |
| bool | false | 헤더 멈춤; 안의 행은 자기 상태 유지 | |
| int | 0 | 중첩 단계 — 내비가 설정 | |
| bool (읽기 전용) | — | 가지 또는 내비의 disabled | |
| bool (읽기 전용) | — | 포인터가 헤더 위에 있음 | |
| bool (읽기 전용) | — | 헤더에 키보드 포커스 | |
| var | null | 소유하는 SyNav(내비가 설정) |
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| list (기본 속성) | — | 제목 아래의 행, 같은 깊이 | |
| string | "" | 구역 제목(12 px 중간 굵기, 32 px 행) | |
| int | 0 | 중첩 단계 — 내비가 설정 | |
| var | null | 소유하는 SyNav(내비가 설정) |
| 메서드 | 설명 |
|---|---|
activeValue 설정; 일치하는 행이 활성이 됨, 시그널 없음 | |
true: 이 행을 활성 행으로; false: activeValue를 지움. 시그널 없음 | |
| 가지를 열고 값을 보고; 비활성이거나 이미 열려 있으면 무시 | |
| 가지를 닫고 값을 보고; 이미 닫혀 있으면 무시(비활성이어도 허용) | |
열려 있으면 setClose(), 아니면 setOpen() |
| 시그널 | 인자 | 시점 |
|---|---|---|
value: string | 사용 가능한 행을 클릭함(또는 Space / Enter) — activeValue는 이미 그 값 — 또는 가지가 열리거나 닫힘(가지의 value; activeValue 그대로). 코드에서 activeValue, setActive(), 가지의 open을 설정할 때는 아님 | |
value: string | 이 행이 클릭됨; 내비의 것 직전에 발생 | |
value: string | 이 가지가 사용자 조작이나 메서드로 열리거나 닫힘; 내비의 것 직전에 발생 |
| 항목 | 동작 / 조건 |
|---|---|
클릭이 보고하는 값이자 activeValue와 비교되는 값; 빈 값은 절대 활성 아님 | |
| 활성 행의 value. 경로를 따르려면 설정; 클릭도 설정함 | |
사용 가능한 행을 클릭함(또는 Space / Enter) — activeValue는 이미 그 값 — 또는 가지가 열리거나 닫힘(가지의 value; activeValue 그대로). 코드에서 activeValue, setActive(), 가지의 open을 설정할 때는 아님 | |
activeValue 설정; 일치하는 행이 활성이 됨, 시그널 없음 | |
| 헤더 글자 | |
| 가지 상태; 설정하면 조용히 열리거나 닫히고, 읽어서 알 수 있음 | |
| 가지를 열고 값을 보고; 비활성이거나 이미 열려 있으면 무시 | |
| 가지를 닫고 값을 보고; 이미 닫혀 있으면 무시(비활성이어도 허용) | |
열려 있으면 setClose(), 아니면 setOpen() | |
| 이 가지가 사용자 조작이나 메서드로 열리거나 닫힘; 내비의 것 직전에 발생 | |
가지가 열리거나 닫힐 때 selected로 보고되는 값 | |
SyNavGroup은 32 px 제목 행(12 px 중간 굵기, 행들과 같은 들여쓰기)을 그리고 안에 선언한 행들을 같은 깊이로 잇습니다. 상태가 없고 아무것도 보고하지 않습니다. | |
| 모든 행과 가지 헤더 멈춤 | |
| 헤더 멈춤; 안의 행은 자기 상태 유지 | |
내비는 세로 열입니다: width를 주십시오. | |
| Tab이 사용 가능한 행과 가지 헤더를 차례로 지납니다(포커스된 항목은 1 px 외곽선). 행에서 Space / Enter는 선택. 가지 헤더에서 Space / Enter는 토글, Right는 열기, Left는 닫기. Up / Down 이동은 없습니다. Tab을 쓰십시오. | |
| 중첩된 것까지 모든 SyNavItem과 SyNavSub를 순서대로(그룹 제외); 내비가 유지 |
| 항목 | 동작 / 조건 |
|---|---|
SyLayoutSider가 내비의 흔한 자리이고, SyMenu는 작업용 팝업 짝이며, SyBreadcrumb는 내비가 이끈 경로를 보여 줍니다. |