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.Icon
| 타입 | 정의 / 역할 |
|---|---|
| 아이콘 소스를 크기·색상·상태에 맞춰 표시합니다. |
미리보기는 Qt 실행 화면의 이미지입니다. 아래 버튼으로 결과를 전환하세요.
Icons의 이름으로 필요한 기호를 선택합니다.
import QtQuick
import Syidax.Core
Row { spacing: 24
SyIcon { source: Icons.inputSearch; size: "xxlarge" }
SyIcon { source: Icons.bannerInfo; size: "xxlarge" }
SyIcon { source: Icons.toastSuccess; size: "xxlarge" }
SyIcon { source: Icons.modalClose; size: "xxlarge" }
}지원하는 네 가지 아이콘 크기를 비교합니다.
import QtQuick
import Syidax.Core
Row { spacing: 24
SyIcon { source: Icons.inputSearch; size: "small" }
SyIcon { source: Icons.inputSearch; size: "medium" }
SyIcon { source: Icons.inputSearch; size: "xxlarge" }
SyIcon { source: Icons.inputSearch; size: "xxxxlarge" }
}단색 기호에 테마 색상이나 지정한 색상을 적용합니다.
import QtQuick
import Syidax.Core
Row { spacing: 24
SyIcon { source: Icons.bannerInfo; size: "xxlarge"; color: Theme.semantic.iconDefault }
SyIcon { source: Icons.bannerInfo; size: "xxlarge"; color: "#167dbe" }
SyIcon { source: Icons.bannerInfo; size: "xxlarge"; color: "#d14040" }
}리본 아이콘은 원래의 색상을 유지합니다.
import QtQuick
import Syidax.Core
Row { spacing: 24
SyIcon { source: Icons.ribbonSave; size: "xxxxlarge" }
SyIcon { source: Icons.ribbonPaste; size: "xxxxlarge" }
SyIcon { source: Icons.ribbonPicture; size: "xxxxlarge" }
}가로가 긴 SVG의 원래 비율을 유지합니다.
import QtQuick
import Syidax.Core
SyIcon {
size: "xxxxlarge"; naturalAspect: true
svgMarkup: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 32"><rect width="80" height="32" rx="8" fill="#167dbe"/></svg>'
}마우스·키보드로 활성화하면 selected(value)를 받습니다.
import QtQuick
import Syidax.Core
Column {
spacing: 12
SyIcon { id: symbol; source: Icons.bannerInfo; size: "xxxxlarge"; selectable: true
accessibleName: "정보 표시"
onSelected: value => result.text = "선택: " + value
}
Text { id: result; text: "정보 아이콘을 선택하세요."; color: Theme.semantic.textDefault; width: 440; wrapMode: Text.Wrap }
}항목을 가리키거나 선택하면 QML 예제와 복사 버튼이 나타납니다.
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| url | — | 글리프: Icons.* 리소스 또는 임의의 SVG / 이미지 url. | |
| string | "" | 비어 있지 않으면 source 대신 그려지는 인라인 SVG 글자. | |
| string | "medium" | xxsmall 10 · xsmall 12 · small 14 · medium 16 · large 18 · xlarge 20 · xxlarge 24 · xxxlarge 30 · xxxxlarge 40 px. | |
| color | Theme.semantic.iconDefault | 단색 글리프의 색. 내장 컬러 아이콘은 원본 색상을 유지합니다. | |
| bool | false | 정사각형 상자 대신 이미지 고유의 폭·높이 비율 유지. | |
| bool | false | 포인터 커서와 탭 시 selected. | |
| int (읽기 전용) | 16 | size 뒤의 픽셀 크기. | |
| url (읽기 전용) | — | data url로 된 svgMarkup, 아니면 source. | |
| real (읽기 전용) | 1 | 읽어 온 이미지의 폭 ÷ 높이. | |
| enumeration (읽기 전용) | Image.Null | Image.Null · Loading · Ready · Error. | |
| string (읽기 전용) | — | selected가 전달하는 것: svgMarkup 또는 source 문자열. | |
| var (읽기 전용) | — | 이름 → 픽셀 맵. |
| 항목 | 동작 / 조건 |
|---|---|
SyIcon에는 메서드가 없습니다. source, svgMarkup, size, color를 바꾸면 다시 그려집니다. |
| 시그널 | 인자 | 시점 |
|---|---|---|
value: string | selectable 아이콘의 탭. value는 마크업 또는 source url. | |
| — | 로딩 상태가 바뀜(속성 자체의 시그널). |
| 항목 | 동작 / 조건 |
|---|---|
data url로 된 svgMarkup, 아니면 source. | |
비어 있지 않으면 source 대신 그려지는 인라인 SVG 글자. | |
글리프: Icons.* 리소스 또는 임의의 SVG / 이미지 url. | |
| 단색 글리프의 색. 내장 컬러 아이콘은 원본 색상을 유지합니다. | |
Image.Null · Loading · Ready · Error. | |
xxsmall 10 · xsmall 12 · small 14 · medium 16 · large 18 · xlarge 20 · xxlarge 24 · xxxlarge 30 · xxxxlarge 40 px. | |
size 뒤의 픽셀 크기. | |
pixelSize가 그 숫자이고, implicitWidth와 implicitHeight는 pixelSize이거나, naturalAspect면 폭이 pixelSize × naturalRatio(이미지 고유의 폭 ÷ 높이)이며 그림은 높이만으로 래스터화됩니다. | |
pixelSize가 그 숫자이고, implicitWidth와 implicitHeight는 pixelSize이거나, naturalAspect면 폭이 pixelSize × naturalRatio(이미지 고유의 폭 ÷ 높이)이며 그림은 높이만으로 래스터화됩니다. | |
| 정사각형 상자 대신 이미지 고유의 폭·높이 비율 유지. | |
| 읽어 온 이미지의 폭 ÷ 높이. | |
width / height를 직접 정해도 되며 글리프가 맞춰 커집니다. | |
width / height를 직접 정해도 되며 글리프가 맞춰 커집니다. | |
포인터 커서와 탭 시 selected. | |
selectable 아이콘의 탭. value는 마크업 또는 source url. | |
selected가 전달하는 것: svgMarkup 또는 source 문자열. |
| 항목 | 동작 / 조건 |
|---|---|
Icons(글리프 카탈로그, *전체 글리프* 페이지 참조), SyButton(icon.source와 iconOnly), SyAvatar(글리프 아바타의 icon), SyBadge / SyTag(아이콘을 품은 상태 표시). |