QML
← 전체 컴포넌트

Empty

목록이나 화면에 표시할 항목이 없음을 알리고 다음에 할 수 있는 작업을 안내합니다.

import Syidax.Core.Empty

지원 QML 타입

타입정의 / 역할
그림이나 사용자 콘텐츠와 함께 데이터가 없는 상태를 안내합니다.

예제로 보기

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

01 기본 구성

SyEmpty는 "여기 아무것도 없음" 상태입니다: 글리프, 한 줄의 글, 그 아래에 안에 선언한 것 — 보통 빈 영역을 채울 동작("첫 프로젝트 만들기", "필터 지우기")입니다.

Qt 실행 화면 · 이미지
기본 구성 · 기본
기본 실행 화면
QML 코드
import QtQuick
import Syidax.Core

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

    property QtObject settings: QtObject {
        id: storyArgs
        property string text: "결과가 없습니다"
        property bool showText: true
        property bool customIcon: false
    }

    

    SyEmpty {
        width: 320
        text: storyArgs.text
        showText: storyArgs.showText
        icon: storyArgs.customIcon ? Icons.inputSearch : Icons.emptyInbox
    }

}

02 slot

SyEmpty 안에 선언한 것(기본 속성)은 글 줄 아래 4 px에 가로 가운데로 배치됩니다 — 보통 영역을 채우는 동작의 SyButton이나 짧은 안내문입니다.

Qt 실행 화면 · 이미지
slot · 기본
기본 실행 화면
QML 코드
import QtQuick
import Syidax.Core

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

    SyEmpty {
        width: 320
        text: "결과가 없습니다"
        SyButton { text: "필터 지우기"; variant: "primary"; size: "small" }
    }
}

03 icon

icon은 글 위의 글리프입니다: 기본은 받은 편지함 글리프(Icons.emptyInbox)이고, 다른 Icons.* url이나 직접 만든 SVG 파일 url도 됩니다.

Qt 실행 화면 · 이미지
icon · 기본
QML 코드
import QtQuick
import Syidax.Core

Item {
    implicitWidth: Math.max(360, childrenRect.width)
    implicitHeight: childrenRect.height
    property QtObject settings: QtObject {
        id: storyArgs
        property string glyph: "emptyInbox"
    }

    

    SyEmpty { width: 320; text: "결과가 없습니다"; icon: Icons[storyArgs.glyph] }
}

04 사용자 지정 빈 상태 아이콘

customIcon 설정을 적용한 사용자 지정 빈 상태 아이콘 예제입니다.

Qt 실행 화면 · 이미지
사용자 지정 빈 상태 아이콘 · 실행 결과
기본 실행 화면
QML 코드
import QtQuick
import Syidax.Core

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

    property QtObject settings: QtObject {
        id: storyArgs
        property string text: "결과가 없습니다"
        property bool showText: true
        property bool customIcon: true
    }

    

    SyEmpty {
        width: 320
        text: storyArgs.text
        showText: storyArgs.showText
        icon: storyArgs.customIcon ? Icons.inputSearch : Icons.emptyInbox
    }

}

API 13

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

속성

속성타입기본값설명
list (기본 속성)—글 아래에 가운데로 보이는 아이템 — 보통 영역을 채우는 동작.
string"No Data"글리프 아래의 줄; 접근성 이름이기도 합니다. 빈 문자열이면 줄이 숨겨집니다.
urlIcons.emptyInbox글리프: Icons.* url 또는 SVG 파일 url, 빈 상태 아이콘 색으로 물듭니다.
booltruefalse이면 글리프와 내용은 두고 글 줄만 숨깁니다.

메서드

항목동작 / 조건
SyEmpty는 메서드를 선언하지 않습니다.

시그널

항목동작 / 조건
SyEmpty는 시그널을 선언하지 않습니다. 동작은 안에 선언한 아이템이며(SyButton은 자기 clicked를 알립니다).

동작

항목동작 / 조건
빈 상태의 너비 안에 가로 가운데로 놓인 Column: 글리프가 든 40 × 40 px 상자, 글 줄(14 px), 그다음 선언한 내용. 부분 사이 4 px, 위아래 여백 4 px. 암시적 너비는 열의 너비이되 최소 120 px이고, 암시적 높이는 부분들을 따릅니다. 놓인 영역의 너비를 주면 그 안에 가운데 맞춰집니다.
글리프 아래의 줄; 접근성 이름이기도 합니다. 빈 문자열이면 줄이 숨겨집니다.
false이면 글리프와 내용은 두고 글 줄만 숨깁니다.
글리프: Icons.* url 또는 SVG 파일 url, 빈 상태 아이콘 색으로 물듭니다.
기본 속성. showText가 false여도 만들어지며 글 아래(또는 글리프 바로 아래)에 나타납니다.
빈 상태 자체는 포인터 입력을 받지 않고, 선언한 내용만 받습니다.

키보드

항목동작 / 조건
그 전의 로딩 상태에는 SySkeleton과 SySpinner, 흔한 내용으로 SyButton, 글리프에는 SyIcon / Icons.