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은 백업한 뒤 초기 데이터로 복구됩니다. 저장 실패 시 입력 값이 유지됩니다.

← 전체 컴포넌트

Layout

헤더, 푸터, 본문과 사이드바를 조합해 페이지의 기본 구조를 만듭니다.

import Syidax.Core.Layout

지원 QML 타입

타입	정의 / 역할
	헤더·사이드바·본문·푸터를 앱 레이아웃으로 배치합니다.
	영역 종류·크기·콘텐츠를 가진 기반 타입이며 보통 Header·Sider 등 구체 타입을 사용합니다.
	높이로 크기를 정하는 SyLayout의 상단 영역입니다.
	너비로 크기를 정하는 SyLayout의 시작·끝 쪽 사이드바입니다.
	SyLayout의 남은 공간을 채우는 본문 영역입니다.
	높이로 크기를 정하는 SyLayout의 하단 영역입니다.

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

01 기본 구성

SyLayout은 페이지 틀입니다: 위를 가로지르는 SyLayoutHeader, 아래를 가로지르는 SyLayoutFooter, 그 사이의 SyLayoutContent와 그 왼쪽(position: "start", 기본) 그리고/또는 오른쪽("end")의 SyLayoutSider.

기본 실행 화면

QML 코드

import QtQuick
import Syidax.Core

Item {
    component LayoutBand: Rectangle {
    property string label: ""
    /** "brand" | "bold" | "bolder" | "default" */
    property string tone: "default"
    anchors.fill: parent
    color: tone === "brand" ? Theme.semantic.backgroundBrandDefault : tone === "bold" ? Theme.semantic.backgroundBold : tone === "bolder" ? Theme.semantic.backgroundBolder : Theme.semantic.backgroundDefault
    Text {
        anchors.centerIn: parent
        text: parent.label
        font.family: Theme.fontFamily
        font.pixelSize: 13
        color: parent.tone === "brand" ? Theme.semantic.textBrandDefault : Theme.semantic.textSubtle
    }
}

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    id: story

    property QtObject settings: QtObject {
        id: storyArgs
        property string headerSize: "medium"
        property string siderSize: "small"
        property string siderPosition: "start"
        property string footerSize: "small"
    }

    

    Rectangle {
        width: 480
        height: 300
        color: "transparent"
        border.width: 1
        border.color: Theme.semantic.borderBold
        SyLayout {
            anchors.fill: parent
            anchors.margins: 1
            SyLayoutHeader { size: storyArgs.headerSize; LayoutBand { label: "헤더"; tone: "brand" } }
            SyLayoutSider { size: storyArgs.siderSize; position: storyArgs.siderPosition; LayoutBand { label: "사이더"; tone: "bold" } }
            SyLayoutContent { LayoutBand { label: "내용"; tone: "default" } }
            SyLayoutFooter { size: storyArgs.footerSize; LayoutBand { label: "푸터"; tone: "bolder" } }
        }
    }

}

02 구성

흔한 페이지 틀들로, 모두 같은 SyLayout에 서로 다른 섹션 조합을 넣은 것입니다: 헤더 + 내용, 사이더 + 내용, 헤더 + 사이더 + 내용 + 푸터, 그리고 양쪽에 사이더가 있는 이중 사이더 틀.

기본 실행 화면

QML 코드

import QtQuick
import Syidax.Core

pragma ComponentBehavior: Bound

