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.Checkbox
| 타입 | 정의 / 역할 |
|---|---|
| 독립적인 선택·해제와 일부 선택 상태를 표현하는 체크박스 필드입니다. |
미리보기는 Qt 실행 화면의 이미지입니다. 아래 버튼으로 결과를 전환하세요.
SyCheckbox는 16 px 상자와 그 옆의 라벨(text)로, 사용자가 체크하고 해제합니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string text: "약관에 동의합니다"
property bool checked: false
property bool indeterminate: false
property bool disabled: false
property bool readonly: false
property bool required: false
property string message: ""
}
SyCheckbox {
text: storyArgs.text
checked: storyArgs.checked
indeterminate: storyArgs.indeterminate
disabled: storyArgs.disabled
readonly: storyArgs.readonly
required: storyArgs.required
message: storyArgs.message
onCheckedChanged: if (storyArgs.checked !== checked) storyArgs.checked = checked
onIndeterminateChanged: if (storyArgs.indeterminate !== indeterminate) storyArgs.indeterminate = indeterminate
}
}disabled: true는 상자와 라벨을 회색으로 만들고 반응하지 않게 합니다.
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: 8
SyCheckbox { id: featureTarget0; visible: true; text: "비활성"; disabled: true }
SyCheckbox { id: featureTarget1; visible: true; text: "비활성"; disabled: true; checked: true }
SyCheckbox { id: featureTarget2; visible: true; text: "읽기 전용"; readonly: true }
SyCheckbox { id: featureTarget3; visible: true; text: "읽기 전용"; readonly: true; checked: true }
}
}indeterminate: true는 체크 표시 대신 대시를 그립니다 — 일부만 체크된 행들 위의 전체 선택 상자처럼, 그룹을 대표하는 상자의 "일부만" 상태입니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
Column {
spacing: 8
SyCheckbox {
id: all
text: "전체 선택"
checked: a.checked && b.checked && c.checked
indeterminate: !checked && (a.checked || b.checked || c.checked)
onCheckedChanged: { a.checked = checked; b.checked = checked; c.checked = checked }
}
Column {
spacing: 8
leftPadding: 20
SyCheckbox { id: a; text: "디자인"; checked: true }
SyCheckbox { id: b; text: "개발" }
SyCheckbox { id: c; text: "품질" }
}
}
}상자에는 시그널이 셋 있습니다.
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
SyCheckbox {
text: "뉴스레터 구독"
onChanged: (detail) => { if (true) { output.log(("changed: checked %1 · indeterminate %2").arg(detail.checked).arg(detail.indeterminate)) } }
onFocused: { if (true) { output.log("focused") } }
onBlured: { if (true) { output.log("blured") } }
}
EventLog { id: output }
}
}상자의 함수들입니다.
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
SyCheckbox { id: terms; text: "약관에 동의합니다"; required: true }
Flow {
width: 560
spacing: 8
SyButton { id: exampleControl1; visible: true; text: "terms.toggle()"; variant: "secondary"; size: "small"; onClicked: terms.toggle() }
SyButton { id: exampleControl2; visible: true; text: "terms.setFocus()"; variant: "secondary"; size: "small"; onClicked: terms.setFocus() }
SyButton { id: exampleControl3; visible: true; text: "terms.checkValidity()"; variant: "secondary"; size: "small"; onClicked: output.log("checkValidity() → " + terms.checkValidity()) }
SyButton { visible: true; text: "terms.reportValidity()"; variant: "secondary"; size: "small"; onClicked: output.log("reportValidity() → " + terms.reportValidity()) }
SyButton { visible: true; text: "terms.getValidStatus()"; variant: "secondary"; size: "small"; onClicked: output.log("getValidStatus() → " + JSON.stringify(terms.getValidStatus())) }
SyButton { visible: true; text: "terms.setCustomError()"; variant: "secondary"; size: "small"; onClicked: terms.setCustomError() }
SyButton { visible: true; text: "terms.clearCustomError()"; variant: "secondary"; size: "small"; onClicked: terms.clearCustomError() }
}
EventLog { id: output }
}
}indeterminate · checked 설정을 적용한 일부 항목 선택 예제입니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string text: "약관에 동의합니다"
property bool checked: false
property bool indeterminate: true
property bool disabled: false
property bool readonly: false
property bool required: false
property string message: ""
}
SyCheckbox {
text: storyArgs.text
checked: storyArgs.checked
indeterminate: storyArgs.indeterminate
disabled: storyArgs.disabled
readonly: storyArgs.readonly
required: storyArgs.required
message: storyArgs.message
onCheckedChanged: if (storyArgs.checked !== checked) storyArgs.checked = checked
onIndeterminateChanged: if (storyArgs.indeterminate !== indeterminate) storyArgs.indeterminate = indeterminate
}
}검증 전·오류 표시·초기화 결과를 비교합니다.
import QtQuick
import Syidax.Core
Column {
width: 440; spacing: 12
SyCheckbox {
id: field; width: parent.width; name: "selection"; required: true
text: "필수 입력"
error: "계속하려면 이 항목을 입력하세요."
}
Row {
spacing: 8
SyButton { id: check; text: "검증"; onClicked: field.reportValidity() }
SyButton { id: reset; text: "초기화"; onClicked: field.reset() }
}
Text { text: "상태: " + (field.invalid ? "오류" : "입력 준비"); color: Theme.semantic.textDefault }
}업무 규칙에 맞는 오류를 표시하고 초기화합니다.
import QtQuick
import Syidax.Core
Column {
width: 440; spacing: 12
SyCheckbox {
id: field; width: parent.width; name: "selection"; required: true
text: "필수 입력"
checked: true
error: "현재 사용할 수 없는 선택입니다. 다른 값을 선택하세요."
}
Row {
spacing: 8
SyButton { id: check; text: "오류 표시"; onClicked: field.setCustomError() }
SyButton { id: reset; text: "초기화"; onClicked: field.reset() }
}
Text { text: "상태: " + (field.invalid ? "오류" : "입력 준비"); color: Theme.semantic.textDefault }
}항목을 가리키거나 선택하면 QML 예제와 복사 버튼이 나타납니다.
| 항목 | 동작 / 조건 |
|---|---|
공통 필드 속성(name, label, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, message, error, touched, submitted, customError, validStatus, valid, invalid, showTitle, ready)은 Form 페이지에 설명되어 있습니다. |
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| bool | false | 상태. 클릭·Space·toggle()이 뒤집고, 바뀔 때마다 changed 발생. | |
| bool | false | 상태 위에 대시("일부만" 모양)를 그립니다. 다음 클릭이 상자를 체크하고 이를 지웁니다. 단독으로는 changed 없음. | |
| string | "" | 상자 옆 라벨. 클릭해도 토글됩니다. | |
| Item… | — | 기본 속성. 안에 선언한 아이템은 라벨 텍스트 뒤에 4 px 간격, 가운데 정렬로 놓입니다. | |
| string | "on" | 체크된 동안 소속 SyForm이 name으로 제출하는 값. | |
| var(읽기 전용) | — | 체크되면 value, 아니면 null — SyForm.values()가 저장하는 것. | |
| string | "" | 소속 SyForm의 values()에서의 키. | |
| bool | false | 체크 안 됨 → valueMissing. | |
| bool | false | 반응 없고 회색. Tab 정지점 아님. 항상 유효. 제출되지 않음. | |
| bool | false | 포커스는 되지만 바꿀 수 없음. 항상 유효. 제출됨. | |
| string | "" | 호버 텍스트: 포인터가 체크박스 위에 머물면 SyTooltip으로 보입니다. | |
| string | "" | 행 아래 도움말 줄 | |
| string | "" | 필수 검사의 사용자 정의 오류 문구. | |
| string | "" | 상속된 제목 줄(행 위). 보통 비워 둡니다. | |
| string | "medium" | 상속됨. 체크박스에는 효과가 없습니다. | |
| bool(읽기 전용) | — | 상자가 활성 포커스를 가짐 | |
| bool(읽기 전용) | — | 포인터가 행 위에 있음(disabled에서는 false). | |
| string(읽기 전용) | — | unchecked · checked · indeterminate. | |
| string(읽기 전용) | — | enabled · hover · focus · readonly · disabled. |
| 메서드 | 설명 |
|---|---|
클릭: indeterminate → checked, 아니면 checked 뒤집기. disabled·readonly 동안 무시. | |
상자에 키보드 포커스를 주기 / 거두기(focused / blured 발생, 블러는 touched 설정). | |
상자에 키보드 포커스를 주기 / 거두기(focused / blured 발생, 블러는 touched 설정). | |
필수 상자가 체크되지 않은 경우(또는 사용자 정의 오류)가 아니면 true. 조용히. | |
| 같은 결과, 그리고 이제부터 오류 줄이 보임. | |
"" · valueMissing · custom. | |
"" · valueMissing · custom. | |
custom 상태 강제 / 해제. 오류가 즉시 보임. | |
custom 상태 강제 / 해제. 오류가 즉시 보임. | |
checked(생성 시 값 initialChecked)와 value를 복원하고 touched·보고·custom 플래그를 지움. |
| 시그널 | 인자 | 발생 시점 |
|---|---|---|
detail: { value: bool, isValid: bool, checked: bool, indeterminate: bool } — value는 새 checked | 로딩 뒤 checked가 바뀜 — 사용자든 코드든. 초기값과 indeterminate만 바뀔 때는 발생하지 않음. | |
true | 상자가 활성 포커스를 얻음. | |
false | 상자가 포커스를 잃음. 먼저 touched가 설정됨. |
| 항목 | 동작 / 조건 |
|---|---|
상태. 클릭·Space·toggle()이 뒤집고, 바뀔 때마다 changed 발생. | |
클릭: indeterminate → checked, 아니면 checked 뒤집기. disabled·readonly 동안 무시. | |
로딩 뒤 checked가 바뀜 — 사용자든 코드든. 초기값과 indeterminate만 바뀔 때는 발생하지 않음. | |
상태 위에 대시("일부만" 모양)를 그립니다. 다음 클릭이 상자를 체크하고 이를 지웁니다. 단독으로는 changed 없음. | |
체크되면 value, 아니면 null — SyForm.values()가 저장하는 것. | |
체크된 동안 소속 SyForm이 name으로 제출하는 값. | |
소속 SyForm의 values()에서의 키. | |
체크 안 됨 → valueMissing. | |
required는 체크 안 된 상자를 valueMissing으로 만들고, 행 아래 오류 줄("This field is required" 또는 error)은 상자를 떠난(touched) 뒤나 보고된(submitted) 뒤 나타납니다. | |
required는 체크 안 된 상자를 valueMissing으로 만들고, 행 아래 오류 줄("This field is required" 또는 error)은 상자를 떠난(touched) 뒤나 보고된(submitted) 뒤 나타납니다. | |
required는 체크 안 된 상자를 valueMissing으로 만들고, 행 아래 오류 줄("This field is required" 또는 error)은 상자를 떠난(touched) 뒤나 보고된(submitted) 뒤 나타납니다. | |
| 반응 없고 회색. Tab 정지점 아님. 항상 유효. 제출되지 않음. | |
| 포커스는 되지만 바꿀 수 없음. 항상 유효. 제출됨. | |
| disabled가 아니면 Tab이 상자에 멈춥니다(읽기 전용 상자도 Tab 정지점). Space가 토글하고 Enter는 아무 일도 하지 않습니다. 포커스 링은 상자가 포커스를 갖고 disabled가 아닌 동안 상자 둘레에 그려집니다. 상자가 상호작용 가능하면 손 모양 커서, disabled·readonly이면 화살표입니다. | |
disabled는 상자와 라벨을 회색으로 만들고 모든 상호작용과 Tab 정지를 막으며 SyForm.values()가 건너뜁니다. | |
색조: disabled > readonly > focus > hover > enabled, 각각 현재 모드에서. | |
색조: disabled > readonly > focus > hover > enabled, 각각 현재 모드에서. | |
| 상자가 활성 포커스를 얻음. | |
상자가 포커스를 잃음. 먼저 touched가 설정됨. | |
| 상속됨. 체크박스에는 효과가 없습니다. | |
| 상속된 제목 줄(행 위). 보통 비워 둡니다. | |
| 상자 옆 라벨. 클릭해도 토글됩니다. | |
색은 모드와 상태별 Theme.checkbox에서 오고 Theme.scheme을 따릅니다. |