QT QUICK · C++ · PYTHON

하나의 디자인 언어.
네이티브 앱까지.

QML 컴포넌트, 공통 디자인 토큰과 직접 실행할 수 있는 예제로 데스크톱 화면을 만드세요.

시작하기 컴포넌트 살펴보기 →

QML Core는 별도 제품입니다. C++와 Python에서 같은 QML 화면을 사용합니다.

Syidax QML workbench running in the native application — Syidax Core로 만든 실제 Qt Quick 애플리케이션입니다.

QML CORE

컴포넌트

컴포넌트 검색

56개 컴포넌트 중 56개

START WITH A WORKING APP

다운로드부터 첫 화면까지

C++ · CMake

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

Python · PySide6

순수 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 출시 후 사용하는 방법입니다.

실행을 확인한 Windows 환경

아래 버전에서 네이티브 창과 예제의 기본 실행을 검사했습니다. Qt 6.8은 소스 최소 기준이며 모든 Qt 버전의 검증을 뜻하지 않습니다. Gallery는 software 렌더러를 사용합니다.

완성된 두 가지 업무 예제

실행 중인 Windows 앱을 단계별로 캡처했습니다. 재생·일시 정지로 각 상태를 살펴보세요.

Workbench: 작업 완료 처리, 변경 저장과 출시 진행률 갱신.

Record Manager: 저장 실패 후 초안 보존, 재시도, 검색과 삭제 전 확인.

실제 화면에서 확인하세요

TRY IT YOURSELF

직접 실행하는 Gallery

Windows 앱에서 예제를 실행하고 속성을 살펴보며 밝은 테마와 어두운 테마를 전환하세요. Gallery는 평가용이며 상업용 SDK는 별도 제품입니다.

Gallery 다운로드 · Windows x64

QML 예제 소스와 샘플 파일 다운로드

QML Core

$24.99 / 월

$249.99 / 년 · 개발자 1명 기준

Chart와 동일한 정규 단가입니다. 첫 구매·추가 좌석·갱신에 같은 가격이 적용됩니다.

문서, 실행 가능한 예제와 진단 도구를 제공합니다. 개별 기술 지원, 온보딩, SLA는 제공하지 않습니다.

구매 및 라이선스 조건 보기 →

문제 해결

모듈을 찾지 못함

--qml 경로가 Syidax 폴더를 포함하는지 확인하세요. Python에서는 qml-pure를 사용합니다. 소스 저장소가 아닌 압축 해제한 SDK를 기준으로 실행하세요.

라이선스가 inactive 또는 frozen

QML Core 인증서를 다시 다운로드한 뒤 --license로 전달하세요. Web Core·Chart·Grid 인증서는 QML을 활성화하지 않습니다. 월간 만료 시 사용이 종료되며, 연간은 이용 기간 내 출시 버전에 한해 보유 권한이 적용됩니다.

Qt 버전 또는 플러그인 오류

플러그인 빌드의 Qt 버전과 아키텍처를 확인하세요. 서로 다른 Python Qt 바인딩을 혼용하지 마세요. qml-pure로 플러그인 ABI 의존성을 피할 수 있습니다.

PDF 또는 아이콘이 표시되지 않음

PDF는 별도 QtQuick.Pdf 모듈이 필요합니다. 이 모듈이 없어도 나머지 Core 컴포넌트는 사용 가능합니다. 아이콘 팩 등록과 리소스 경로는 SDK의 ICON-PACKS 문서를 확인하세요.

저장 실패 또는 설정 손상

예제는 사용자 앱 데이터 폴더에만 저장합니다. 권한과 디스크 공간을 확인하세요. 잘못된 JSON은 백업한 뒤 초기 데이터로 복구됩니다. 저장 실패 시 입력 값이 유지됩니다.

← 전체 컴포넌트

Pagination

목록이나 표의 결과 페이지를 이동하는 컨트롤입니다. 페이지당 항목 수를 바꾸거나 특정 페이지로 이동할 수 있습니다.

import Syidax.Core.Pagination

지원 QML 타입

타입	정의 / 역할
	전체 항목 수·페이지 크기·현재 페이지를 기준으로 페이지를 이동합니다.

미리보기는 Qt 실행 화면의 이미지입니다. 아래 버튼으로 결과를 전환하세요.

01 기본 구성

SyPagination은 목록이나 테이블 아래의 페이지 칸 행입니다: 화살표, 첫 페이지, 현재 페이지 주변의 페이지들(빈 곳은 ⋯), 마지막 페이지, 화살표 — 그리고 원하면 페이지 크기 셀렉트, Go-to 필드, 합계 줄.

기본 실행 화면

