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

← 전체 컴포넌트

Tabs

탭을 선택해 같은 영역의 콘텐츠를 전환합니다. 관련 화면을 가로나 세로 탭으로 묶을 때 사용합니다.

import Syidax.Core.Tabs

지원 QML 타입

타입	정의 / 역할
	SyTab 헤더와 연결된 SyTabContent 본문의 선택을 관리합니다.
	tabkey로 식별하는 탭 헤더이며 같은 name의 SyTabContent와 연결합니다.
	연결된 SyTab이 선택되었을 때 표시되는 본문 패널입니다.

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

01 기본 구성

SyTabGroup은 패널을 전환합니다: 안에 선언한 SyTab 헤더들이 position(top · bottom · left · right) 쪽의 스트립에 늘어서고, name이 활성 탭의 tabkey와 같은 SyTabContent 패널이 보입니다.

기본 실행 화면

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 string type: "line"
        property string size: "medium"
        property string position: "top"
        property string align: "left"
        property string padding: "none"
        property bool disabled: false
        property bool addNewTab: false
    }

    readonly property string members: [
        "SyTab { tabkey: \"overview\"; text: " + JSON.stringify("개요") + " }",
        "SyTab { tabkey: \"activity\"; text: " + JSON.stringify("활동") + " }",
        "SyTab { tabkey: \"settings\"; text: " + JSON.stringify("설정") + "; disabled: true }",
        "SyTabContent { name: \"overview\"; Text { text: " + JSON.stringify("개요 패널입니다.") + " } }",
        "SyTabContent { name: \"activity\"; Text { text: " + JSON.stringify("활동 패널입니다.") + " } }",
        "SyTabContent { name: \"settings\"; Text { text: " + JSON.stringify("설정 패널입니다.") + " } }"
    ].join("\n")

    Column {
        spacing: 12
        SyTabGroup {
            width: 480
            height: 180
            type: storyArgs.type
            size: storyArgs.size
            position: storyArgs.position
            align: storyArgs.align
            padding: storyArgs.padding
            disabled: storyArgs.disabled
            addNewTab: storyArgs.addNewTab
            onSelected: (detail) => output.log(detail.tabkey)
            SyTab { tabkey: "overview"; text: "개요" }
            SyTab { tabkey: "activity"; text: "활동" }
            SyTab { tabkey: "settings"; text: "설정"; disabled: true }
            SyTabContent { name: "overview"; Text { text: "개요 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyTabContent { name: "activity"; Text { text: "활동 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyTabContent { name: "settings"; Text { text: "설정 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
        }
        EventLog { id: output }
    }

}

02 closable · manualClose · disabled

closable은 헤더 글자 뒤에 ×를 그립니다(호버하거나 활성이기 전까지는 흐림).

closable · manualClose · disabled · 기본 — 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
        SyTabGroup {
            width: 480; height: 160
            onClosed: (detail) => output.log(("closed: %1").arg(detail.tabkey))
            SyTab { tabkey: "overview"; text: "개요" }
            SyTab { id: featureTarget0; tabkey: "closable"; text: "닫을 수 있음"; closable: true }
            SyTab { id: featureTarget1; tabkey: "manual"; text: "알리기만"; closable: true; manualClose: true }
            SyTab { id: featureTarget2; tabkey: "off"; text: "비활성"; disabled: true }
            SyTabContent { name: "overview"; Text { text: "개요 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyTabContent { name: "closable"; Text { text: "×가 이 탭을 지웁니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyTabContent { name: "manual"; Text { text: "×는 알리기만 하고 탭은 남습니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
        }
        EventLog { id: output }
    }
}

03 overflow

스트립은 헤더를 왼쪽부터 오른쪽으로 배치합니다.

기본 실행 화면

QML 코드

import QtQuick
import Syidax.Core

Item {
    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    property QtObject settings: QtObject {
        id: storyArgs
        property int width: 320
    }

    readonly property var names: ["overview", "activity", "settings", "members", "billing", "history"]

    SyTabGroup {
        width: storyArgs.width
        height: 140
        SyTab { tabkey: "overview"; text: "개요" }
        SyTab { tabkey: "activity"; text: "활동" }
        SyTab { tabkey: "settings"; text: "설정" }
        SyTab { tabkey: "members"; text: "구성원" }
        SyTab { tabkey: "billing"; text: "결제" }
        SyTab { tabkey: "history"; text: "기록" }
        SyTabContent { name: "overview"; Text { text: "개요 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
    }
}

04 selected · tabSelected · closed · tabClosed · tabAdded

SyTabGroup에는 시그널이 여섯 있습니다:

selected · tabSelected · closed · tabClosed · tabAdded · 기본 — 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
        SyTabGroup {
            width: 480; height: 160
            addNewTab: true
            onSelected: (detail) => { if (true) { output.log(("selected: %1").arg(detail.tabkey)) } }
            onTabSelected: (detail) => { if (true) { output.log(("tabSelected: %1").arg(detail.index)) } }
            onClosed: (detail) => { if (true) { output.log(("closed: %1").arg(detail.tabkey)) } }
            onTabClosed: (detail) => { if (true) { output.log(("tabClosed: %1").arg(detail.index)) } }
            onTabAdded: { if (true) { output.log("tabAdded") } }
            SyTab { tabkey: "overview"; text: "개요" }
            SyTab { tabkey: "activity"; text: "활동"; closable: true }
            SyTab { tabkey: "settings"; text: "설정" }
            SyTabContent { name: "overview"; Text { text: "개요 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyTabContent { name: "activity"; Text { text: "활동 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyTabContent { name: "settings"; Text { text: "설정 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
        }
        EventLog { id: output }
    }
}

05 setActiveTab · getActiveTab · closeTab

setActiveTab(index)는 그 인덱스의 탭을 활성화하고 selected와 tabSelected를 발생시킵니다.

setActiveTab · getActiveTab · closeTab · 기본 — 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: 24
        SyTabGroup {
            id: tabset
            width: 480; height: 140
            SyTab { tabkey: "overview"; text: "개요" }
            SyTab { tabkey: "activity"; text: "활동" }
            SyTab { tabkey: "settings"; text: "설정" }
            SyTabContent { name: "overview"; Text { text: "개요 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyTabContent { name: "activity"; Text { text: "활동 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyTabContent { name: "settings"; Text { text: "설정 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
        }
        Flow {
            width: 480
            spacing: 8
            SyButton { id: exampleControl1;  visible: true; text: "tabset.setActiveTab(1)"; variant: "secondary"; size: "small"; onClicked: tabset.setActiveTab(1) }
            SyButton { id: exampleControl2;  visible: true; text: "console.log(tabset.getActiveTab())"; variant: "secondary"; size: "small"; onClicked: output.log(tabset.getActiveTab()) }
            SyButton { id: exampleControl3;  visible: true; text: "tabset.closeTab(\"activity\")"; variant: "secondary"; size: "small"; onClicked: tabset.closeTab("activity") }
        }
        Text {
            text: "tabset.active === " + tabset.active
            font.family: Theme.monoFontFamily
            font.pixelSize: 12
            color: Theme.semantic.textSubtle
        }
        EventLog { id: output }
    }
}

06 카드형 탭

type 설정을 적용한 카드형 탭 예제입니다.

기본 실행 화면

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 string type: "card"
        property string size: "medium"
        property string position: "top"
        property string align: "left"
        property string padding: "none"
        property bool disabled: false
        property bool addNewTab: false
    }

    readonly property string members: [
        "SyTab { tabkey: \"overview\"; text: " + JSON.stringify("개요") + " }",
        "SyTab { tabkey: \"activity\"; text: " + JSON.stringify("활동") + " }",
        "SyTab { tabkey: \"settings\"; text: " + JSON.stringify("설정") + "; disabled: true }",
        "SyTabContent { name: \"overview\"; Text { text: " + JSON.stringify("개요 패널입니다.") + " } }",
        "SyTabContent { name: \"activity\"; Text { text: " + JSON.stringify("활동 패널입니다.") + " } }",
        "SyTabContent { name: \"settings\"; Text { text: " + JSON.stringify("설정 패널입니다.") + " } }"
    ].join("\n")

    Column {
        spacing: 12
        SyTabGroup {
            width: 480
            height: 180
            type: storyArgs.type
            size: storyArgs.size
            position: storyArgs.position
            align: storyArgs.align
            padding: storyArgs.padding
            disabled: storyArgs.disabled
            addNewTab: storyArgs.addNewTab
            onSelected: (detail) => output.log(detail.tabkey)
            SyTab { tabkey: "overview"; text: "개요" }
            SyTab { tabkey: "activity"; text: "활동" }
            SyTab { tabkey: "settings"; text: "설정"; disabled: true }
            SyTabContent { name: "overview"; Text { text: "개요 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyTabContent { name: "activity"; Text { text: "활동 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyTabContent { name: "settings"; Text { text: "설정 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
        }
        EventLog { id: output }
    }

}

07 세로 탭

position 설정을 적용한 세로 탭 예제입니다.

기본 실행 화면

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 string type: "line"
        property string size: "medium"
        property string position: "left"
        property string align: "left"
        property string padding: "none"
        property bool disabled: false
        property bool addNewTab: false
    }

    readonly property string members: [
        "SyTab { tabkey: \"overview\"; text: " + JSON.stringify("개요") + " }",
        "SyTab { tabkey: \"activity\"; text: " + JSON.stringify("활동") + " }",
        "SyTab { tabkey: \"settings\"; text: " + JSON.stringify("설정") + "; disabled: true }",
        "SyTabContent { name: \"overview\"; Text { text: " + JSON.stringify("개요 패널입니다.") + " } }",
        "SyTabContent { name: \"activity\"; Text { text: " + JSON.stringify("활동 패널입니다.") + " } }",
        "SyTabContent { name: \"settings\"; Text { text: " + JSON.stringify("설정 패널입니다.") + " } }"
    ].join("\n")

    Column {
        spacing: 12
        SyTabGroup {
            width: 480
            height: 180
            type: storyArgs.type
            size: storyArgs.size
            position: storyArgs.position
            align: storyArgs.align
            padding: storyArgs.padding
            disabled: storyArgs.disabled
            addNewTab: storyArgs.addNewTab
            onSelected: (detail) => output.log(detail.tabkey)
            SyTab { tabkey: "overview"; text: "개요" }
            SyTab { tabkey: "activity"; text: "활동" }
            SyTab { tabkey: "settings"; text: "설정"; disabled: true }
            SyTabContent { name: "overview"; Text { text: "개요 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyTabContent { name: "activity"; Text { text: "활동 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyTabContent { name: "settings"; Text { text: "설정 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
        }
        EventLog { id: output }
    }

}

08 아래쪽 가운데 탭

position · align 설정을 적용한 아래쪽 가운데 탭 예제입니다.

기본 실행 화면

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 string type: "line"
        property string size: "medium"
        property string position: "bottom"
        property string align: "center"
        property string padding: "none"
        property bool disabled: false
        property bool addNewTab: false
    }

    readonly property string members: [
        "SyTab { tabkey: \"overview\"; text: " + JSON.stringify("개요") + " }",
        "SyTab { tabkey: \"activity\"; text: " + JSON.stringify("활동") + " }",
        "SyTab { tabkey: \"settings\"; text: " + JSON.stringify("설정") + "; disabled: true }",
        "SyTabContent { name: \"overview\"; Text { text: " + JSON.stringify("개요 패널입니다.") + " } }",
        "SyTabContent { name: \"activity\"; Text { text: " + JSON.stringify("활동 패널입니다.") + " } }",
        "SyTabContent { name: \"settings\"; Text { text: " + JSON.stringify("설정 패널입니다.") + " } }"
    ].join("\n")

    Column {
        spacing: 12
        SyTabGroup {
            width: 480
            height: 180
            type: storyArgs.type
            size: storyArgs.size
            position: storyArgs.position
            align: storyArgs.align
            padding: storyArgs.padding
            disabled: storyArgs.disabled
            addNewTab: storyArgs.addNewTab
            onSelected: (detail) => output.log(detail.tabkey)
            SyTab { tabkey: "overview"; text: "개요" }
            SyTab { tabkey: "activity"; text: "활동" }
            SyTab { tabkey: "settings"; text: "설정"; disabled: true }
            SyTabContent { name: "overview"; Text { text: "개요 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyTabContent { name: "activity"; Text { text: "활동 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyTabContent { name: "settings"; Text { text: "설정 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
        }
        EventLog { id: output }
    }

}

09 탭 추가 버튼

addNewTab 설정을 적용한 탭 추가 버튼 예제입니다.

기본 실행 화면

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 string type: "line"
        property string size: "medium"
        property string position: "top"
        property string align: "left"
        property string padding: "none"
        property bool disabled: false
        property bool addNewTab: true
    }

    readonly property string members: [
        "SyTab { tabkey: \"overview\"; text: " + JSON.stringify("개요") + " }",
        "SyTab { tabkey: \"activity\"; text: " + JSON.stringify("활동") + " }",
        "SyTab { tabkey: \"settings\"; text: " + JSON.stringify("설정") + "; disabled: true }",
        "SyTabContent { name: \"overview\"; Text { text: " + JSON.stringify("개요 패널입니다.") + " } }",
        "SyTabContent { name: \"activity\"; Text { text: " + JSON.stringify("활동 패널입니다.") + " } }",
        "SyTabContent { name: \"settings\"; Text { text: " + JSON.stringify("설정 패널입니다.") + " } }"
    ].join("\n")

    Column {
        spacing: 12
        SyTabGroup {
            width: 480
            height: 180
            type: storyArgs.type
            size: storyArgs.size
            position: storyArgs.position
            align: storyArgs.align
            padding: storyArgs.padding
            disabled: storyArgs.disabled
            addNewTab: storyArgs.addNewTab
            onSelected: (detail) => output.log(detail.tabkey)
            SyTab { tabkey: "overview"; text: "개요" }
            SyTab { tabkey: "activity"; text: "활동" }
            SyTab { tabkey: "settings"; text: "설정"; disabled: true }
            SyTabContent { name: "overview"; Text { text: "개요 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyTabContent { name: "activity"; Text { text: "활동 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyTabContent { name: "settings"; Text { text: "설정 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
        }
        EventLog { id: output }
    }

}

10 비활성 탭

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 string type: "line"
        property string size: "medium"
        property string position: "top"
        property string align: "left"
        property string padding: "none"
        property bool disabled: true
        property bool addNewTab: false
    }

    readonly property string members: [
        "SyTab { tabkey: \"overview\"; text: " + JSON.stringify("개요") + " }",
        "SyTab { tabkey: \"activity\"; text: " + JSON.stringify("활동") + " }",
        "SyTab { tabkey: \"settings\"; text: " + JSON.stringify("설정") + "; disabled: true }",
        "SyTabContent { name: \"overview\"; Text { text: " + JSON.stringify("개요 패널입니다.") + " } }",
        "SyTabContent { name: \"activity\"; Text { text: " + JSON.stringify("활동 패널입니다.") + " } }",
        "SyTabContent { name: \"settings\"; Text { text: " + JSON.stringify("설정 패널입니다.") + " } }"
    ].join("\n")

    Column {
        spacing: 12
        SyTabGroup {
            width: 480
            height: 180
            type: storyArgs.type
            size: storyArgs.size
            position: storyArgs.position
            align: storyArgs.align
            padding: storyArgs.padding
            disabled: storyArgs.disabled
            addNewTab: storyArgs.addNewTab
            onSelected: (detail) => output.log(detail.tabkey)
            SyTab { tabkey: "overview"; text: "개요" }
            SyTab { tabkey: "activity"; text: "활동" }
            SyTab { tabkey: "settings"; text: "설정"; disabled: true }
            SyTabContent { name: "overview"; Text { text: "개요 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyTabContent { name: "activity"; Text { text: "활동 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyTabContent { name: "settings"; Text { text: "설정 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
        }
        EventLog { id: output }
    }

}

11 큰 탭 컨트롤

size 설정을 적용한 큰 탭 컨트롤 예제입니다.

기본 실행 화면

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 string type: "line"
        property string size: "large"
        property string position: "top"
        property string align: "left"
        property string padding: "none"
        property bool disabled: false
        property bool addNewTab: false
    }

    readonly property string members: [
        "SyTab { tabkey: \"overview\"; text: " + JSON.stringify("개요") + " }",
        "SyTab { tabkey: \"activity\"; text: " + JSON.stringify("활동") + " }",
        "SyTab { tabkey: \"settings\"; text: " + JSON.stringify("설정") + "; disabled: true }",
        "SyTabContent { name: \"overview\"; Text { text: " + JSON.stringify("개요 패널입니다.") + " } }",
        "SyTabContent { name: \"activity\"; Text { text: " + JSON.stringify("활동 패널입니다.") + " } }",
        "SyTabContent { name: \"settings\"; Text { text: " + JSON.stringify("설정 패널입니다.") + " } }"
    ].join("\n")

    Column {
        spacing: 12
        SyTabGroup {
            width: 480
            height: 180
            type: storyArgs.type
            size: storyArgs.size
            position: storyArgs.position
            align: storyArgs.align
            padding: storyArgs.padding
            disabled: storyArgs.disabled
            addNewTab: storyArgs.addNewTab
            onSelected: (detail) => output.log(detail.tabkey)
            SyTab { tabkey: "overview"; text: "개요" }
            SyTab { tabkey: "activity"; text: "활동" }
            SyTab { tabkey: "settings"; text: "설정"; disabled: true }
            SyTabContent { name: "overview"; Text { text: "개요 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyTabContent { name: "activity"; Text { text: "활동 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyTabContent { name: "settings"; Text { text: "설정 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
        }
        EventLog { id: output }
    }

}

12 탭 본문 여백

padding 설정을 적용한 탭 본문 여백 예제입니다.

기본 실행 화면

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 string type: "line"
        property string size: "medium"
        property string position: "top"
        property string align: "left"
        property string padding: "large"
        property bool disabled: false
        property bool addNewTab: false
    }

    readonly property string members: [
        "SyTab { tabkey: \"overview\"; text: " + JSON.stringify("개요") + " }",
        "SyTab { tabkey: \"activity\"; text: " + JSON.stringify("활동") + " }",
        "SyTab { tabkey: \"settings\"; text: " + JSON.stringify("설정") + "; disabled: true }",
        "SyTabContent { name: \"overview\"; Text { text: " + JSON.stringify("개요 패널입니다.") + " } }",
        "SyTabContent { name: \"activity\"; Text { text: " + JSON.stringify("활동 패널입니다.") + " } }",
        "SyTabContent { name: \"settings\"; Text { text: " + JSON.stringify("설정 패널입니다.") + " } }"
    ].join("\n")

    Column {
        spacing: 12
        SyTabGroup {
            width: 480
            height: 180
            type: storyArgs.type
            size: storyArgs.size
            position: storyArgs.position
            align: storyArgs.align
            padding: storyArgs.padding
            disabled: storyArgs.disabled
            addNewTab: storyArgs.addNewTab
            onSelected: (detail) => output.log(detail.tabkey)
            SyTab { tabkey: "overview"; text: "개요" }
            SyTab { tabkey: "activity"; text: "활동" }
            SyTab { tabkey: "settings"; text: "설정"; disabled: true }
            SyTabContent { name: "overview"; Text { text: "개요 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyTabContent { name: "activity"; Text { text: "활동 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
            SyTabContent { name: "settings"; Text { text: "설정 패널입니다."; padding: 12; font.family: Theme.fontFamily; font.pixelSize: 14; color: Theme.semantic.textDefault } }
        }
        EventLog { id: output }
    }

}

API 90

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

속성 · SyTabGroup

타입	기본값	설명
list (기본 속성)	—	안에 선언한 SyTab 헤더와 SyTabContent 패널, 순서대로
list	—	스트립 오른쪽 끝에 놓이는 아이템(가로만)
int	첫 사용 가능 탭	활성 헤더의 인덱스; 설정하면 조용히 전환, 읽어서 알 수 있음. 사용 가능한 헤더가 없으면 −1
string	`"line"`	`line`(2 px 마커) · `card`(테두리 카드)
string	`"medium"`	헤더 높이와 글자: `small` 36 / 12 px · `medium` 44 / 14 px · `large` 52 / 16 px
string	`"top"`	스트립 쪽: `top` · `bottom` · `left` · `right`(left / right: 160 px 레일, 접힘 없음)
string	`"left"`	`left` · `center` — 가운데 정렬은 모든 헤더가 들어갈 때 적용
string	`"none"`	첫 헤더 앞 여백: `none` 0 · `small` 8 · `medium` 12 · `large` 16 px
bool	`false`	모든 헤더와 + 버튼 멈춤
bool	`false`	`extra` 뒤의 28 px + 버튼, `tabAdded()` 발생
bool	`false`	헤더를 스트립을 따라 끌어 순서를 바꿀 수 있음(그룹이 비활성이면 불가); 놓을 때 `ordered` 발생
var	`[]`	수집된 헤더
var	`[]`	패널, 순서대로(그룹이 유지)
var	`[]`	지금 ⋯ 목록으로 접힌 헤더들
var (읽기 전용)	`[]`	드래그나 `reorder()`로 정해진 순서의 `tabkey` 목록, 다시 수집해도 유지(`[]` = 선언 순서; 그룹이 유지)
읽기 전용	—	`position`이 left / right · 160 · 헤더 높이 px · 여백 px
읽기 전용	—	`position`이 left / right · 160 · 헤더 높이 px · 여백 px
읽기 전용	—	`position`이 left / right · 160 · 헤더 높이 px · 여백 px
읽기 전용	—	`position`이 left / right · 160 · 헤더 높이 px · 여백 px

속성 · SyTab

타입	기본값	설명
list (기본 속성)	—	글자 뒤(× 앞)에 놓이는 아이템
string	`""`	헤더의 키; 패널은 `name`이 같은 SyTabContent
string	`""`	라벨(비어 있으면 숨김)
bool	`false`	글자 뒤의 ×, 탭을 닫음
bool	`false`	×가 `closed`만 보고; `setClose(true)` / `closeTab()`까지 탭이 남음
bool	`false`	회색, 멈춤; 기본 활성 탭이 되지 않음
bool · int · string	—	그룹이 설정: 이 헤더가 활성인지, 인덱스, 그룹의 모양
bool · int · string	—	그룹이 설정: 이 헤더가 활성인지, 인덱스, 그룹의 모양
bool · int · string	—	그룹이 설정: 이 헤더가 활성인지, 인덱스, 그룹의 모양
bool · int · string	—	그룹이 설정: 이 헤더가 활성인지, 인덱스, 그룹의 모양
bool · int · string	—	그룹이 설정: 이 헤더가 활성인지, 인덱스, 그룹의 모양
bool (읽기 전용)	—	헤더 또는 그룹의 `disabled`
bool (읽기 전용)	—	포인터가 헤더 위에 있음
bool (읽기 전용)	—	키보드 포커스
var	`null`	소유하는 그룹(그룹이 설정)

속성 · SyTabContent

타입	기본값	설명
list (기본 속성)	—	패널의 아이템
string	`""`	`tabkey`가 같은 SyTab과 패널을 짝지음
bool	`false`	그룹이 설정: 이 패널이 보이는 패널
bool	`false`	패널이 50 %로 흐려지고 안의 아이템이 입력을 무시

추가 속성

이름	타입 / 기본값	설명
		탭 막대 너비(논리 픽셀)입니다. 줄이면 남는 탭이 넘침 메뉴로 이동합니다.

메서드

메서드	설명
	`index`의 헤더를 활성화하고 `selected` + `tabSelected` 발생; 모르는 인덱스나 비활성 헤더면 무시
	`active`(int) 반환
	`tabkey`(문자열) 또는 인덱스(숫자)로 헤더를 찾아 `setClose(true)` 호출: 보고하고 제거, `manualClose`나 비활성이어도. 모르면 아무 일 없음
	`from`의 헤더를 `to`로 옮기고(`tabs`의 인덱스) 헤더 인덱스를 다시 매기며 `active`를 같은 헤더에 유지하고 `ordered` 발생; 인덱스가 범위 밖이거나 `from`과 `to`가 같으면 무시
	클릭이 하는 일: 탭을 활성화하고 보고. 비활성이면 무시
	`closed` 발생; `force` 없는 `manualClose`가 아니면 탭 제거. `force` 없이는 비활성 탭에서 아무 일 없음

시그널

시그널	인자	시점
	`detail: { tabkey, index }`	클릭, Space / Enter, 방향키, ⋯ 목록, `setActiveTab()`으로 헤더가 활성화됨. 바인딩으로 `active`를 설정할 때는 아님
	`detail: { index, value }`	같은 순간, `selected` 직후; `value`는 tabkey
	`detail: { tabkey, index }`	탭의 ×가 클릭됨(사용 가능한 탭), 또는 `setClose()` / `closeTab()` 실행 — 탭이 남는 `manualClose`에서도
	`detail: { index, value }`	같은 순간, `closed` 직후
	—	+ 버튼 클릭(`addNewTab`); 그룹이 disabled이면 아님
	`tabs`	드래그(`isDraggable`)가 헤더 자리를 바꾼 뒤 놓였거나 `reorder()`가 실행됨; `tabs`가 새 순서
	`detail: { tabkey, index }`	헤더 자신의 시그널, 그룹의 것 직전
	`detail: { tabkey, index }`	헤더 자신의 시그널, 그룹의 것 직전

동작

항목	동작 / 조건
	활성 헤더의 인덱스; 설정하면 조용히 전환, 읽어서 알 수 있음. 사용 가능한 헤더가 없으면 −1
	`index`의 헤더를 활성화하고 `selected` + `tabSelected` 발생; 모르는 인덱스나 비활성 헤더면 무시
	클릭, Space / Enter, 방향키, ⋯ 목록, `setActiveTab()`으로 헤더가 활성화됨. 바인딩으로 `active`를 설정할 때는 아님
	같은 순간, `selected` 직후; `value`는 tabkey
	`tabkey`가 같은 SyTab과 패널을 짝지음
	헤더의 키; 패널은 `name`이 같은 SyTabContent
	라벨(비어 있으면 숨김)
	글자 뒤의 ×, 탭을 닫음
	헤더 폭은 내용 + 양쪽 12 / 16 / 20 px 여백이고 높이는 36 / 44 / 52 px입니다(`size` small · medium · large).
	`type: "line"`은 활성 헤더의 내용 쪽에 2 px 마커와 스트립을 따라 1 px 선을 그리고, `type: "card"`는 모든 헤더를 바깥쪽이 둥근 테두리 카드로 4 px 간격으로 그립니다.
	`type: "line"`은 활성 헤더의 내용 쪽에 2 px 마커와 스트립을 따라 1 px 선을 그리고, `type: "card"`는 모든 헤더를 바깥쪽이 둥근 테두리 카드로 4 px 간격으로 그립니다.
	첫 헤더 앞 여백: `none` 0 · `small` 8 · `medium` 12 · `large` 16 px
	스트립 오른쪽 끝에 놓이는 아이템(가로만)
	`extra` 뒤의 28 px + 버튼, `tabAdded()` 발생
	+ 버튼 클릭(`addNewTab`); 그룹이 disabled이면 아님
	지금 ⋯ 목록으로 접힌 헤더들
	`left` · `center` — 가운데 정렬은 모든 헤더가 들어갈 때 적용
	헤더를 스트립을 따라 끌어 순서를 바꿀 수 있음(그룹이 비활성이면 불가); 놓을 때 `ordered` 발생
	드래그(`isDraggable`)가 헤더 자리를 바꾼 뒤 놓였거나 `reorder()`가 실행됨; `tabs`가 새 순서
	`from`의 헤더를 `to`로 옮기고(`tabs`의 인덱스) 헤더 인덱스를 다시 매기며 `active`를 같은 헤더에 유지하고 `ordered` 발생; 인덱스가 범위 밖이거나 `from`과 `to`가 같으면 무시
	`isDraggable: true`이면(그리고 그룹이 비활성이 아니면) 헤더를 스트립을 따라 끌 수 있습니다: 이웃 헤더의 가운데를 넘으면 둘이 자리를 바꾸고, 놓을 때 `ordered(tabs)`가 새 순서의 헤더들과 함께 한 번 발생합니다. `reorder(from, to)`(`tabs`의 인덱스)는 코드에서 헤더를 옮기며 역시 `ordered`를 발생시킵니다. `type`, `size`, `position`이 바뀌면 헤더를 다시 수집하며 그때 `tabs`와 `contents`가 다시 만들어집니다(헤더 순서를 바꿨다면 `tabOrder`가 기억하는 순서로).
	드래그나 `reorder()`로 정해진 순서의 `tabkey` 목록, 다시 수집해도 유지(`[]` = 선언 순서; 그룹이 유지)
	`closed` 발생; `force` 없는 `manualClose`가 아니면 탭 제거. `force` 없이는 비활성 탭에서 아무 일 없음
	×는 `setClose(false)`를 호출합니다: 탭이 `closed({ tabkey, index })`를 발생시키고, `manualClose`가 아니면 그룹이 헤더와 패널을 제거하고 남은 헤더의 인덱스를 다시 매기며 `active`를 마지막 인덱스 이내로 제한하고(이제 그 인덱스에 있는 헤더가 활성) `closed`와 `tabClosed({ index, value })`를 발생시킵니다.
	×가 `closed`만 보고; `setClose(true)` / `closeTab()`까지 탭이 남음
	×는 `setClose(false)`를 호출합니다: 탭이 `closed({ tabkey, index })`를 발생시키고, `manualClose`가 아니면 그룹이 헤더와 패널을 제거하고 남은 헤더의 인덱스를 다시 매기며 `active`를 마지막 인덱스 이내로 제한하고(이제 그 인덱스에 있는 헤더가 활성) `closed`와 `tabClosed({ index, value })`를 발생시킵니다.
	같은 순간, `closed` 직후
	`tabkey`(문자열) 또는 인덱스(숫자)로 헤더를 찾아 `setClose(true)` 호출: 보고하고 제거, `manualClose`나 비활성이어도. 모르면 아무 일 없음
	모든 헤더와 + 버튼 멈춤
	탭 막대 너비(논리 픽셀)입니다. 줄이면 남는 탭이 넘침 메뉴로 이동합니다.
	그룹에 `width`와 `height`를 주십시오(암시 크기는 480 × 스트립 + 패널).
	Tab이 사용 가능한 헤더에 도달합니다. 포커스된 헤더에서 Left / Up은 이전 사용 가능한 헤더로, Right / Down은 다음으로(순환; 이동이 곧 활성화), Space / Enter는 선택.
	`line`(2 px 마커) · `card`(테두리 카드)
	헤더 높이와 글자: `small` 36 / 12 px · `medium` 44 / 14 px · `large` 52 / 16 px
	스트립 쪽: `top` · `bottom` · `left` · `right`(left / right: 160 px 레일, 접힘 없음)
	`type`, `size`, `position`이 바뀌면 헤더를 다시 수집하며 그때 `tabs`와 `contents`가 다시 만들어집니다(헤더 순서를 바꿨다면 `tabOrder`가 기억하는 순서로).

키보드

항목	동작 / 조건
	`SyGlobalHeader`는 앱 바에 SyTab 헤더를 품고, `SyCollapse`는 구역을 제자리에서 접으며, `SyNav`는 화면 사이를 이동합니다.

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

컴포넌트

다운로드부터 첫 화면까지

C++ · CMake

Python · PySide6

실행을 확인한 Windows 환경

완성된 두 가지 업무 예제

실제 화면에서 확인하세요

직접 실행하는 Gallery

QML Core

문제 해결

Tabs

지원 QML 타입

예제로 보기

01 기본 구성

02 closable · manualClose · disabled

03 overflow

04 selected · tabSelected · closed · tabClosed · tabAdded

05 setActiveTab · getActiveTab · closeTab

06 카드형 탭

07 세로 탭

08 아래쪽 가운데 탭

09 탭 추가 버튼

10 비활성 탭

11 큰 탭 컨트롤

12 탭 본문 여백

속성 · SyTabGroup

속성 · SyTab

속성 · SyTabContent

추가 속성

메서드

시그널

동작

키보드

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