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.Avatar
| 타입 | 정의 / 역할 |
|---|---|
| 프로필 이미지·아이콘·글자·이니셜을 표시합니다. | |
| 아바타를 겹쳐 묶고 표시 한도를 넘은 개수를 보여줍니다. |
미리보기는 Qt 실행 화면의 이미지입니다. 아래 버튼으로 결과를 전환하세요.
SyAvatarGroup은 안에 선언한 SyAvatar 아이템을 한 줄로 배치합니다 — 동전 더미처럼 겹치거나(variant: "stack", 기본) 간격을 두고("grid") — 그리고 하나의 size와 하나의 clickable을 모두에게 적용합니다.
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
id: story
property QtObject settings: QtObject {
id: storyArgs
property string variant: "stack"
property string size: "medium"
property int maxCount: 3
property bool clickable: false
}
Column {
spacing: 12
SyAvatarGroup {
variant: storyArgs.variant
size: storyArgs.size
maxCount: storyArgs.maxCount
clickable: storyArgs.clickable
onSelected: (detail) => output.log(("선택: %1").arg(detail.text))
SyAvatar { text: "홍길동"; variant: "purple" }
SyAvatar { text: "김철수"; variant: "blue" }
SyAvatar { text: "이영희"; variant: "green" }
SyAvatar { text: "박민수"; variant: "orange" }
SyAvatar { text: "최지우"; variant: "teal" }
}
EventLog { id: output }
}
}variant가 구성원의 배치를 정합니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
readonly property string members: [
"SyAvatar { text: " + JSON.stringify("홍길동") + "; variant: \"purple\" }",
"SyAvatar { text: " + JSON.stringify("김철수") + "; variant: \"blue\" }",
"SyAvatar { text: " + JSON.stringify("이영희") + "; variant: \"green\" }"
].join("\n")
Column {
spacing: 16
SyAvatarGroup {
SyAvatar { text: "홍길동"; variant: "purple" }
SyAvatar { text: "김철수"; variant: "blue" }
SyAvatar { text: "이영희"; variant: "green" }
}
SyAvatarGroup {
variant: "grid"
SyAvatar { text: "홍길동"; variant: "purple" }
SyAvatar { text: "김철수"; variant: "blue" }
SyAvatar { text: "이영희"; variant: "green" }
}
}
}selected(detail)은 그룹의 유일한 시그널입니다.
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
SyAvatarGroup {
maxCount: 2; clickable: true
onSelected: (detail) => output.log(("선택: %1").arg(detail.text))
SyAvatar { text: "홍길동"; variant: "purple" }
SyAvatar { text: "김철수"; variant: "blue" }
SyAvatar { text: "이영희"; variant: "green" }
SyAvatar { text: "박민수"; variant: "orange" }
}
EventLog { id: output }
}
}variant 설정을 적용한 격자형 아바타 예제입니다.
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
id: story
property QtObject settings: QtObject {
id: storyArgs
property string variant: "grid"
property string size: "medium"
property int maxCount: 3
property bool clickable: false
}
Column {
spacing: 12
SyAvatarGroup {
variant: storyArgs.variant
size: storyArgs.size
maxCount: storyArgs.maxCount
clickable: storyArgs.clickable
onSelected: (detail) => output.log(("선택: %1").arg(detail.text))
SyAvatar { text: "홍길동"; variant: "purple" }
SyAvatar { text: "김철수"; variant: "blue" }
SyAvatar { text: "이영희"; variant: "green" }
SyAvatar { text: "박민수"; variant: "orange" }
SyAvatar { text: "최지우"; variant: "teal" }
}
EventLog { id: output }
}
}항목을 가리키거나 선택하면 QML 예제와 복사 버튼이 나타납니다.
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| — | — | SyAvatar 구성원(선언 또는 Repeater로 생성). | |
| string | "stack" | stack(크기별 4 / 6 / 8 px 겹침) 또는 grid(2 / 4 / 6 px 간격). | |
| string | "medium" | small 24 · medium 32 · large 40. 모든 구성원에 기록. | |
| bool | false | false면 구성원 자신의 clickable은 그대로. | |
| int | 0 | "+n" 원판 앞에 보이는 구성원 수. 0 = 전부. | |
| var (읽기 전용) | — | 구성원 아이템. | |
| int | — | 그려지는 수 | |
| var (읽기 전용) | — | 숨겨진 구성원. | |
| real (읽기 전용) | — | 아바타 지름 | |
| real (읽기 전용) | — | 구성원 사이의 x 거리. |
| 메서드 | 설명 |
|---|---|
| 구성원에 크기, 클릭 가능 여부, 보임, 위치를 다시 적용(관련 변화마다 자동 실행). |
| 시그널 | 인자 | 시점 |
|---|---|---|
detail: { letter, text, icon, image } | 보이는 구성원이 클릭됨(구성원에서 전달) 또는 "+n" 목록 행이 클릭됨. 둘 다 clickable 필요. |
| 항목 | 동작 / 조건 |
|---|---|
아바타는 SyAvatar처럼 보이는(initials를 가진) 그룹의 자식입니다. | |
완료 시점과 자식, size, clickable, maxCount, variant가 바뀔 때마다 layout()이 실행됩니다: 모든 구성원이 그룹의 size를(그룹이 clickable이면 clickable: true도 — 아니면 구성원 자신의 clickable은 그대로) 받고, 인덱스가 shownCount 미만이면 visible이 되며, x = index × step, y = 0, z = index가 되고, 그 selected가 그룹의 것에 연결됩니다. | |
완료 시점과 자식, size, clickable, maxCount, variant가 바뀔 때마다 layout()이 실행됩니다: 모든 구성원이 그룹의 size를(그룹이 clickable이면 clickable: true도 — 아니면 구성원 자신의 clickable은 그대로) 받고, 인덱스가 shownCount 미만이면 visible이 되며, x = index × step, y = 0, z = index가 되고, 그 selected가 그룹의 것에 연결됩니다. 그룹이 clickable이면 원판과 행이 포인터 커서를 보이고, 행은 호버 시 강조되며, 행을 클릭하면 그 구성원의 detail로 selected가 발생하고 목록이 닫힙니다. 그룹의 selected는 구성원의 selected를 전달한 것입니다: 보이는 구성원에 대해서는 구성원이 클릭 가능하고(그룹이 clickable이면 모든 구성원이 그렇고, 아니면 구성원 자신의 clickable이 기준) disabled가 아닐 때만 발생합니다. 목록의 행은 그룹이 clickable일 때만 발생시킵니다. | |
"+n" 원판 앞에 보이는 구성원 수. 0 = 전부. | |
stack(크기별 4 / 6 / 8 px 겹침) 또는 grid(2 / 4 / 6 px 간격). | |
| 구성원에 크기, 클릭 가능 여부, 보임, 위치를 다시 적용(관련 변화마다 자동 실행). | |
small 24 · medium 32 · large 40. 모든 구성원에 기록. | |
true면 모든 구성원이 clickable이 되고 "+n" 목록 행도 켜짐. false면 구성원 자신의 clickable은 그대로. | |
완료 시점과 자식, size, clickable, maxCount, variant가 바뀔 때마다 layout()이 실행됩니다: 모든 구성원이 그룹의 size를(그룹이 clickable이면 clickable: true도 — 아니면 구성원 자신의 clickable은 그대로) 받고, 인덱스가 shownCount 미만이면 visible이 되며, x = index × step, y = 0, z = index가 되고, 그 selected가 그룹의 것에 연결됩니다. implicitWidth = diameter + (shownCount − 1 + (remaining ? 1 : 0)) × step(구성원이 없으면 0), implicitHeight = diameter. maxCount > 0이면 shownCount = min(maxCount, count)이고 remaining은 그 너머의 구성원을 담습니다. | |
완료 시점과 자식, size, clickable, maxCount, variant가 바뀔 때마다 layout()이 실행됩니다: 모든 구성원이 그룹의 size를(그룹이 clickable이면 clickable: true도 — 아니면 구성원 자신의 clickable은 그대로) 받고, 인덱스가 shownCount 미만이면 visible이 되며, x = index × step, y = 0, z = index가 되고, 그 selected가 그룹의 것에 연결됩니다. | |
완료 시점과 자식, size, clickable, maxCount, variant가 바뀔 때마다 layout()이 실행됩니다: 모든 구성원이 그룹의 size를(그룹이 clickable이면 clickable: true도 — 아니면 구성원 자신의 clickable은 그대로) 받고, 인덱스가 shownCount 미만이면 visible이 되며, x = index × step, y = 0, z = index가 되고, 그 selected가 그룹의 것에 연결됩니다. | |
완료 시점과 자식, size, clickable, maxCount, variant가 바뀔 때마다 layout()이 실행됩니다: 모든 구성원이 그룹의 size를(그룹이 clickable이면 clickable: true도 — 아니면 구성원 자신의 clickable은 그대로) 받고, 인덱스가 shownCount 미만이면 visible이 되며, x = index × step, y = 0, z = index가 되고, 그 selected가 그룹의 것에 연결됩니다. stack: step = diameter − (4 | 6 | 8). grid: step = diameter + (2 | 4 | 6). implicitWidth = diameter + (shownCount − 1 + (remaining ? 1 : 0)) × step(구성원이 없으면 0), implicitHeight = diameter. | |
완료 시점과 자식, size, clickable, maxCount, variant가 바뀔 때마다 layout()이 실행됩니다: 모든 구성원이 그룹의 size를(그룹이 clickable이면 clickable: true도 — 아니면 구성원 자신의 clickable은 그대로) 받고, 인덱스가 shownCount 미만이면 visible이 되며, x = index × step, y = 0, z = index가 되고, 그 selected가 그룹의 것에 연결됩니다. | |
보이는 구성원이 클릭됨(구성원에서 전달) 또는 "+n" 목록 행이 클릭됨. 둘 다 clickable 필요. | |
diameter는 size small / medium / large에 24 / 32 / 40입니다. stack: step = diameter − (4 | 6 | 8). grid: step = diameter + (2 | 4 | 6). implicitWidth = diameter + (shownCount − 1 + (remaining ? 1 : 0)) × step(구성원이 없으면 0), implicitHeight = diameter. | |
implicitWidth = diameter + (shownCount − 1 + (remaining ? 1 : 0)) × step(구성원이 없으면 0), implicitHeight = diameter. | |
implicitWidth = diameter + (shownCount − 1 + (remaining ? 1 : 0)) × step(구성원이 없으면 0), implicitHeight = diameter. maxCount > 0이면 shownCount = min(maxCount, count)이고 remaining은 그 너머의 구성원을 담습니다. 그들은 숨겨지고 마지막 보이는 구성원 뒤에 "+n" 원판(같은 지름, lightgray 토큰, n = remaining.length)이 그려집니다. | |
implicitWidth = diameter + (shownCount − 1 + (remaining ? 1 : 0)) × step(구성원이 없으면 0), implicitHeight = diameter. | |
원판을 호버하면 그 아래 160 px 팝업이 열려 숨겨진 구성원마다 이니셜과 색을 가진 24 px 원판과 label(tooltipContent / text / letter, 또는 "Avatar")을 나열합니다. | |
원판을 호버하면 그 아래 160 px 팝업이 열려 숨겨진 구성원마다 이니셜과 색을 가진 24 px 원판과 label(tooltipContent / text / letter, 또는 "Avatar")을 나열합니다. | |
원판을 호버하면 그 아래 160 px 팝업이 열려 숨겨진 구성원마다 이니셜과 색을 가진 24 px 원판과 label(tooltipContent / text / letter, 또는 "Avatar")을 나열합니다. | |
원판을 호버하면 그 아래 160 px 팝업이 열려 숨겨진 구성원마다 이니셜과 색을 가진 24 px 원판과 label(tooltipContent / text / letter, 또는 "Avatar")을 나열합니다. | |
그룹이 clickable이면 원판과 행이 포인터 커서를 보이고, 행은 호버 시 강조되며, 행을 클릭하면 그 구성원의 detail로 selected가 발생하고 목록이 닫힙니다. | |
그룹의 selected는 구성원의 selected를 전달한 것입니다: 보이는 구성원에 대해서는 구성원이 클릭 가능하고(그룹이 clickable이면 모든 구성원이 그렇고, 아니면 구성원 자신의 clickable이 기준) disabled가 아닐 때만 발생합니다. |
| 항목 | 동작 / 조건 |
|---|---|
SyAvatar(구성원), SyTooltip(단일 아바타에 호버 이름이 필요할 때), SyCard / SyTable(구성원 행이 보통 놓이는 곳). |