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.Tag
| 타입 | 정의 / 역할 |
|---|---|
| 색조와 선택적 닫기 동작을 가진 작은 텍스트 라벨입니다. |
미리보기는 Qt 실행 화면의 이미지입니다. 아래 버튼으로 결과를 전환하세요.
SyTag는 작은 라벨 칩입니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
id: story
property QtObject settings: QtObject {
id: storyArgs
property string text: "디자인"
property string color: "gray"
property string size: "medium"
property bool rounded: false
property bool removable: false
property bool selectable: false
property bool disabled: false
property bool readonly: false
property bool manualClose: false
}
SyTag {
text: storyArgs.text
color: storyArgs.color
size: storyArgs.size
rounded: storyArgs.rounded
removable: storyArgs.removable
selectable: storyArgs.selectable
disabled: storyArgs.disabled
readonly: storyArgs.readonly
manualClose: storyArgs.manualClose
onRemoved: (manual) => { if (!manual) visible = true } // the playground keeps its tag
}
}color는 일반 태그의 팔레트를 고릅니다: gray(기본값) · purple · blue · green · cyan · yellow · orange · red.
import QtQuick
import Syidax.Core
pragma ComponentBehavior: Bound
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
id: story
readonly property var colors: ["gray", "purple", "blue", "green", "cyan", "yellow", "orange", "red"]
Row {
spacing: 8
Repeater {
model: story.colors
delegate: SyTag {
required property string modelData
text: modelData
color: modelData
}
}
}
}size는 칩의 높이를 정합니다: small 18 px · medium 22 px(기본값) · large 26 px.
import QtQuick
import Syidax.Core
pragma ComponentBehavior: Bound
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
id: story
readonly property var sizes: ["small", "medium", "large"]
Row {
spacing: 8
Repeater {
model: story.sizes
delegate: SyTag {
required property string modelData
anchors.verticalCenter: parent.verticalCenter
text: "디자인"
size: modelData
}
}
}
}rounded: true는 칩을 기본 작은 반지름 대신 알약 모양(모서리 반지름 = 높이의 절반)으로 그립니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property bool rounded: true
}
Row {
spacing: 8
SyTag { text: "디자인"; color: "purple"; rounded: storyArgs.rounded }
SyTag { text: "개발"; color: "blue"; rounded: storyArgs.rounded; removable: true; onRemoved: visible = true }
}
}disabled는 태그를 회색 비활성 톤으로 굳힙니다: ×를 누를 수 없고, 선택 가능한 태그를 토글할 수 없으며, setRemove()는 무시됩니다.
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
property QtObject settings: QtObject {
id: storyArgs
property bool disabled: true
property bool readonly: false
}
Row {
spacing: 8
SyTag { id: featureTarget0; text: "디자인"; color: "green"; disabled: storyArgs.disabled; readonly: storyArgs.readonly }
SyTag { id: featureTarget1; text: "개발"; color: "blue"; removable: true; disabled: storyArgs.disabled; readonly: storyArgs.readonly; onRemoved: visible = true }
SyTag { id: featureTarget2; text: "품질"; selectable: true; checked: true; disabled: storyArgs.disabled; readonly: storyArgs.readonly }
}
}selected() — selectable 태그에서 클릭이 checked를 뒤집은 뒤 발생합니다.
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
Row {
spacing: 8
SyTag {
id: design
text: "디자인"; selectable: true
onSelected: { if (true) { output.log(("선택: %1 · checked: %2").arg(design.text).arg(design.checked)) } }
}
SyTag {
id: development
text: "개발"; color: "blue"; removable: true
onRemoved: (isManualRemove) => { if (true) { output.log(("제거: %1 · manual: %2").arg(development.text).arg(isManualRemove)) } }
}
SyButton { id: exampleControl1; visible: !development.visible; size: "small"; variant: "borderless"; text: "되살리기"; onClicked: development.visible = true }
}
EventLog { id: output }
}
}setRemove(force)는 코드로 태그를 제거합니다.
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
Row {
spacing: 8
SyTag {
id: plain
text: "디자인"; color: "purple"; removable: true
onRemoved: (isManualRemove) => output.log(("제거: %1 · manual: %2").arg(plain.text).arg(isManualRemove))
}
SyButton { id: exampleControl1; text: "plain.setRemove()"; variant: "secondary"; size: "small"; enabled: plain.visible; onClicked: plain.setRemove() }
SyButton { id: exampleControl2; visible: !plain.visible; size: "small"; variant: "borderless"; text: "되살리기"; onClicked: plain.visible = true }
}
Row {
spacing: 8
SyTag {
id: draft
text: "초안"; color: "orange"; removable: true; manualClose: true
onRemoved: (isManualRemove) => output.log(("제거: %1 · manual: %2").arg(draft.text).arg(isManualRemove))
}
SyButton { id: exampleControl3; text: "draft.setRemove()"; variant: "secondary"; size: "small"; enabled: draft.visible; onClicked: draft.setRemove() }
SyButton { text: "draft.setRemove(true)"; variant: "secondary"; size: "small"; enabled: draft.visible; onClicked: draft.setRemove(true) }
SyButton { visible: !draft.visible; size: "small"; variant: "borderless"; text: "되살리기"; onClicked: draft.visible = true }
}
EventLog { id: output }
}
}removable · manualClose 설정을 적용한 직접 삭제 처리 예제입니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
id: story
property QtObject settings: QtObject {
id: storyArgs
property string text: "디자인"
property string color: "gray"
property string size: "medium"
property bool rounded: false
property bool removable: true
property bool selectable: false
property bool disabled: false
property bool readonly: false
property bool manualClose: true
}
SyTag {
text: storyArgs.text
color: storyArgs.color
size: storyArgs.size
rounded: storyArgs.rounded
removable: storyArgs.removable
selectable: storyArgs.selectable
disabled: storyArgs.disabled
readonly: storyArgs.readonly
manualClose: storyArgs.manualClose
onRemoved: (manual) => { if (!manual) visible = true } // the playground keeps its tag
}
}항목을 가리키거나 선택하면 QML 예제와 복사 버튼이 나타납니다.
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| string | "" | 라벨. 너비가 이를 따릅니다. | |
| string | "gray" | 일반 태그의 팔레트: gray · purple · blue · green · cyan · yellow · orange · red. 모르는 값은 gray로 돌아갑니다. disabled일 때와 selectable 태그에서는 무시됩니다. | |
| string | "medium" | 높이: small 18 · medium 22 · large 26 px. 라벨은 14 px로 고정입니다. | |
| bool | false | 작은 반지름 대신 알약 모서리(반지름 = 높이의 절반). | |
| bool | false | ×를 보입니다. 없으면 removed가 발생하지 않고 setRemove()는 무시됩니다. | |
| bool | false | ×와 setRemove()가 removed(true)만 발생시키고 태그를 그대로 둡니다. 앱이 setRemove(true)로 제거합니다. | |
| bool | false | 토글 모드: 클릭이 checked를 뒤집고 selected를 발생시킵니다. 선택용 팔레트로 그려집니다. | |
| bool | false | 선택 가능한 태그의 토글 상태 — 클릭이 뒤집고, 코드로도 설정할 수 있습니다(그때는 시그널 없음). selectable이 false면 보이는 효과가 없습니다. | |
| bool | false | 회색 비활성 톤. ×와 토글이 반응하지 않고 setRemove()는 무시됩니다. readonly보다 우선합니다. | |
| bool | false | 읽을 수 있되 반응 없음: ×와 토글이 아무 일도 하지 않고 setRemove()는 무시됩니다. 선택 가능한 태그는 readonly 톤, 일반 태그는 자기 색을 유지합니다. | |
| bool(읽기 전용) | — | selectable && !disabled && !readonly — 클릭이 토글하는지. | |
| bool(읽기 전용) | — | 포인터가 태그 위에 있는지. | |
| real(읽기 전용) | — | size가 결정한 높이(18 / 22 / 26). |
| 메서드 | 설명 |
|---|---|
코드로 제거하며 반환값은 없습니다. force 없이(또는 false로) 부르면 ×와 같습니다: removed(false)를 발생시키고 태그를 숨김 — 또는 manualClose가 있으면 removed(true)만 발생시키고 그대로 둡니다. force === true면 manualClose를 무시합니다: removed(false)를 발생시키고 태그를 숨깁니다. disabled, readonly, removable 아님이면 무시됩니다. |
| 시그널 | 인자 | 시점 |
|---|---|---|
| — | 클릭이 선택 가능한 태그를 토글함. checked에 이미 새 상태가 들어 있습니다. checked를 코드로 바꿀 때와 disabled / readonly일 때는 발생하지 않습니다. | |
isManualRemove: bool | 제거 가능한 태그에서 ×를 눌렀거나 setRemove()가 불림. false: 발생 직후 태그가 스스로 숨음. true: manualClose가 켜져 있어 아무것도 제거되지 않음 — 제거하려면 setRemove(true)를 부르십시오. disabled / readonly / removable 아님일 때는 절대 발생하지 않습니다. |
| 항목 | 동작 / 조건 |
|---|---|
일반 태그의 팔레트: gray · purple · blue · green · cyan · yellow · orange · red. 모르는 값은 gray로 돌아갑니다. disabled일 때와 selectable 태그에서는 무시됩니다. | |
높이: small 18 · medium 22 · large 26 px. 라벨은 14 px로 고정입니다. | |
| 작은 반지름 대신 알약 모서리(반지름 = 높이의 절반). | |
×를 보입니다. 없으면 removed가 발생하지 않고 setRemove()는 무시됩니다. | |
코드로 제거하며 반환값은 없습니다. force 없이(또는 false로) 부르면 ×와 같습니다: removed(false)를 발생시키고 태그를 숨김 — 또는 manualClose가 있으면 removed(true)만 발생시키고 그대로 둡니다. force === true면 manualClose를 무시합니다: removed(false)를 발생시키고 태그를 숨깁니다. disabled, readonly, removable 아님이면 무시됩니다. | |
×와 setRemove()가 removed(true)만 발생시키고 태그를 그대로 둡니다. 앱이 setRemove(true)로 제거합니다. | |
제거 가능한 태그에서 ×를 눌렀거나 setRemove()가 불림. false: 발생 직후 태그가 스스로 숨음. true: manualClose가 켜져 있어 아무것도 제거되지 않음 — 제거하려면 setRemove(true)를 부르십시오. disabled / readonly / removable 아님일 때는 절대 발생하지 않습니다. | |
manualClose: false(기본값): 태그가 removed(false)를 발생시키고 즉시 자기 visible을 false로 바꿉니다. 숨는 것이지 파괴되는 것이 아닙니다 — visible = true로 되살리거나 직접 파괴하십시오. | |
회색 비활성 톤. ×와 토글이 반응하지 않고 setRemove()는 무시됩니다. readonly보다 우선합니다. | |
읽을 수 있되 반응 없음: ×와 토글이 아무 일도 하지 않고 setRemove()는 무시됩니다. 선택 가능한 태그는 readonly 톤, 일반 태그는 자기 색을 유지합니다. | |
토글 모드: 클릭이 checked를 뒤집고 selected를 발생시킵니다. 선택용 팔레트로 그려집니다. | |
선택 가능한 태그의 토글 상태 — 클릭이 뒤집고, 코드로도 설정할 수 있습니다(그때는 시그널 없음). selectable이 false면 보이는 효과가 없습니다. | |
클릭이 선택 가능한 태그를 토글함. checked에 이미 새 상태가 들어 있습니다. checked를 코드로 바꿀 때와 disabled / readonly일 때는 발생하지 않습니다. | |
| 태그에는 키보드 처리가 없습니다. 토글과 ×는 포인터에만 반응합니다. 선택 가능한 태그에 호버하면 호버 톤이 보이고, 활성 ×에 호버하면 색이 바뀝니다. |