QML 코드

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 int totalItems: 100
        property int pageSize: 10
        property int activePage: 1
        property string pageSizeOptions: ""
        property bool jumper: false
        property bool total: false
        property bool disabled: false
        property bool hideonSingle: false
    }

    

    Column {
        spacing: 12
        SyPagination {
            totalItems: storyArgs.totalItems
            pageSizeOptions: storyArgs.pageSizeOptions
            jumper: storyArgs.jumper
            total: storyArgs.total
            disabled: storyArgs.disabled
            hideonSingle: storyArgs.hideonSingle
            onPageChanged: (page) => output.log(page)
            Binding on pageSize { value: storyArgs.pageSize }
            Binding on activePage { value: storyArgs.activePage }
        }
        EventLog { id: output }
    }

}

02 pageSizeOptions · jumper · total

pageSizeOptions는 쉼표로 구분한 크기 목록, "10,20,50"입니다: 양수가 하나 이상 있으면 화살표 뒤에 98 px 셀렉트가 나타나 크기마다 "N / page" 행을 보이고 현재 pageSize를 표시합니다.

pageSizeOptions · jumper · total · 기본 — Qt 실행 화면 · 이미지

QML 코드

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 string pageSizeOptions: "10,20,50"
        property bool jumper: true
        property bool total: true
    }

    

    SyPagination { id: featureTarget0;
        totalItems: 250
        pageSizeOptions: storyArgs.pageSizeOptions
        jumper: storyArgs.jumper
        total: storyArgs.total
    }
}

03 pageChanged · pageSizeChanged

pageChanged(page: int)는 컴포넌트를 통해 현재 페이지가 실제로 바뀔 때 발생합니다: 페이지 칸이나 화살표 클릭, Go-to 필드에 입력한 숫자, 또는 goTo(page).

pageChanged · pageSizeChanged · 기본 — Qt 실행 화면 · 이미지

기본 실행 화면

QML 코드

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
        SyPagination {
            id: pager
            totalItems: 120
            pageSizeOptions: "10,20,50"
            onPageChanged: (page) => { if (true) { output.log(("pageChanged: %1").arg(page)) } }
            onPageSizeChanged: { if (true) { output.log(("pageSizeChanged: %1").arg(pager.pageSize)) } }
        }
        EventLog { id: output }
    }
}

04 goTo

goTo(page)는 클릭과 같은 방식으로 코드에서 페이지를 옮깁니다: 페이지를 1 … totalPages로 제한하고, 결과가 activePage와 다르면 현재 페이지가 되어 pageChanged(page)가 발생합니다.

QML 코드

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: 24
        SyPagination { id: pager; totalItems: 100; onPageChanged: (page) => output.log(page) }
        Row {
            spacing: 8
            SyButton { id: exampleControl1;  text: "pager.goTo(1)"; variant: "secondary"; size: "small"; onClicked: pager.goTo(1) }
            SyButton { id: exampleControl2;  text: "pager.goTo(5)"; variant: "secondary"; size: "small"; onClicked: pager.goTo(5) }
            SyButton { id: exampleControl3;  text: "pager.goTo(pager.totalPages)"; variant: "secondary"; size: "small"; onClicked: pager.goTo(pager.totalPages) }
        }
        Text {
            text: "pager.activePage === " + pager.activePage + "   pager.totalPages === " + pager.totalPages
            font.family: Theme.monoFontFamily
            font.pixelSize: 12
            color: Theme.semantic.textSubtle
        }
        EventLog { id: output }
    }
}

05 페이지 크기와 바로 이동

jumper · total 설정을 적용한 페이지 크기와 바로 이동 예제입니다.

기본 실행 화면

QML 코드

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 int totalItems: 100
        property int pageSize: 10
        property int activePage: 1
        property string pageSizeOptions: ""
        property bool jumper: true
        property bool total: true
        property bool disabled: false
        property bool hideonSingle: false
    }

    

    Column {
        spacing: 12
        SyPagination {
            totalItems: storyArgs.totalItems
            pageSizeOptions: storyArgs.pageSizeOptions
            jumper: storyArgs.jumper
            total: storyArgs.total
            disabled: storyArgs.disabled
            hideonSingle: storyArgs.hideonSingle
            onPageChanged: (page) => output.log(page)
            Binding on pageSize { value: storyArgs.pageSize }
            Binding on activePage { value: storyArgs.activePage }
        }
        EventLog { id: output }
    }

}

06 페이지 이동 비활성

disabled 설정을 적용한 페이지 이동 비활성 예제입니다.

기본 실행 화면

QML 코드

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 int totalItems: 100
        property int pageSize: 10
        property int activePage: 1
        property string pageSizeOptions: ""
        property bool jumper: false
        property bool total: false
        property bool disabled: true
        property bool hideonSingle: false
    }

    

    Column {
        spacing: 12
        SyPagination {
            totalItems: storyArgs.totalItems
            pageSizeOptions: storyArgs.pageSizeOptions
            jumper: storyArgs.jumper
            total: storyArgs.total
            disabled: storyArgs.disabled
            hideonSingle: storyArgs.hideonSingle
            onPageChanged: (page) => output.log(page)
            Binding on pageSize { value: storyArgs.pageSize }
            Binding on activePage { value: storyArgs.activePage }
        }
        EventLog { id: output }
    }

}