Item {
    component LayoutBand: Rectangle {
    property string label: ""
    /** "brand" | "bold" | "bolder" | "default" */
    property string tone: "default"
    anchors.fill: parent
    color: tone === "brand" ? Theme.semantic.backgroundBrandDefault : tone === "bold" ? Theme.semantic.backgroundBold : tone === "bolder" ? Theme.semantic.backgroundBolder : Theme.semantic.backgroundDefault
    Text {
        anchors.centerIn: parent
        text: parent.label
        font.family: Theme.fontFamily
        font.pixelSize: 13
        color: parent.tone === "brand" ? Theme.semantic.textBrandDefault : Theme.semantic.textSubtle
    }
}

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    id: story
    readonly property var frames: [
        { id: "header-content", header: true, siderStart: false, siderEnd: false, footer: false },
        { id: "sider-content", header: false, siderStart: true, siderEnd: false, footer: false },
        { id: "header-sider-content-footer", header: true, siderStart: true, siderEnd: false, footer: true },
        { id: "dual-sider", header: true, siderStart: true, siderEnd: true, footer: true }
    ]
    // (not `snippet` — that is the Story method the code panel calls)

    

    Grid {
        columns: 2
        columnSpacing: 16
        rowSpacing: 16
        Repeater {
            model: story.frames
            delegate: Rectangle {
                id: frame
                required property var modelData
                width: 280
                height: 180
                color: "transparent"
                border.width: 1
                border.color: Theme.semantic.borderBold
                SyLayout {
                    anchors.fill: parent
                    anchors.margins: 1
                    SyLayoutHeader { visible: frame.modelData.header; size: "small"; kind: frame.modelData.header ? "header" : ""; LayoutBand { label: "헤더"; tone: "brand" } }
                    SyLayoutSider { visible: frame.modelData.siderStart; size: "small"; kind: frame.modelData.siderStart ? "sider" : ""; LayoutBand { label: "사이더"; tone: "bold" } }
                    SyLayoutContent { LayoutBand { label: "내용"; tone: "default" } }
                    SyLayoutSider { visible: frame.modelData.siderEnd; size: "small"; position: "end"; kind: frame.modelData.siderEnd ? "sider" : ""; LayoutBand { label: "사이더"; tone: "bold" } }
                    SyLayoutFooter { visible: frame.modelData.footer; size: "small"; kind: frame.modelData.footer ? "footer" : ""; LayoutBand { label: "푸터"; tone: "bolder" } }
                }
            }
        }
    }
}

03 중첩

SyLayout은 다른 레이아웃의 SyLayoutContent 안에 선언할 수 있습니다: 내용을 채우도록 앵커하면 자기 헤더, 사이더, 내용을 독립적으로 감쌉니다 — 여기서는 바깥 틀에 헤더와 왼쪽 사이더가 있고, 안쪽 틀이 내용 영역 안에 작은 헤더와 오른쪽 사이더를 더합니다.

기본 실행 화면

QML 코드

import QtQuick
import Syidax.Core

Item {
    component LayoutBand: Rectangle {
    property string label: ""
    /** "brand" | "bold" | "bolder" | "default" */
    property string tone: "default"
    anchors.fill: parent
    color: tone === "brand" ? Theme.semantic.backgroundBrandDefault : tone === "bold" ? Theme.semantic.backgroundBold : tone === "bolder" ? Theme.semantic.backgroundBolder : Theme.semantic.backgroundDefault
    Text {
        anchors.centerIn: parent
        text: parent.label
        font.family: Theme.fontFamily
        font.pixelSize: 13
        color: parent.tone === "brand" ? Theme.semantic.textBrandDefault : Theme.semantic.textSubtle
    }
}

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height

    Rectangle {
        width: 480
        height: 300
        color: "transparent"
        border.width: 1
        border.color: Theme.semantic.borderBold
        SyLayout {
            anchors.fill: parent
            anchors.margins: 1
            SyLayoutHeader { LayoutBand { label: "헤더"; tone: "brand" } }
            SyLayoutSider { size: "small"; LayoutBand { label: "사이더"; tone: "bold" } }
            SyLayoutContent {
                SyLayout {
                    anchors.fill: parent
                    SyLayoutHeader { size: "small"; LayoutBand { label: "헤더"; tone: "bolder" } }
                    SyLayoutContent { LayoutBand { label: "내용"; tone: "default" } }
                    SyLayoutSider { position: "end"; size: "small"; LayoutBand { label: "사이더"; tone: "bold" } }
                }
            }
        }
    }
}

04 오른쪽 사이드바

siderPosition 설정을 적용한 오른쪽 사이드바 예제입니다.

기본 실행 화면

QML 코드

import QtQuick
import Syidax.Core

