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

← 전체 컴포넌트

Collapse

콘텐츠를 접고 펼칠 수 있는 구역으로 나눕니다. 자주 묻는 질문이나 상세 설정을 정리할 때 사용합니다.

import Syidax.Core.Collapse

지원 QML 타입

타입	정의 / 역할
	여러 SyCollapsePanel의 펼침 상태를 관리하는 컨테이너입니다.
	클릭 가능한 제목과 접고 펼치는 본문을 가진 섹션입니다.

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

01 기본 구성

SyCollapse는 SyCollapsePanel 구역을 쌓습니다: 각 구역은 안에 선언한 내용을 접는 40 px 헤더입니다.

기본 실행 화면

QML 코드

import QtQuick
import Syidax.Core

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

    property QtObject settings: QtObject {
        id: storyArgs
        property bool accordion: false
        property bool borderless: false
        property bool ghost: false
        property bool disabled: false
        property bool arrow: false
    }

    readonly property string arrowProp: storyArgs.arrow ? "; arrow: true" : ""
    readonly property string members: [
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("배송") + "; active: true" + arrowProp,
        "    Text { text: " + JSON.stringify("주문은 영업일 기준 2일 안에 발송됩니다.") + " }",
        "}",
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("반품") + arrowProp,
        "    Text { text: " + JSON.stringify("30일 안에 반품할 수 있습니다.") + " }",
        "}",
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("결제") + arrowProp,
        "    Text { text: " + JSON.stringify("카드와 계좌 이체.") + " }",
        "}"
    ].join("\n")

    SyCollapse {
        accordion: storyArgs.accordion
        borderless: storyArgs.borderless
        ghost: storyArgs.ghost
        disabled: storyArgs.disabled
        SyCollapsePanel {
            title: "배송"; active: true; arrow: storyArgs.arrow
            Text { text: "주문은 영업일 기준 2일 안에 발송됩니다."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
        SyCollapsePanel {
            title: "반품"; arrow: storyArgs.arrow
            Text { text: "30일 안에 반품할 수 있습니다."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
        SyCollapsePanel {
            title: "결제"; arrow: storyArgs.arrow
            Text { text: "카드와 계좌 이체."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
    }

}

02 active · arrow · disabled · ghost

패널별: active: true는 처음부터 열어 둡니다(조용히 — changed 없음; 아코디언 스택에서는 미리 설정한 active가 다른 패널을 닫지 않으므로 하나만 active로 선언하십시오).

active · arrow · disabled · ghost · 기본 — 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

    SyCollapse {
        width: 420
        SyCollapsePanel { id: featureTarget0; title: "처음부터 열림"; active: true; Text { text: "주문은 영업일 기준 2일 안에 발송됩니다."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
        SyCollapsePanel { id: featureTarget1; title: "셰브론 왼쪽"; arrow: true; Text { text: "30일 안에 반품할 수 있습니다."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
        SyCollapsePanel { id: featureTarget2; title: "비활성"; disabled: true; Text { text: "카드와 계좌 이체."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
        SyCollapsePanel { id: featureTarget3; title: "고스트"; ghost: true; Text { text: "카드와 계좌 이체."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
    }
}

03 changed

모든 SyCollapsePanel은 열리거나(true) 닫힐 때(false) changed(detail), detail = { active: bool }을 발생시킵니다

기본 실행 화면

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: 12
        SyCollapse {
            width: 420
            SyCollapsePanel {
                id: shipping
                title: "배송"
                onChanged: (detail) => output.log(("%1 changed: %2").arg(shipping.title).arg(detail.active))
                Text { text: "주문은 영업일 기준 2일 안에 발송됩니다."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
            }
            SyCollapsePanel {
                id: returns
                title: "반품"
                onChanged: (detail) => output.log(("%1 changed: %2").arg(returns.title).arg(detail.active))
                Text { text: "30일 안에 반품할 수 있습니다."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
            }
        }
        EventLog { id: output }
    }
}

04 openAll · closeAll · openPanel · closePanel · toggle

스택에서: openAll()은 모든 패널을 엽니다(accordion이 켜져 있으면 통째로 무시).

openAll · closeAll · openPanel · closePanel · toggle · 기본 — 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

    Column {
        spacing: 24
        SyCollapse {
            id: faq
            width: 420
            SyCollapsePanel { id: first; title: "배송"; Text { text: "주문은 영업일 기준 2일 안에 발송됩니다."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyCollapsePanel { id: second; title: "반품"; Text { text: "30일 안에 반품할 수 있습니다."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
        }
        Flow {
            width: 460
            spacing: 8
            SyButton { id: exampleControl1;  visible: true; text: "faq.openAll()"; variant: "secondary"; size: "small"; onClicked: faq.openAll() }
            SyButton { id: exampleControl2;  visible: true; text: "faq.closeAll()"; variant: "secondary"; size: "small"; onClicked: faq.closeAll() }
            SyButton { id: exampleControl3;  visible: true; text: "faq.openPanel(0)"; variant: "secondary"; size: "small"; onClicked: faq.openPanel(0) }
            SyButton { visible: true; text: "faq.closePanel(0)"; variant: "secondary"; size: "small"; onClicked: faq.closePanel(0) }
            SyButton { visible: true; text: "second.toggle()"; variant: "secondary"; size: "small"; onClicked: second.toggle() }
        }
        Text {
            text: "first.active === " + first.active + "   second.active === " + second.active
            font.family: Theme.monoFontFamily
            font.pixelSize: 12
            color: Theme.semantic.textSubtle
        }
    }
}

05 하나씩 펼치는 패널

accordion 설정을 적용한 하나씩 펼치는 패널 예제입니다.

기본 실행 화면

QML 코드

import QtQuick
import Syidax.Core

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

    property QtObject settings: QtObject {
        id: storyArgs
        property bool accordion: true
        property bool borderless: false
        property bool ghost: false
        property bool disabled: false
        property bool arrow: false
    }

    readonly property string arrowProp: storyArgs.arrow ? "; arrow: true" : ""
    readonly property string members: [
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("배송") + "; active: true" + arrowProp,
        "    Text { text: " + JSON.stringify("주문은 영업일 기준 2일 안에 발송됩니다.") + " }",
        "}",
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("반품") + arrowProp,
        "    Text { text: " + JSON.stringify("30일 안에 반품할 수 있습니다.") + " }",
        "}",
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("결제") + arrowProp,
        "    Text { text: " + JSON.stringify("카드와 계좌 이체.") + " }",
        "}"
    ].join("\n")

    SyCollapse {
        accordion: storyArgs.accordion
        borderless: storyArgs.borderless
        ghost: storyArgs.ghost
        disabled: storyArgs.disabled
        SyCollapsePanel {
            title: "배송"; active: true; arrow: storyArgs.arrow
            Text { text: "주문은 영업일 기준 2일 안에 발송됩니다."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
        SyCollapsePanel {
            title: "반품"; arrow: storyArgs.arrow
            Text { text: "30일 안에 반품할 수 있습니다."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
        SyCollapsePanel {
            title: "결제"; arrow: storyArgs.arrow
            Text { text: "카드와 계좌 이체."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
    }

}

06 배경 없는 패널

ghost 설정을 적용한 배경 없는 패널 예제입니다.

기본 실행 화면

QML 코드

import QtQuick
import Syidax.Core

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

    property QtObject settings: QtObject {
        id: storyArgs
        property bool accordion: false
        property bool borderless: false
        property bool ghost: true
        property bool disabled: false
        property bool arrow: false
    }

    readonly property string arrowProp: storyArgs.arrow ? "; arrow: true" : ""
    readonly property string members: [
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("배송") + "; active: true" + arrowProp,
        "    Text { text: " + JSON.stringify("주문은 영업일 기준 2일 안에 발송됩니다.") + " }",
        "}",
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("반품") + arrowProp,
        "    Text { text: " + JSON.stringify("30일 안에 반품할 수 있습니다.") + " }",
        "}",
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("결제") + arrowProp,
        "    Text { text: " + JSON.stringify("카드와 계좌 이체.") + " }",
        "}"
    ].join("\n")

    SyCollapse {
        accordion: storyArgs.accordion
        borderless: storyArgs.borderless
        ghost: storyArgs.ghost
        disabled: storyArgs.disabled
        SyCollapsePanel {
            title: "배송"; active: true; arrow: storyArgs.arrow
            Text { text: "주문은 영업일 기준 2일 안에 발송됩니다."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
        SyCollapsePanel {
            title: "반품"; arrow: storyArgs.arrow
            Text { text: "30일 안에 반품할 수 있습니다."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
        SyCollapsePanel {
            title: "결제"; arrow: storyArgs.arrow
            Text { text: "카드와 계좌 이체."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
    }

}

07 테두리 없는 패널

borderless 설정을 적용한 테두리 없는 패널 예제입니다.

기본 실행 화면

QML 코드

import QtQuick
import Syidax.Core

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

    property QtObject settings: QtObject {
        id: storyArgs
        property bool accordion: false
        property bool borderless: true
        property bool ghost: false
        property bool disabled: false
        property bool arrow: false
    }

    readonly property string arrowProp: storyArgs.arrow ? "; arrow: true" : ""
    readonly property string members: [
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("배송") + "; active: true" + arrowProp,
        "    Text { text: " + JSON.stringify("주문은 영업일 기준 2일 안에 발송됩니다.") + " }",
        "}",
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("반품") + arrowProp,
        "    Text { text: " + JSON.stringify("30일 안에 반품할 수 있습니다.") + " }",
        "}",
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("결제") + arrowProp,
        "    Text { text: " + JSON.stringify("카드와 계좌 이체.") + " }",
        "}"
    ].join("\n")

    SyCollapse {
        accordion: storyArgs.accordion
        borderless: storyArgs.borderless
        ghost: storyArgs.ghost
        disabled: storyArgs.disabled
        SyCollapsePanel {
            title: "배송"; active: true; arrow: storyArgs.arrow
            Text { text: "주문은 영업일 기준 2일 안에 발송됩니다."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
        SyCollapsePanel {
            title: "반품"; arrow: storyArgs.arrow
            Text { text: "30일 안에 반품할 수 있습니다."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
        SyCollapsePanel {
            title: "결제"; arrow: storyArgs.arrow
            Text { text: "카드와 계좌 이체."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
    }

}

08 비활성 패널

disabled 설정을 적용한 비활성 패널 예제입니다.

기본 실행 화면

QML 코드

import QtQuick
import Syidax.Core

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

    property QtObject settings: QtObject {
        id: storyArgs
        property bool accordion: false
        property bool borderless: false
        property bool ghost: false
        property bool disabled: true
        property bool arrow: false
    }

    readonly property string arrowProp: storyArgs.arrow ? "; arrow: true" : ""
    readonly property string members: [
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("배송") + "; active: true" + arrowProp,
        "    Text { text: " + JSON.stringify("주문은 영업일 기준 2일 안에 발송됩니다.") + " }",
        "}",
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("반품") + arrowProp,
        "    Text { text: " + JSON.stringify("30일 안에 반품할 수 있습니다.") + " }",
        "}",
        "SyCollapsePanel {",
        "    title: " + JSON.stringify("결제") + arrowProp,
        "    Text { text: " + JSON.stringify("카드와 계좌 이체.") + " }",
        "}"
    ].join("\n")

    SyCollapse {
        accordion: storyArgs.accordion
        borderless: storyArgs.borderless
        ghost: storyArgs.ghost
        disabled: storyArgs.disabled
        SyCollapsePanel {
            title: "배송"; active: true; arrow: storyArgs.arrow
            Text { text: "주문은 영업일 기준 2일 안에 발송됩니다."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
        SyCollapsePanel {
            title: "반품"; arrow: storyArgs.arrow
            Text { text: "30일 안에 반품할 수 있습니다."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
        SyCollapsePanel {
            title: "결제"; arrow: storyArgs.arrow
            Text { text: "카드와 계좌 이체."; width: parent.width; wrapMode: Text.Wrap; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault }
        }
    }

}

API 54

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

속성 · SyCollapse

타입	기본값	설명
list (기본 속성)	—	안에 선언한 패널, 순서대로
bool	`false`	한 번에 하나만 열림: 하나를 열면 나머지가 닫힘; `openAll()` 무시
bool	`false`	패널에 테두리 없음(배경은 유지)
bool	`false`	모든 패널에 테두리와 배경 없음
bool	`false`	모든 헤더 멈춤
bool	`false`	모든 패널에 적용(각 패널의 `effectiveFullheight` = 자기 것 또는 스택의 것)
var	`[]`	수집된 패널 — `panels()`를 읽으십시오

속성 · SyCollapsePanel

타입	기본값	설명
list (기본 속성)	—	본문: 패널이 접는 것
list	—	제목 뒤 헤더에 놓이는 아이템
string	`""`	헤더 글자(비어 있으면 숨김)
bool	`false`	열림. 설정하면 조용히 열리거나 닫힘; 사용자와 메서드는 바꾸면서 `changed` 발생
bool	`false`	셰브론을 오른쪽 끝 대신 제목 앞 왼쪽에
bool	`false`	헤더 회색·멈춤; `toggle()` / `open()` 무시, `close()` 허용
bool	`false`	이 패널만 테두리와 배경 없음
bool	`false`	`effectiveFullheight`(읽기 전용)는 이것 또는 스택의 `fullheight`
bool (읽기 전용)	—	패널 또는 스택의 `disabled` · `ghost` · 스택의 `borderless`
bool (읽기 전용)	—	패널 또는 스택의 `disabled` · `ghost` · 스택의 `borderless`
bool (읽기 전용)	—	패널 또는 스택의 `disabled` · `ghost` · 스택의 `borderless`
bool (읽기 전용)	—	포인터가 헤더 위에 있음
bool (읽기 전용)	—	헤더에 키보드 포커스
var	`null`	소유하는 스택(스택이 설정)

메서드

메서드	설명
	모든 패널에 `open()`; `accordion`이면 무시. 비활성 패널은 닫힌 채
	모든 패널에 `close()`
	`index`(0부터, 스택의 패널 중)의 패널에 `open()` / `close()`; 모르는 인덱스: 아무 일 없음
	`index`(0부터, 스택의 패널 중)의 패널에 `open()` / `close()`; 모르는 인덱스: 아무 일 없음
	패널을 순서대로 반환
	열려 있으면 `close()`, 아니면 `open()`; 비활성이면 무시
	열고 `changed({ active: true })` 발생; 비활성이거나 이미 열려 있으면 무시; 아코디언이면 나머지 닫힘
	닫고 `changed({ active: false })` 발생; 이미 닫혀 있으면 무시; 비활성이어도 허용

시그널

시그널	인자	시점
	`detail: { active: bool }`	사용자 조작, 패널의 메서드, 스택의 메서드, 아코디언 규칙으로 패널이 열리거나 닫힘. 바인딩으로 `active`를 설정할 때와 아무것도 바꾸지 않는 호출에서는 아님

시그널

항목	동작 / 조건
	`SyCollapse` 자체에는 시그널이 없습니다.

동작

항목	동작 / 조건
	열림. 설정하면 조용히 열리거나 닫힘; 사용자와 메서드는 바꾸면서 `changed` 발생
	사용자 조작, 패널의 메서드, 스택의 메서드, 아코디언 규칙으로 패널이 열리거나 닫힘. 바인딩으로 `active`를 설정할 때와 아무것도 바꾸지 않는 호출에서는 아님
	한 번에 하나만 열림: 하나를 열면 나머지가 닫힘; `openAll()` 무시
	열고 `changed({ active: true })` 발생; 비활성이거나 이미 열려 있으면 무시; 아코디언이면 나머지 닫힘
	스택에 `accordion: true`면 (사용자 조작이나 `open()` / `openPanel()`로) 패널 하나를 열 때 다른 모든 패널이 닫히고, 그 각각이 `changed({ active: false })`를 발생시킵니다.
	모든 패널에 `open()`; `accordion`이면 무시. 비활성 패널은 닫힌 채
	셰브론을 오른쪽 끝 대신 제목 앞 왼쪽에
	헤더 글자(비어 있으면 숨김)
	제목 뒤 헤더에 놓이는 아이템
	글자가 줄바꿈되도록 내용에 폭(`width: parent.width`)을 주십시오.
	패널에 테두리 없음(배경은 유지)
	모든 패널에 테두리와 배경 없음
	모든 헤더 멈춤
	열려 있으면 `close()`, 아니면 `open()`; 비활성이면 무시
	닫고 `changed({ active: false })` 발생; 이미 닫혀 있으면 무시; 비활성이어도 허용
	모든 패널에 `close()`
	`close()`, `closeAll()`, `closePanel()`은 비활성 패널도 닫습니다.
	Tab이 사용 가능한 헤더에 도달하고, Space / Enter가 포커스된 것을 토글합니다.
	모든 패널에 적용(각 패널의 `effectiveFullheight` = 자기 것 또는 스택의 것)
	스택의 `fullheight`는 모든 패널에 닿습니다(패널의 `effectiveFullheight`는 자기 `fullheight` 또는 스택의 것): 그러면 열린 본문을 자식의 오프셋 + 높이 대신 자식들의 경계 높이만으로(최소 18 px) 재며, 눈에 띄는 차이는 거의 없습니다.
	열린 본문을 자식들의 경계 높이만으로 잼(최소 18 px). `effectiveFullheight`(읽기 전용)는 이것 또는 스택의 `fullheight`
	패널을 순서대로 반환

키보드

항목	동작 / 조건
	`SyTabGroup`은 쌓는 대신 뷰를 전환하고, `SyCard`는 항상 열려 있는 구역을 감쌉니다.

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

컴포넌트

다운로드부터 첫 화면까지

C++ · CMake

Python · PySide6

실행을 확인한 Windows 환경

완성된 두 가지 업무 예제

실제 화면에서 확인하세요

직접 실행하는 Gallery

QML Core

문제 해결

Collapse

지원 QML 타입

예제로 보기

01 기본 구성

02 active · arrow · disabled · ghost

03 changed

04 openAll · closeAll · openPanel · closePanel · toggle

05 하나씩 펼치는 패널

06 배경 없는 패널

07 테두리 없는 패널

08 비활성 패널

속성 · SyCollapse

속성 · SyCollapsePanel

메서드

시그널

시그널

동작

키보드

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