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.Card
| 타입 | 정의 / 역할 |
|---|---|
| 머리말·본문·꼬리말을 담는 콘텐츠 상자입니다. |
미리보기는 Qt 실행 화면의 이미지입니다. 아래 버튼으로 결과를 전환하세요.
SyCard는 관련된 내용을 묶는 테두리 패널입니다: 위의 선택적인 커버, 굵은 cardTitle(또는 직접 만든 header 아이템)과 오른쪽 끝의 headerActions가 있는 헤더, 카드 안에 선언한 본문, 그리고 푸터.
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 cardTitle: "분기 보고서"
property bool collapsible: false
property bool active: true
property bool showFooter: true
property bool backdrop: false
property bool showIcon: true
}
SyCard {
width: 360
cardTitle: storyArgs.cardTitle
collapsible: storyArgs.collapsible
active: storyArgs.active
showFooter: storyArgs.showFooter
backdrop: storyArgs.backdrop
showIcon: storyArgs.showIcon
icon: Icons.pdfViewerDocument
footer: SyButton { text: "열기"; size: "small"; variant: "primary" }
Text { width: parent.width; wrapMode: Text.WordWrap; text: "이번 분기 매출은 12 % 늘었고 비용은 그대로였습니다. 지역별 세부 내역은 다음 페이지에 이어집니다."; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.card.bodyTextEnabled }
}
}collapsible: 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
property QtObject settings: QtObject {
id: storyArgs
property bool collapsible: true
property bool active: true
}
SyCard { id: featureTarget0;
width: 360; cardTitle: "분기 보고서"; collapsible: storyArgs.collapsible; active: storyArgs.active
onToggled: (active) => storyArgs.active = active // keep the control in step with the chevron
Text { width: parent.width; wrapMode: Text.WordWrap; text: "이번 분기 매출은 12 % 늘었고 비용은 그대로였습니다. 지역별 세부 내역은 다음 페이지에 이어집니다."; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.card.bodyTextEnabled }
}
}cover는 헤더 위에 테두리 안을 끝에서 끝까지 채워 보이는 아이템을 받습니다 — 보통 Image나 색 띠입니다.
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 showCover: true
}
SyCard { id: featureTarget0;
width: 360; cardTitle: "분기 보고서"; showCover: storyArgs.showCover
cover: Rectangle { width: parent ? parent.width : 0; height: 96; color: Theme.semantic.backgroundBrandDefault }
Text { width: parent ? parent.width : 0; wrapMode: Text.WordWrap; text: "이번 분기 매출은 12 % 늘었고 비용은 그대로였습니다. 지역별 세부 내역은 다음 페이지에 이어집니다."; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.card.bodyTextEnabled }
}
}헤더 행은 40 px 높이(내용이 필요하면 더 높게)로 커버 아래에 있습니다.
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
SyCard { id: featureTarget0;
width: 360
header: Row {
spacing: 6
SyAvatar { text: "홍길동"; size: "small"; variant: "purple" }
Text { anchors.verticalCenter: parent.verticalCenter; text: "홍길동"; font.family: Theme.fontFamily; font.pixelSize: 14; font.weight: Font.Bold; color: Theme.card.headerTextEnabled }
}
headerActions: SyButton { text: "공유"; size: "small"; variant: "borderless" }
Text { width: parent.width; wrapMode: Text.WordWrap; text: "이번 분기 매출은 12 % 늘었고 비용은 그대로였습니다. 지역별 세부 내역은 다음 페이지에 이어집니다."; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.card.bodyTextEnabled }
}
}backdrop: true는 부드러운 그림자로 카드를 띄웁니다 — 오른쪽 아래로 어긋난 반투명 층 셋이 테두리 뒤에 그려집니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property bool backdrop: true
}
Item {
width: 380
height: card.height + 20
SyCard {
id: card
x: 8
y: 8
width: 360; cardTitle: "분기 보고서"; backdrop: storyArgs.backdrop
Text { width: parent.width; wrapMode: Text.WordWrap; text: "이번 분기 매출은 12 % 늘었고 비용은 그대로였습니다. 지역별 세부 내역은 다음 페이지에 이어집니다."; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.card.bodyTextEnabled }
}
}
}카드는 기본적으로 내용 높이에 맞춰집니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
SyCard {
width: 360; height: 160; cardTitle: "분기 보고서"
Column {
width: parent.width
Repeater { model: 8; Text { text: "이번 분기 매출은 12 % 늘었고 비용은 그대로였습니다. 지역별 세부 내역은 다음 페이지에 이어집니다."; width: parent.width; wrapMode: Text.WordWrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.card.bodyTextEnabled } }
}
}
}toggled(active)는 카드의 유일한 사용자 정의 시그널입니다.
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
SyCard {
id: report
width: 360; cardTitle: "분기 보고서"; collapsible: true
onToggled: (active) => output.log(("toggled: active = %1").arg(active))
Text { width: parent.width; wrapMode: Text.WordWrap; text: "이번 분기 매출은 12 % 늘었고 비용은 그대로였습니다. 지역별 세부 내역은 다음 페이지에 이어집니다."; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.card.bodyTextEnabled }
}
Row {
spacing: 8
SyButton { id: exampleControl1; text: "report.collapse()"; variant: "secondary"; size: "small"; onClicked: report.collapse() }
SyButton { id: exampleControl2; text: "report.expand()"; variant: "secondary"; size: "small"; onClicked: report.expand() }
}
EventLog { id: output }
}
}- toggle() — active를 뒤집되 collapsible이 켜져 있을 때만.
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
SyCard {
id: report
width: 360; cardTitle: "분기 보고서"; collapsible: true; closeDelay: 300
Text { width: parent.width; wrapMode: Text.WordWrap; text: "이번 분기 매출은 12 % 늘었고 비용은 그대로였습니다. 지역별 세부 내역은 다음 페이지에 이어집니다."; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.card.bodyTextEnabled }
}
Row {
spacing: 8
SyButton { id: exampleControl1; visible: true; text: "report.toggle()"; variant: "secondary"; size: "small"; onClicked: report.toggle() }
SyButton { id: exampleControl2; visible: true; text: "report.expand()"; variant: "secondary"; size: "small"; onClicked: report.expand() }
SyButton { id: exampleControl3; visible: true; text: "report.collapse()"; variant: "secondary"; size: "small"; onClicked: report.collapse() }
}
Text {
text: "report.active === " + report.active
font.family: Theme.monoFontFamily
font.pixelSize: 12
color: Theme.semantic.textSubtle
}
}
}항목을 가리키거나 선택하면 QML 예제와 복사 버튼이 나타납니다.
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| — | — | 본문 아이템(12 px 여백). | |
| list (alias) | — | 헤더 위의 아이템. showCover일 때 그려짐. | |
| list (alias) | — | 제목 행을 대신하는 아이템. | |
| list (alias) | — | 헤더 오른쪽 끝의 아이템. | |
| list (alias) | — | 푸터의 아이템. showFooter일 때 그려짐. | |
| string | "" | 굵은 제목(header에 아이템이 있으면 숨김). | |
| bool | false | 셰브론. toggle()에도 필요. | |
| bool | true | 펼침(true) 또는 접힘(false). 대입해도 toggled는 없음. | |
| bool | 자동 | cover 콘텐츠가 있으면 자동으로 표시합니다. false로 일시적으로 숨길 수 있습니다. | |
| bool | true | 푸터 아이템을 그림. | |
| bool | false | 둘 중 하나가 카드를 그림자로 띄움(lifted). | |
| bool | false | 둘 중 하나가 카드를 그림자로 띄움(lifted). | |
| bool | true | 높이가 고정된 카드에서는 넘치는 본문을 기본으로 스크롤합니다. false로 설정하면 잘라냅니다. | |
| bool | 자동 | icon을 지정하면 표시합니다. showIcon: false로 일시적으로 숨깁니다. | |
| url | — | icon을 지정하면 표시합니다. showIcon: false로 일시적으로 숨깁니다. | |
| int | 0 | 셰브론이나 메서드가 요청한 펼치기 / 접기가 적용되기까지의 밀리초. | |
| int | 0 | 셰브론이나 메서드가 요청한 펼치기 / 접기가 적용되기까지의 밀리초. | |
| bool (읽기 전용) | — | 각 부분이 그려지는지. | |
| bool (읽기 전용) | — | 각 부분이 그려지는지. | |
| bool (읽기 전용) | — | 각 부분이 그려지는지. | |
| bool (읽기 전용) | — | backdrop || showBackdrop. | |
| real (읽기 전용) | — | 본문의 자연 높이(접히면 0) | |
| real (읽기 전용) | — | 커버 + 헤더 + 푸터. |
| 메서드 | 설명 |
|---|---|
active를 뒤집음(지연을 거쳐). collapsible이 아니면 무시. | |
active를 true / false로(openDelay / closeDelay를 거쳐). collapsible 없이도 동작. | |
active를 true / false로(openDelay / closeDelay를 거쳐). collapsible 없이도 동작. |
| 시그널 | 인자 | 시점 |
|---|---|---|
active: bool | 셰브론, toggle(), expand(), collapse()가 active를 바꿈(지연 뒤). 직접 대입에는 없음. 이미 요청한 상태였으면 없음. | |
| — | 속성 자체의 시그널 — 대입을 포함한 모든 변화. |
| 항목 | 동작 / 조건 |
|---|---|
| cover 콘텐츠가 있으면 자동으로 표시합니다. false로 일시적으로 숨길 수 있습니다. | |
2 px 모서리의 1 px 테두리 안에 Column이 쌓습니다: 커버(showCover이고 커버 아이템이 있을 때), 헤더 행(제목, showIcon, 헤더 아이템, 동작 아이템, 또는 collapsible이 있을 때), 본문, 푸터(showFooter이고 푸터 아이템이 있을 때). 왼쪽부터: 셰브론(collapsible), 그다음 제목 행 — 아이콘(showIcon과 icon, 14 px)과 굵은 14 px cardTitle, 생략 — 또는 header 아이템이 있으면 그것, 그다음 오른쪽 끝의 headerActions 아이템. | |
셰브론. toggle()에도 필요. | |
| 푸터 아이템을 그림. | |
왼쪽부터: 셰브론(collapsible), 그다음 제목 행 — 아이콘(showIcon과 icon, 14 px)과 굵은 14 px cardTitle, 생략 — 또는 header 아이템이 있으면 그것, 그다음 오른쪽 끝의 headerActions 아이템. | |
굵은 제목(header에 아이템이 있으면 숨김). | |
| 제목 행을 대신하는 아이템. | |
| 헤더 오른쪽 끝의 아이템. | |
기본 속성입니다. 아이템은 사방 12 px 여백의 안쪽 아이템에 놓이며 폭은 카드에서 여백을 뺀 만큼입니다 — 글자와 컬럼에 width: parent.width를 바인딩하십시오. 본문의 자연 높이는 자식 높이 더하기 24 px이고, active가 false면 0입니다. 카드 height가 고정되면 본문은 height − 커버 − 헤더 − 푸터를 얻고 잘립니다. showScrollBar는 본문을 스크롤 영역(휠과 끌기; 오른쪽의 6 px 막대)으로 만들며, 내용이 본문보다 길 때만 켜집니다. | |
펼침(true) 또는 접힘(false). 대입해도 toggled는 없음. | |
active를 뒤집음(지연을 거쳐). collapsible이 아니면 무시. | |
toggle()은 collapsible 없이는 무시되고, expand() / collapse()는 항상 동작합니다. | |
toggle()은 collapsible 없이는 무시되고, expand() / collapse()는 항상 동작합니다. | |
각각 openDelay / closeDelay(ms)를 지납니다: 지연이 0보다 크면 그만큼 기다리고, 새 요청이 대기 중인 요청을 대체하며, 지연 0은 즉시 적용되고 대기 중인 변화를 취소합니다. | |
각각 openDelay / closeDelay(ms)를 지납니다: 지연이 0보다 크면 그만큼 기다리고, 새 요청이 대기 중인 요청을 대체하며, 지연 0은 즉시 적용되고 대기 중인 변화를 취소합니다. | |
셰브론, toggle(), expand(), collapse()가 active를 바꿈(지연 뒤). 직접 대입에는 없음. 이미 요청한 상태였으면 없음. | |
| 속성 자체의 시그널 — 대입을 포함한 모든 변화. | |
backdrop이나 showBackdrop은 카드 뒤에 오른쪽 아래로 1 – 3 px 어긋난 반투명 층 셋을 그립니다 — 카드 경계 밖의 부드러운 그림자. | |
backdrop이나 showBackdrop은 카드 뒤에 오른쪽 아래로 1 – 3 px 어긋난 반투명 층 셋을 그립니다 — 카드 경계 밖의 부드러운 그림자. | |
implicitWidth 320. | |
implicitHeight = 커버 + 헤더 + 푸터(chromeHeight) + 본문(bodyHeight). | |
implicitHeight = 커버 + 헤더 + 푸터(chromeHeight) + 본문(bodyHeight). | |
implicitHeight = 커버 + 헤더 + 푸터(chromeHeight) + 본문(bodyHeight). |
| 항목 | 동작 / 조건 |
|---|---|
SyCollapse(목록의 접히는 구역), SyAvatar / SyButton / SyTag(흔한 헤더와 푸터 아이템), SyModeless(떠 있는 카드 같은 창). |