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.Colorpicker
| 타입 | 정의 / 역할 |
|---|---|
| 채도·색상·불투명도와 색상 형식 입력을 제공하는 독립 패널입니다. | |
| 팝업 패널을 열거나 인라인으로 표시하는 색상 선택기입니다. |
미리보기는 Qt 실행 화면의 이미지입니다. 아래 버튼으로 결과를 전환하세요.
SyColorpicker는 위로 색 패널을 여는 색 견본입니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string value: "#5A2A82"
property string format: "hex"
property bool showText: true
property string trigger: "click"
property bool hideOpacity: false
property bool disabled: false
property bool readonly: false
property bool inline: false
}
SyColorpicker { id: exampleControl1;
value: storyArgs.value
format: storyArgs.format
showText: storyArgs.showText
trigger: storyArgs.trigger
hideOpacity: storyArgs.hideOpacity
disabled: storyArgs.disabled
readonly: storyArgs.readonly
inline: storyArgs.inline
onChanged: (detail) => { if (storyArgs.value !== detail.value) storyArgs.value = detail.value }
}
}format은 피커가 보고하는 색의 표기입니다: "hex"(#1e90ff), "rgb"(rgb(30, 144, 255)), "hsb"(hsb(210, 88%, 100%)).
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
Column {
spacing: 12
SyColorpicker { id: exampleControl1; value: "#1e90ff"; showText: true }
SyColorpicker { value: "#1e90ff"; format: "rgb"; showText: true }
SyColorpicker { value: "#1e90ff"; format: "hsb"; showText: true }
}
}inline: true는 패널 자체를 그 자리에 보입니다 — 견본도 팝업도 opened / closed도 없고, open() / close()는 아무 일도 하지 않습니다.
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
SyColorpicker { inline: true; value: "#ff7a00"; onChanged: (detail) => output.log(detail.value) }
EventLog { id: output }
}
}disabled는 견본을 비활성 톤으로 그리고 Tab 순서에서 빼며 패널을 절대 열지 않습니다.
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: 12
SyColorpicker { id: featureTarget0; visible: true; value: "#5A2A82"; showText: true; disabled: true }
SyColorpicker { id: featureTarget1; visible: true; value: "#5A2A82"; showText: true; readonly: true }
SyColorpicker { id: featureTarget2; visible: true; value: "#5A2A82"; showText: true; hideOpacity: true }
SyColorpicker { id: featureTarget3; visible: true; value: "#5A2A82"; showText: true; trigger: "hover" }
}
}changed(detail) — 패널에서 일어난 모든 변화(영역 드래그, 색상·불투명도 슬라이더, hex나 R G B / H S B 필드 편집, 형식 전환)와 setColor()에 발생합니다.
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
SyColorpicker { id: exampleControl1;
value: "#5A2A82"; showText: true
onChanged: (detail) => { if (true) { output.log(("changed: %1 · opacity %2").arg(detail.value).arg(detail.opacity)) } }
onOpened: { if (true) { output.log("opened") } }
onClosed: { if (true) { output.log("closed") } }
onFormatChange: (detail) => { if (true) { output.log(("format: %1").arg(detail.format)) } }
}
EventLog { id: output }
}
}open()은 견본 위에 팝업 패널을 열고 opened를 발생시킵니다.
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: 12
Item {
width: 560; height: 430
SyColorpicker {
x: 24; y: 24
id: brand; value: "#5A2A82"; showText: true }
}
Flow {
objectName: "exampleCommands"
width: 560
spacing: 8
SyButton { id: exampleControl1; visible: true; text: "brand.open()"; variant: "secondary"; size: "small"; onClicked: brand.open() }
SyButton { id: exampleControl2; visible: true; text: "brand.close()"; variant: "secondary"; size: "small"; onClicked: brand.close() }
SyButton { id: exampleControl3; visible: true; text: "brand.setColor(\"#1e90ff\")"; variant: "secondary"; size: "small"; onClicked: brand.setColor("#1e90ff") }
SyButton { id: exampleControl4; visible: true; text: "brand.setColor(\"#1e90ff\", \"rgb\")"; variant: "secondary"; size: "small"; onClicked: brand.setColor("#1e90ff", "rgb") }
}
Text {
text: "brand.value === " + JSON.stringify(brand.value) + " brand.format === " + JSON.stringify(brand.format)
font.family: Theme.monoFontFamily
font.pixelSize: 12
color: Theme.semantic.textSubtle
}
}
}hideOpacity 설정을 적용한 불투명 색상 예제입니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string value: "#5A2A82"
property string format: "hex"
property bool showText: true
property string trigger: "click"
property bool hideOpacity: true
property bool disabled: false
property bool readonly: false
property bool inline: false
}
SyColorpicker { id: exampleControl1;
value: storyArgs.value
format: storyArgs.format
showText: storyArgs.showText
trigger: storyArgs.trigger
hideOpacity: storyArgs.hideOpacity
disabled: storyArgs.disabled
readonly: storyArgs.readonly
inline: storyArgs.inline
onChanged: (detail) => { if (storyArgs.value !== detail.value) storyArgs.value = detail.value }
}
}inline 설정을 적용한 인라인 색상 편집 예제입니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string value: "#5A2A82"
property string format: "hex"
property bool showText: true
property string trigger: "click"
property bool hideOpacity: false
property bool disabled: false
property bool readonly: false
property bool inline: true
}
SyColorpicker {
value: storyArgs.value
format: storyArgs.format
showText: storyArgs.showText
trigger: storyArgs.trigger
hideOpacity: storyArgs.hideOpacity
disabled: storyArgs.disabled
readonly: storyArgs.readonly
inline: storyArgs.inline
onChanged: (detail) => { if (storyArgs.value !== detail.value) storyArgs.value = detail.value }
}
}항목을 가리키거나 선택하면 QML 예제와 복사 버튼이 나타납니다.
SyColorpicker| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| string | "#5A2A82" | 어떤 표기든 되는 색: #rrggbb · rgb(r, g, b) · hsb(h, s%, b%). 패널은 format으로 다시 쓰고, 코드로 대입하면 시그널이 없습니다. | |
| string | "" | 해석되면 생성 시 한 번 value를 대체합니다. | |
| real | 1 | 알파 0 … 1(불투명도 슬라이더). value에는 포함되지 않습니다. | |
| string | "hex" | hex · rgb · hsb — formattedValue, 견본 글자, changed, 패널 입력의 표기. | |
| bool | false | 패널에 불투명도 슬라이더 없음. | |
| string | "click" | click · hover — 패널을 여는 것(클릭은 항상 토글). | |
| bool | false | 견본 옆에 형식대로의 값. | |
| bool | false | 패널을 그 자리에. 트리거도 팝업도 opened / closed도 없음. | |
| bool | false | 비활성 톤, 포커스 없음, 열리지 않음. inline 패널은 반응 없음. | |
| bool | false | readonly 톤, 열리지 않음. inline 패널은 반응 없음. | |
| bool(읽기 전용) | — | 팝업 패널이 열려 있는지(inline이면 항상 false). | |
| bool(읽기 전용) | — | !disabled && !readonly. | |
| bool(읽기 전용) | — | 견본에 키보드 포커스가 있는지. | |
| list(읽기 전용) | — | 해석된 [r, g, b](value가 해석되지 않으면 검정). | |
| color(읽기 전용) | — | Qt 색으로서의 rgb(불투명). | |
| string(읽기 전용) | — | format대로 쓴 색. |
SyColorpickerContent(패널, 단독 사용 가능)| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| string | "#ff0000" | 보일 색. 어떤 표기든 가능. 읽어 들이면 hue · saturation · brightness가 갱신됩니다. | |
| real | 1 | 불투명도 슬라이더가 보이는 알파. | |
| bool | false | 불투명도 슬라이더 없음. | |
| string | "hex" | 어떤 입력이 보이는지와 colorChange의 표기. | |
| bool | false | 패널이 흐려지고 반응하지 않음. | |
| bool | false | 패널이 흐려지고 반응하지 않음. | |
| real | 0 | 작업 중인 색(0–359 · 0–100 · 0–100). | |
| real | 100 | 작업 중인 색(0–359 · 0–100 · 0–100). | |
| real | 100 | 작업 중인 색(0–359 · 0–100 · 0–100). | |
| 읽기 전용 | — | 작업 색의 [r, g, b], #rrggbb, Qt 색, 그리고 순수 색상. | |
| 읽기 전용 | — | 작업 색의 [r, g, b], #rrggbb, Qt 색, 그리고 순수 색상. | |
| 읽기 전용 | — | 작업 색의 [r, g, b], #rrggbb, Qt 색, 그리고 순수 색상. | |
| 읽기 전용 | — | 작업 색의 [r, g, b], #rrggbb, Qt 색, 그리고 순수 색상. |
SyColorpicker| 메서드 | 설명 |
|---|---|
팝업 패널을 열고 opened를 발생시킵니다. disabled, readonly, inline, 이미 열림이면 무시됩니다. | |
팝업 패널을 닫습니다(열려 있었다면 closed 발생). | |
코드에서 색을 정합니다. value가 해석되지 않으면 무시됩니다. 다른 format이 먼저 적용되고(formatChange), 그다음 현재 형식의 색으로 changed가 발생합니다. colorOpacity는 건드리지 않습니다. |
SyColorpickerContent| 메서드 | 설명 |
|---|---|
시그널 없이 색을 보입니다(value 속성이 하는 일). | |
작업 색을 정하고(null 성분은 값 유지) colorChange를 발생시킵니다. disabled / readonly면 무시됩니다. | |
작업 색을 정하고(null 성분은 값 유지) colorChange를 발생시킵니다. disabled / readonly면 무시됩니다. | |
알파 0 … 1을 정하고 colorChange를 발생시킵니다. disabled / readonly면 무시됩니다. | |
format을 바꾸고 새 표기로 colorChange를 발생시킵니다. |
SyColorpicker| 시그널 | 인자 | 시점 |
|---|---|---|
detail: { value, opacity, format } | 패널에서의 모든 변화, 또는 setColor(). value는 format 표기입니다. 코드가 value / colorOpacity를 대입할 때는 발생하지 않습니다. | |
| — | 팝업 패널이 열림 / 닫힘(클릭, 호버, Escape, 바깥 누름, open() / close()). inline이면 절대 발생하지 않습니다. | |
| — | 팝업 패널이 열림 / 닫힘(클릭, 호버, Escape, 바깥 누름, open() / close()). inline이면 절대 발생하지 않습니다. | |
detail: { format, value } | 형식 셀렉트가 바뀌었거나 setColor()가 다른 형식을 넘김. value는 이미 새 형식입니다. 뒤이어 changed가 발생합니다. |
SyColorpickerContent| 시그널 | 인자 | 시점 |
|---|---|---|
detail: { value, opacity, format } | 패널에서의 모든 변화(value는 format 표기). |
| 항목 | 동작 / 조건 |
|---|---|
어떤 표기든 되는 색: #rrggbb · rgb(r, g, b) · hsb(h, s%, b%). 패널은 format으로 다시 쓰고, 코드로 대입하면 시그널이 없습니다. | |
해석된 [r, g, b](value가 해석되지 않으면 검정). | |
Qt 색으로서의 rgb(불투명). | |
format대로 쓴 색. | |
hex · rgb · hsb — formattedValue, 견본 글자, changed, 패널 입력의 표기. | |
해석되면 생성 시 한 번 value를 대체합니다. | |
알파 0 … 1(불투명도 슬라이더). value에는 포함되지 않습니다. | |
| 견본 옆에 형식대로의 값. | |
click · hover — 패널을 여는 것(클릭은 항상 토글). | |
opened / closed가 팝업을 따르고 isOpen이 상태를 알려 줍니다. opened / closed는 팝업에만 해당합니다. | |
opened / closed가 팝업을 따르고 isOpen이 상태를 알려 줍니다. opened / closed는 팝업에만 해당합니다. | |
| 팝업 패널이 열려 있는지(inline이면 항상 false). | |
| 패널에 불투명도 슬라이더 없음. | |
보일 색. 어떤 표기든 가능. 읽어 들이면 hue · saturation · brightness가 갱신됩니다. | |
| 불투명도 슬라이더가 보이는 알파. | |
패널에서의 모든 변화, 또는 setColor(). value는 format 표기입니다. 코드가 value / colorOpacity를 대입할 때는 발생하지 않습니다. | |
코드에서 색을 정합니다. value가 해석되지 않으면 무시됩니다. 다른 format이 먼저 적용되고(formatChange), 그다음 현재 형식의 색으로 changed가 발생합니다. colorOpacity는 건드리지 않습니다. | |
형식 셀렉트가 바뀌었거나 setColor()가 다른 형식을 넘김. value는 이미 새 형식입니다. 뒤이어 changed가 발생합니다. | |
| 비활성 톤, 포커스 없음, 열리지 않음. inline 패널은 반응 없음. | |
| readonly 톤, 열리지 않음. inline 패널은 반응 없음. | |
패널을 그 자리에. 트리거도 팝업도 opened / closed도 없음. |