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.Popconfirm
| 타입 | 정의 / 역할 |
|---|---|
| 확인·취소 동작을 제공하는 트리거 기준 확인 팝업입니다. |
미리보기는 Qt 실행 화면의 이미지입니다. 아래 버튼으로 결과를 전환하세요.
SyPopconfirm은 행동하기 전에 묻는 팝오버입니다: 확인이 필요한 아이템 — 삭제 버튼, 게시 버튼 — 안에 선언하고 그 안에 질문을 선언하면, 아이템 클릭이 내용 아래에 Cancel과 OK가 있는 팝컨펌을 엽니다.
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 position: "top"
property string trigger: "click"
property bool arrow: true
property string confirmText: "OK"
property string cancelText: "Cancel"
property bool sticky: false
property string animation: "none"
}
Item {
width: 320
height: 140
Column {
anchors.centerIn: parent
spacing: 12
SyButton {
text: "삭제"
SyPopconfirm { id: exampleControl1;
position: storyArgs.position
trigger: storyArgs.trigger
arrow: storyArgs.arrow
confirmText: storyArgs.confirmText
cancelText: storyArgs.cancelText
sticky: storyArgs.sticky
animation: storyArgs.animation
onSelected: (choice) => output.log(choice)
Text { text: "이 행을 삭제할까요?"; font.family: Theme.fontFamily; font.pixelSize: 13; color: Theme.popconfirm.textEnabled }
}
}
EventLog { id: output; width: 280 }
}
}
}position · arrow의 설정과 실행 결과를 비교합니다.
import QtQuick
import Syidax.Core
pragma ComponentBehavior: Bound
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
// Focused Gallery routes: keep only the selected API and its prerequisites.
id: story
readonly property var positions: ["top", "bottom"]
Item {
width: 420
height: 300
Row {
anchors.centerIn: parent
spacing: 120
Repeater {
model: story.positions
delegate: SyButton {
id: cell
required property string modelData
text: cell.modelData
width: 100
SyPopconfirm { id: featureTarget0;
position: cell.modelData; arrow: true; trigger: "none"
Component.onCompleted: { Qt.callLater(setOpen); }
Text { text: "이 행을 삭제할까요?"; font.family: Theme.fontFamily; font.pixelSize: 13; color: Theme.popconfirm.textEnabled }
}
}
}
}
}
}confirmText와 cancelText는 두 버튼의 라벨입니다 — 기본 "OK"와 "Cancel"; 결정의 동사로 바꾸십시오("예, 게시" / "아직", "삭제" / "유지").
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
SyButton {
text: "게시"
SyPopconfirm { id: featureTarget0;
confirmText: "지금 게시"; cancelText: "아직"; arrow: true
Column {
spacing: 4
Text { text: "페이지를 게시할까요?"; font.weight: Font.Medium; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.popconfirm.textEnabled }
Text { text: "링크가 있는 모두가 보게 됩니다."; color: Theme.semantic.textSubtle; font.family: Theme.fontFamily; font.pixelSize: 12 }
}
}
}
}selected(choice)는 두 버튼 중 하나를 누를 때 — 또는 okClick() / cancelClick()을 부를 때 — choice에 문자열 "ok" 또는 "cancel"을 담아 발생하며, 직후 팝컨펌이 닫힙니다.
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: "삭제"
SyPopconfirm {
id: confirm
arrow: true
onSelected: (choice) => { if (true) { output.log(("selected: %1").arg(choice)) } }
onVisibleChanged: { if (true) { output.log(("visible: %1").arg(confirm.visible)) } }
Text { text: "이 행을 삭제할까요?"; font.family: Theme.fontFamily; font.pixelSize: 13; color: Theme.popconfirm.textEnabled }
}
}
EventLog { id: output }
}
}setOpen()은 팝컨펌을 열고 setClose()는 닫습니다 — trigger와 상관없이 코드에서.
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: 24
Item {
width: 560; height: 220
SyButton {
x: 24; y: 24
text: "삭제"; SyPopconfirm { id: confirm; trigger: "none"; arrow: true; onSelected: (choice) => output.log(choice); Text { text: "이 행을 삭제할까요?"; font.family: Theme.fontFamily; font.pixelSize: 13; color: Theme.popconfirm.textEnabled } } }
}
Flow {
objectName: "exampleCommands"
width: 560
spacing: 8
SyButton { id: exampleControl1; visible: true; text: "confirm.setOpen()"; variant: "secondary"; size: "small"; onClicked: confirm.setOpen() }
SyButton { id: exampleControl2; visible: true; text: "confirm.setClose()"; variant: "secondary"; size: "small"; onClicked: confirm.setClose() }
SyButton { id: exampleControl3; visible: true; text: "confirm.okClick()"; variant: "secondary"; size: "small"; onClicked: confirm.okClick() }
SyButton { id: exampleControl4; visible: true; text: "confirm.cancelClick()"; variant: "secondary"; size: "small"; onClicked: confirm.cancelClick() }
}
EventLog { id: output }
}
}arrow 설정을 적용한 화살표 없는 확인창 예제입니다.
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 position: "top"
property string trigger: "click"
property bool arrow: false
property string confirmText: "OK"
property string cancelText: "Cancel"
property bool sticky: false
property string animation: "none"
}
Item {
width: 320
height: 140
Column {
anchors.centerIn: parent
spacing: 12
SyButton {
text: "삭제"
SyPopconfirm { id: exampleControl1;
position: storyArgs.position
trigger: storyArgs.trigger
arrow: storyArgs.arrow
confirmText: storyArgs.confirmText
cancelText: storyArgs.cancelText
sticky: storyArgs.sticky
animation: storyArgs.animation
onSelected: (choice) => output.log(choice)
Text { text: "이 행을 삭제할까요?"; font.family: Theme.fontFamily; font.pixelSize: 13; color: Theme.popconfirm.textEnabled }
}
}
EventLog { id: output; width: 280 }
}
}
}항목을 가리키거나 선택하면 QML 예제와 복사 버튼이 나타납니다.
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| list (기본 속성) | — | 질문: 안에 선언한 아이템, 버튼 위에 보입니다. | |
| string | "OK" | primary 버튼의 라벨(selected("ok") 발생). | |
| string | "Cancel" | 보조 버튼의 라벨(selected("cancel") 발생). | |
| string | "top" | "top" · "topLeft" · "topRight" · "bottom" · "bottomLeft" · "bottomRight" · "left" · "leftTop" · "leftBottom" · "right" · "rightTop" · "rightBottom". | |
| string | "click" | "click"(앵커 탭이 토글) · "none"(코드만). | |
| bool | false | 앵커를 향한 포인터를 보입니다. | |
| bool | false | Escape / 바깥 누름 닫힘 없음. 버튼과 setClose()는 여전히 닫습니다. | |
| int | 0 | 열기 / 닫기까지의 밀리초. | |
| int | 0 | 열기 / 닫기까지의 밀리초. | |
| string | "none" | "none" · "fade"; 속도 "x-fast" · "fast" · "medium" · "slow" · "x-slow". | |
| string | "fast" | "none" · "fade"; 속도 "x-fast" · "fast" · "medium" · "slow" · "x-slow". | |
| Item | 선언된 아이템 | 따라다닐 아이템(세 단계 안에서 hovered를 가진 가장 가까운 조상으로 결정). | |
| bool (읽기 전용) | — | 팝컨펌이 보임. | |
| string (읽기 전용) | — | 뒤집기 뒤의 쪽, -start / -end 포함. | |
| color | 팝컨펌 토큰 | 면의 모양. | |
| color | 옅은 테두리 | 면의 모양. | |
| real | 2 | 면의 모양. | |
| bool | true | 면의 모양. | |
| real | 12 | 내용과 가장자리 사이의 공간. | |
| real | 10 / 4 | 베이스 팝업 기하. | |
| bool | true | 베이스 팝업 기하. | |
| bool | false | 베이스 팝업 기하. | |
| 읽기 전용 | — | 계산된 속도, 현재 쪽, 앵커가 열기를 받는지, 오버레이 좌표의 앵커 사각형. | |
| 읽기 전용 | — | 계산된 속도, 현재 쪽, 앵커가 열기를 받는지, 오버레이 좌표의 앵커 사각형. | |
| 읽기 전용 | — | 계산된 속도, 현재 쪽, 앵커가 열기를 받는지, 오버레이 좌표의 앵커 사각형. | |
| 읽기 전용 | — | 계산된 속도, 현재 쪽, 앵커가 열기를 받는지, 오버레이 좌표의 앵커 사각형. |
| 메서드 | 설명 |
|---|---|
selected("ok")를 발생시키고 닫습니다 — OK 버튼이 하는 일 그대로. 닫힌 동안에도 동작합니다. | |
selected("cancel")를 발생시키고 닫습니다 — Cancel 버튼이 하는 일 그대로. | |
대기 중인 지연을 취소하고 트리거와 상관없이 엽니다 — 앵커가 disabled / readonly / 비활성이면 제외. | |
대기 중인 지연을 취소하고 selected 없이 닫습니다. sticky여도 닫습니다. | |
| 베이스 팝업의 즉시 열기 / 닫기와 트리거식 토글. | |
| 베이스 팝업의 즉시 열기 / 닫기와 트리거식 토글. | |
| 베이스 팝업의 즉시 열기 / 닫기와 트리거식 토글. | |
| 배치를 다시 계산합니다. 앵커·크기·창 변화에 자동입니다. |
| 시그널 | 인자 | 발생 시점 |
|---|---|---|
choice: string — "ok" 또는 "cancel" | 버튼을 눌렀거나 okClick() / cancelClick()을 불렀을 때. 직후 팝업이 닫힙니다. Escape, 바깥 누름, setClose(), 앵커 토글에는 발생하지 않습니다. | |
—(visible / isOpen을 읽으십시오) | 어떤 경로로든 팝업이 열리거나 닫힘. | |
| — | 팝업이 표시되기 직전에 발생합니다. | |
| — | 팝업의 열기 전환이 끝나면 발생합니다. | |
| — | 팝업이 숨겨지기 직전에 발생합니다. | |
| — | 팝업의 닫기 전환이 끝나면 발생합니다. |
| 항목 | 동작 / 조건 |
|---|---|
팝컨펌이 선언된 아이템. 컨트롤의 내용 안에서는 최대 세 단계 부모를 올라가 불리언 hovered를 가진 가장 가까운 아이템을 찾으므로 컨트롤 자체가 앵커입니다. 앵커의 자식이 되고 창 오버레이에 그려지며 앵커를 따라다닙니다. | |
"click"(앵커 탭이 토글) · "none"(코드만). | |
대기 중인 지연을 취소하고 트리거와 상관없이 엽니다 — 앵커가 disabled / readonly / 비활성이면 제외. | |
대기 중인 지연을 취소하고 selected 없이 닫습니다. sticky여도 닫습니다. | |
disabled나 readonly인 앵커는 열지 않으며, opendelay는 클릭에 적용되며, 어떤 경로로든 — Escape, 바깥 누름, close() — 닫히면 대기 중인 지연 열기가 취소됩니다. | |
disabled나 readonly인 앵커는 열지 않으며, opendelay는 클릭에 적용되며, 어떤 경로로든 — Escape, 바깥 누름, close() — 닫히면 대기 중인 지연 열기가 취소됩니다. | |
버튼을 눌렀거나 okClick() / cancelClick()을 불렀을 때. 직후 팝업이 닫힙니다. Escape, 바깥 누름, setClose(), 앵커 토글에는 발생하지 않습니다. | |
selected("ok")를 발생시키고 닫습니다 — OK 버튼이 하는 일 그대로. 닫힌 동안에도 동작합니다. | |
selected("cancel")를 발생시키고 닫습니다 — Cancel 버튼이 하는 일 그대로. | |
| 어떤 경로로든 팝업이 열리거나 닫힘. | |
visibleChanged / closed()로 알아채십시오. | |
Escape / 바깥 누름 닫힘 없음. 버튼과 setClose()는 여전히 닫습니다. | |
내용(기본 속성; 아이템에 크기나 Column을 주십시오) 위에, 그 아래 오른쪽 정렬된 small 버튼 두 개의 행: cancelText(기본 스타일) 다음 confirmText(primary), 4 px 간격, 내용 아래 8 px. 내용은 최소한 버튼만큼 넓습니다. 12 px 여백, 2 px 모서리, 옅은 1 px 테두리, 부드러운 그림자. 면은 글자색을 정하지 않으므로 Theme.popconfirm.textEnabled를 쓰십시오. | |
"top" · "topLeft" · "topRight" · "bottom" · "bottomLeft" · "bottomRight" · "left" · "leftTop" · "leftBottom" · "right" · "rightTop" · "rightBottom". | |
뒤집기 뒤의 쪽, -start / -end 포함. | |
| 앵커를 향한 포인터를 보입니다. | |
애니메이션 — animation: "fade"("none"이 아닌 모든 이름)는 animationMs(x-fast 100 · fast 150 · medium 250 · slow 350 · x-slow 500)에 걸쳐 페이드합니다. | |
애니메이션 — animation: "fade"("none"이 아닌 모든 이름)는 animationMs(x-fast 100 · fast 150 · medium 250 · slow 350 · x-slow 500)에 걸쳐 페이드합니다. | |
| 팝컨펌이 보임. | |
상태 — isOpen은 팝업의 visible입니다. |
| 항목 | 동작 / 조건 |
|---|---|
더 큰 결정에는 SyModal, 결정 없는 정보에는 SyPopover, 안내에는 SyTooltip; 흔한 앵커이자 안의 두 버튼으로 SyButton. | |
| closable(기본 true)은 외부 클릭/Escape 종료를 제어하며 sticky와 독립입니다. OK/Cancel 및 setClose()는 명시적 종료이므로 closable=false에서도 동작합니다. |