Item {
    component LayoutBand: Rectangle {
    property string label: ""
    /** "brand" | "bold" | "bolder" | "default" */
    property string tone: "default"
    anchors.fill: parent
    color: tone === "brand" ? Theme.semantic.backgroundBrandDefault : tone === "bold" ? Theme.semantic.backgroundBold : tone === "bolder" ? Theme.semantic.backgroundBolder : Theme.semantic.backgroundDefault
    Text {
        anchors.centerIn: parent
        text: parent.label
        font.family: Theme.fontFamily
        font.pixelSize: 13
        color: parent.tone === "brand" ? Theme.semantic.textBrandDefault : Theme.semantic.textSubtle
    }
}

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    id: story

    property QtObject settings: QtObject {
        id: storyArgs
        property string headerSize: "medium"
        property string siderSize: "small"
        property string siderPosition: "end"
        property string footerSize: "small"
    }

    

    Rectangle {
        width: 480
        height: 300
        color: "transparent"
        border.width: 1
        border.color: Theme.semantic.borderBold
        SyLayout {
            anchors.fill: parent
            anchors.margins: 1
            SyLayoutHeader { size: storyArgs.headerSize; LayoutBand { label: "헤더"; tone: "brand" } }
            SyLayoutSider { size: storyArgs.siderSize; position: storyArgs.siderPosition; LayoutBand { label: "사이더"; tone: "bold" } }
            SyLayoutContent { LayoutBand { label: "내용"; tone: "default" } }
            SyLayoutFooter { size: storyArgs.footerSize; LayoutBand { label: "푸터"; tone: "bolder" } }
        }
    }

}

05 큰 헤더

headerSize 설정을 적용한 큰 헤더 예제입니다.

기본 실행 화면

QML 코드

import QtQuick
import Syidax.Core

Item {
    component LayoutBand: Rectangle {
    property string label: ""
    /** "brand" | "bold" | "bolder" | "default" */
    property string tone: "default"
    anchors.fill: parent
    color: tone === "brand" ? Theme.semantic.backgroundBrandDefault : tone === "bold" ? Theme.semantic.backgroundBold : tone === "bolder" ? Theme.semantic.backgroundBolder : Theme.semantic.backgroundDefault
    Text {
        anchors.centerIn: parent
        text: parent.label
        font.family: Theme.fontFamily
        font.pixelSize: 13
        color: parent.tone === "brand" ? Theme.semantic.textBrandDefault : Theme.semantic.textSubtle
    }
}

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    id: story

    property QtObject settings: QtObject {
        id: storyArgs
        property string headerSize: "large"
        property string siderSize: "small"
        property string siderPosition: "start"
        property string footerSize: "small"
    }

    

    Rectangle {
        width: 480
        height: 300
        color: "transparent"
        border.width: 1
        border.color: Theme.semantic.borderBold
        SyLayout {
            anchors.fill: parent
            anchors.margins: 1
            SyLayoutHeader { size: storyArgs.headerSize; LayoutBand { label: "헤더"; tone: "brand" } }
            SyLayoutSider { size: storyArgs.siderSize; position: storyArgs.siderPosition; LayoutBand { label: "사이더"; tone: "bold" } }
            SyLayoutContent { LayoutBand { label: "내용"; tone: "default" } }
            SyLayoutFooter { size: storyArgs.footerSize; LayoutBand { label: "푸터"; tone: "bolder" } }
        }
    }

}

06 작은 푸터

footerSize 설정을 적용한 작은 푸터 예제입니다.

기본 실행 화면

QML 코드

import QtQuick
import Syidax.Core