API 33

항목을 가리키거나 선택하면 QML 예제와 복사 버튼이 나타납니다.

속성

타입	기본값	설명
int	`0`	항목 수; `pageSize`와 함께 `totalPages`를 정함
int	`10`	페이지당 항목. 크기 셀렉트의 선택이나 앱이 설정; 어느 쪽이든 `onPageSizeChanged` 실행
int	`1`	현재 페이지, 1부터. 설정하면 조용히 이동; 클릭, 필드, `goTo()`는 설정하고 보고
string	`""`	"N / page" 셀렉트의 크기, 쉼표 구분, 예 `"10,20,50"`; 비면 셀렉트 숨김
bool	`false`	"Go to" 숫자 필드
bool	`false`	행 아래 "Total N Items" 줄
bool	`false`	전부 멈추고 흐림; `goTo()` 무시
bool	`false`	`totalPages` ≤ 1인 동안 숨김
int (읽기 전용)	—	⌈`totalItems` / `pageSize`⌉, 최소 1
var (읽기 전용)	—	`pageSizeOptions`를 양수로 파싱한 것
var (읽기 전용)	—	첫·끝 페이지 사이의 칸: 숫자, 또는 ⋯을 뜻하는 `"more"`
int (읽기 전용)	`5`	양 끝 근처에서 모두 보이는 페이지 수
int (읽기 전용)	`1`	현재 페이지 양옆에 보이는 이웃 수
Item (읽기 전용)	—	안의 SySelect와 SyInputNumber, 스타일이나 포커스용
Item (읽기 전용)	—	안의 SySelect와 SyInputNumber, 스타일이나 포커스용

메서드

메서드	설명
	`page`를 1 … `totalPages`로 제한해 이동하고 `pageChanged` 발생. disabled면 무시; 이미 그 페이지면 조용. 반환값 없음

시그널

시그널	인자	시점
	`page: int`	칸, 화살표, Go-to 필드, `goTo()`로 현재 페이지가 바뀜. 코드에서 `activePage`를 설정할 때, 같은 페이지로의 이동, disabled 동안은 아님
	—	`pageSize`가 바뀜 — 크기 셀렉트의 선택 또는 할당; `pageSize`를 읽으십시오

동작

항목	동작 / 조건
	⌈`totalItems` / `pageSize`⌉, 최소 1
	항목 수; `pageSize`와 함께 `totalPages`를 정함
	페이지당 항목. 크기 셀렉트의 선택이나 앱이 설정; 어느 쪽이든 `onPageSizeChanged` 실행
	현재 페이지, 1부터. 설정하면 조용히 이동; 클릭, 필드, `goTo()`는 설정하고 보고
	`page`를 1 … `totalPages`로 제한해 이동하고 `pageChanged` 발생. disabled면 무시; 이미 그 페이지면 조용. 반환값 없음
	칸, 화살표, Go-to 필드, `goTo()`로 현재 페이지가 바뀜. 코드에서 `activePage`를 설정할 때, 같은 페이지로의 이동, disabled 동안은 아님
	"N / page" 셀렉트의 크기, 쉼표 구분, 예 `"10,20,50"`; 비면 셀렉트 숨김
	`pageSizeOptions`를 양수로 파싱한 것
	`pageSize`가 바뀜 — 크기 셀렉트의 선택 또는 할당; `pageSize`를 읽으십시오
	"Go to" 숫자 필드
	행 아래 "Total N Items" 줄
	전부 멈추고 흐림; `goTo()` 무시
	`totalPages` ≤ 1인 동안 숨김
	페이지네이션은 세로 열입니다: 행(화살표, 칸, 셀렉트, 필드)과 그 아래 합계 줄. 암시 크기는 부분들을 따릅니다. 레이아웃에 두거나 앵커하십시오. 늘어나지 않습니다.

키보드

항목	동작 / 조건
	`SyTable`과 `SyTree`가 페이지네이션이 요청한 페이지를 보여 주고, `SySelect`와 `SyInputNumber`는 그것을 이루는 부품입니다.

하나의 디자인 언어.네이티브 앱까지.

컴포넌트

다운로드부터 첫 화면까지

C++ · CMake

Python · PySide6

실행을 확인한 Windows 환경

완성된 두 가지 업무 예제

실제 화면에서 확인하세요

직접 실행하는 Gallery

QML Core

문제 해결

Pagination

지원 QML 타입

예제로 보기

01 기본 구성

02 pageSizeOptions · jumper · total

03 pageChanged · pageSizeChanged

04 goTo

05 페이지 크기와 바로 이동

06 페이지 이동 비활성

속성

메서드

시그널

동작

키보드

하나의 디자인 언어.
네이티브 앱까지.