Item {
    component LayoutBand: Rectangle {
    property string label: ""
    /** "brand" | "bold" | "bolder" | "default" */
    property string tone: "default"
    anchors.fill: parent
    color: tone === "brand" ? Theme.semantic.backgroundBrandDefault : tone === "bold" ? Theme.semantic.backgroundBold : tone === "bolder" ? Theme.semantic.backgroundBolder : Theme.semantic.backgroundDefault
    Text {
        anchors.centerIn: parent
        text: parent.label
        font.family: Theme.fontFamily
        font.pixelSize: 13
        color: parent.tone === "brand" ? Theme.semantic.textBrandDefault : Theme.semantic.textSubtle
    }
}

    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    id: story

    property QtObject settings: QtObject {
        id: storyArgs
        property string headerSize: "medium"
        property string siderSize: "small"
        property string siderPosition: "start"
        property string footerSize: "small"
    }

    

    Rectangle {
        width: 480
        height: 300
        color: "transparent"
        border.width: 1
        border.color: Theme.semantic.borderBold
        SyLayout {
            anchors.fill: parent
            anchors.margins: 1
            SyLayoutHeader { size: storyArgs.headerSize; LayoutBand { label: "헤더"; tone: "brand" } }
            SyLayoutSider { size: storyArgs.siderSize; position: storyArgs.siderPosition; LayoutBand { label: "사이더"; tone: "bold" } }
            SyLayoutContent { LayoutBand { label: "내용"; tone: "default" } }
            SyLayoutFooter { size: storyArgs.footerSize; LayoutBand { label: "푸터"; tone: "bolder" } }
        }
    }

}

API 36

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

속성 · SyLayout

타입	기본값	설명
list (기본 속성)	—	섹션들, 순서 무관
Item (읽기 전용)	`null`	각 자리에 찾은 섹션, 없으면 `null`
Item (읽기 전용)	`null`	각 자리에 찾은 섹션, 없으면 `null`
Item (읽기 전용)	`null`	각 자리에 찾은 섹션, 없으면 `null`
Item (읽기 전용)	`null`	각 자리에 찾은 섹션, 없으면 `null`
Item (읽기 전용)	`null`	각 자리에 찾은 섹션, 없으면 `null`
list (읽기 전용)	—	`kind`를 가진 모든 직접 자식
real (읽기 전용)	—	헤더
real (읽기 전용)	—	푸터의 범위, 없으면 0
real (읽기 전용)	—	사이더들의 범위, 없으면 0
real (읽기 전용)	—	사이더들의 범위, 없으면 0
real (읽기 전용)	—	헤더와 푸터 사이의 띠
real (읽기 전용)	—	내용에 남는 폭

속성 · SyLayoutHeader · SyLayoutSider · SyLayoutContent · SyLayoutFooter

타입	기본값	설명
list (기본 속성)	—	섹션을 채우는 것
string 또는 number	`"medium"`	섹션의 자기 치수: `small` · `medium` · `large` 또는 픽셀(헤더 48 · 56 · 64, 사이더 64 · 240 · 320, 푸터 40 · 48 · 64; 내용에서는 무시)
string	`"start"`	사이더만: `start`(왼쪽) · `end`(오른쪽)
string	타입별	`header` · `sider` · `content` · `footer` — 섹션 타입이 설정; `""`로 설정해도 틀에서 빠짐(숨기는 것으로 충분)
real (읽기 전용)	—	결정된 크기(px)
bool (읽기 전용)	—	`size`가 프리셋 이름 중 하나임

메서드

메서드	설명
	섹션을 지금 배치하고 크기 지정; 크기와 섹션이 바뀔 때마다 레이아웃이 스스로 호출

시그널

항목	동작 / 조건
	없음 — 레이아웃과 섹션은 아이템을 배치만 합니다.

동작

항목	동작 / 조건
	헤더는 위를 가로질러 `extent` 높이로, 푸터는 아래를 가로질러 놓이고, 그 사이의 띠(`mainHeight`)에 시작 사이더가 왼쪽(`siderStartWidth` 폭), 끝 사이더가 오른쪽(`siderEndWidth`), 내용이 남는 폭(`contentWidth`)에 놓입니다. 결정된 픽셀 값이 섹션의 `extent`입니다.
	헤더는 위를 가로질러 `extent` 높이로, 푸터는 아래를 가로질러 놓이고, 그 사이의 띠(`mainHeight`)에 시작 사이더가 왼쪽(`siderStartWidth` 폭), 끝 사이더가 오른쪽(`siderEndWidth`), 내용이 남는 폭(`contentWidth`)에 놓입니다.
	헤더는 위를 가로질러 `extent` 높이로, 푸터는 아래를 가로질러 놓이고, 그 사이의 띠(`mainHeight`)에 시작 사이더가 왼쪽(`siderStartWidth` 폭), 끝 사이더가 오른쪽(`siderEndWidth`), 내용이 남는 폭(`contentWidth`)에 놓입니다.
	헤더는 위를 가로질러 `extent` 높이로, 푸터는 아래를 가로질러 놓이고, 그 사이의 띠(`mainHeight`)에 시작 사이더가 왼쪽(`siderStartWidth` 폭), 끝 사이더가 오른쪽(`siderEndWidth`), 내용이 남는 폭(`contentWidth`)에 놓입니다.
	헤더는 위를 가로질러 `extent` 높이로, 푸터는 아래를 가로질러 놓이고, 그 사이의 띠(`mainHeight`)에 시작 사이더가 왼쪽(`siderStartWidth` 폭), 끝 사이더가 오른쪽(`siderEndWidth`), 내용이 남는 폭(`contentWidth`)에 놓입니다.
	레이아웃은 `kind`를 가진 직접 자식을 읽습니다: 첫 `header`, 첫 `footer`, `position`이 `"end"`가 아닌 첫 `sider`, `position`이 `"end"`인 첫 사이더, 첫 `content`. `kind`를 `""`로 두어도 섹션이 빠지지만 더는 필요하지 않습니다.
	레이아웃은 `kind`를 가진 직접 자식을 읽습니다: 첫 `header`, 첫 `footer`, `position`이 `"end"`가 아닌 첫 `sider`, `position`이 `"end"`인 첫 사이더, 첫 `content`.
	레이아웃은 `kind`를 가진 직접 자식을 읽습니다: 첫 `header`, 첫 `footer`, `position`이 `"end"`가 아닌 첫 `sider`, `position`이 `"end"`인 첫 사이더, 첫 `content`.
	레이아웃은 `kind`를 가진 직접 자식을 읽습니다: 첫 `header`, 첫 `footer`, `position`이 `"end"`가 아닌 첫 `sider`, `position`이 `"end"`인 첫 사이더, 첫 `content`.
	레이아웃은 `kind`를 가진 직접 자식을 읽습니다: 첫 `header`, 첫 `footer`, `position`이 `"end"`가 아닌 첫 `sider`, `position`이 `"end"`인 첫 사이더, 첫 `content`.
	숨긴 섹션(`visible: false`)도 자리를 차지하지 않고 — 범위가 0으로 셈 — 다시 보이면 돌아옵니다.
	섹션의 자기 치수는 `size`입니다: 프리셋 이름 — 헤더 `small` 48 · `medium` 56 · `large` 64, 사이더 `small` 64 · `medium` 240 · `large` 320, 푸터 `small` 40 · `medium` 48 · `large` 64 — 또는 픽셀 수(숫자 문자열도 됨). 내용의 `size`는 무시됩니다: 남는 공간을 차지합니다.
	안에 선언한 것은 `anchors.fill: parent`로 채우거나 섹션의 왼쪽 위를 기준으로 자리를 잡습니다.
	`SyLayoutContent` 안의 `SyLayout`은 자기 섹션을 독립적으로 감쌉니다. 각 레이아웃은 자기 직접 자식만 읽습니다.

키보드

항목	동작 / 조건
	헤더 띠에는 `SyGlobalHeader`, 사이더에는 `SyNav`, 크기를 조절하는 두 패널에는 `SyPanelGroup` + `SyPanel`, 섹션 안의 배치에는 `SyFlex`.

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

컴포넌트

다운로드부터 첫 화면까지

C++ · CMake

Python · PySide6

실행을 확인한 Windows 환경

완성된 두 가지 업무 예제

실제 화면에서 확인하세요

직접 실행하는 Gallery

QML Core

문제 해결

Layout

지원 QML 타입

예제로 보기

01 기본 구성

02 구성

03 중첩

04 오른쪽 사이드바

05 큰 헤더

06 작은 푸터

속성 · SyLayout

속성 · SyLayoutHeader · SyLayoutSider · SyLayoutContent · SyLayoutFooter

메서드

시그널

동작

키보드

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