QML
← 전체 컴포넌트

Inline Message

관련 컨트롤 옆에 안내나 오류 메시지를 표시합니다. 문제를 해결할 동작 버튼도 함께 제공할 수 있습니다.

import Syidax.Core.InlineMessage

지원 QML 타입

타입정의 / 역할
관련 콘텐츠 가까이에 배치하는 간결한 안내 메시지입니다.

예제로 보기

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

01 기본 구성

SyInlineMessage는 선언된 컨트롤 — 필드, 버튼 — 옆에 떠오르는 작은 메시지 말풍선으로, 종류 아이콘, message, 그리고 선택적으로 작은 동작 버튼(action / btnLabel)이나 actionContent에 직접 둔 아이템을 가집니다.

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

    property QtObject settings: QtObject {
        id: storyArgs
        property string variant: "informational"
        property string message: "저장됐습니다."
        property bool icon: true
        property bool action: false
        property string btnLabel: ""
        property string position: "bottom"
        property string trigger: "click"
        property bool sticky: false
        property string animation: "none"
    }

    

    Column {
        spacing: 12
        Item {
            width: 360
            height: 120
            SyButton {
                anchors.centerIn: parent
                text: "눌러 보세요"
                SyInlineMessage { id: exampleControl1; 
                    variant: storyArgs.variant
                    message: storyArgs.message
                    icon: storyArgs.icon
                    action: storyArgs.action
                    btnLabel: storyArgs.btnLabel
                    position: storyArgs.position
                    trigger: storyArgs.trigger
                    sticky: storyArgs.sticky
                    animation: storyArgs.animation
                    onActionClick: output.log("actionClick")
                }
            }
        }
        EventLog { id: output }
    }

}

02 actionClick · dismiss

시그널 셋.

Qt 실행 화면 · 이미지
actionClick · dismiss · 열린 화면
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
        Item {
            width: 360
            height: 100
            SyInput {
                anchors.centerIn: parent
                width: 240
                label: "이메일"
                SyInlineMessage { id: exampleControl1; 
                    variant: "error"
                    message: "필수 항목입니다."
                    btnLabel: "고치기"
                    trigger: "focusout"
                    onActionClick: { if (true) { output.log("actionClick") } }
                    onDismiss: { if (true) { output.log("dismiss") } }
                }
            }
        }
        EventLog { id: output }
    }
}

03 show · hide

show()는 메시지를 열고 hide()는 닫습니다 — trigger와 상관없이 코드에서.

Qt 실행 화면 · 이미지
show · hide · 열린 화면
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
        Item {
            width: 560
            height: 180
            SyButton { anchors.centerIn: parent; text: "눌러 보세요"; SyInlineMessage { id: note; variant: "success"; message: "저장됐습니다."; trigger: "none"; sticky: true } }
        }
        Row {
            objectName: "exampleCommands"

            spacing: 8
            SyButton { id: exampleControl1;  visible: true; text: "note.show()"; variant: "secondary"; size: "small"; onClicked: note.show() }
            SyButton { id: exampleControl2;  visible: true; text: "note.hide()"; variant: "secondary"; size: "small"; onClicked: note.hide() }
        }
        Text {
            text: "note.isOpen === " + note.isOpen
            font.family: Theme.monoFontFamily
            font.pixelSize: 12
            color: Theme.semantic.textSubtle
        }
    }
}

04 오류 피드백

variant 설정을 적용한 오류 피드백 예제입니다.

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

    property QtObject settings: QtObject {
        id: storyArgs
        property string variant: "error"
        property string message: "저장됐습니다."
        property bool icon: true
        property bool action: false
        property string btnLabel: ""
        property string position: "bottom"
        property string trigger: "click"
        property bool sticky: false
        property string animation: "none"
    }

    

    Column {
        spacing: 12
        Item {
            width: 360
            height: 120
            SyButton {
                anchors.centerIn: parent
                text: "눌러 보세요"
                SyInlineMessage { id: exampleControl1; 
                    variant: storyArgs.variant
                    message: storyArgs.message
                    icon: storyArgs.icon
                    action: storyArgs.action
                    btnLabel: storyArgs.btnLabel
                    position: storyArgs.position
                    trigger: storyArgs.trigger
                    sticky: storyArgs.sticky
                    animation: storyArgs.animation
                    onActionClick: output.log("actionClick")
                }
            }
        }
        EventLog { id: output }
    }

}

05 성공 피드백

variant 설정을 적용한 성공 피드백 예제입니다.

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

    property QtObject settings: QtObject {
        id: storyArgs
        property string variant: "success"
        property string message: "저장됐습니다."
        property bool icon: true
        property bool action: false
        property string btnLabel: ""
        property string position: "bottom"
        property string trigger: "click"
        property bool sticky: false
        property string animation: "none"
    }

    

    Column {
        spacing: 12
        Item {
            width: 360
            height: 120
            SyButton {
                anchors.centerIn: parent
                text: "눌러 보세요"
                SyInlineMessage { id: exampleControl1; 
                    variant: storyArgs.variant
                    message: storyArgs.message
                    icon: storyArgs.icon
                    action: storyArgs.action
                    btnLabel: storyArgs.btnLabel
                    position: storyArgs.position
                    trigger: storyArgs.trigger
                    sticky: storyArgs.sticky
                    animation: storyArgs.animation
                    onActionClick: output.log("actionClick")
                }
            }
        }
        EventLog { id: output }
    }

}

06 텍스트만 표시

icon 설정을 적용한 텍스트만 표시 예제입니다.

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

    property QtObject settings: QtObject {
        id: storyArgs
        property string variant: "informational"
        property string message: "저장됐습니다."
        property bool icon: false
        property bool action: false
        property string btnLabel: ""
        property string position: "bottom"
        property string trigger: "click"
        property bool sticky: false
        property string animation: "none"
    }

    

    Column {
        spacing: 12
        Item {
            width: 360
            height: 120
            SyButton {
                anchors.centerIn: parent
                text: "눌러 보세요"
                SyInlineMessage { id: exampleControl1; 
                    variant: storyArgs.variant
                    message: storyArgs.message
                    icon: storyArgs.icon
                    action: storyArgs.action
                    btnLabel: storyArgs.btnLabel
                    position: storyArgs.position
                    trigger: storyArgs.trigger
                    sticky: storyArgs.sticky
                    animation: storyArgs.animation
                    onActionClick: output.log("actionClick")
                }
            }
        }
        EventLog { id: output }
    }

}

07 입력 위에 피드백 표시

position 설정을 적용한 입력 위에 피드백 표시 예제입니다.

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

    property QtObject settings: QtObject {
        id: storyArgs
        property string variant: "informational"
        property string message: "저장됐습니다."
        property bool icon: true
        property bool action: false
        property string btnLabel: ""
        property string position: "top"
        property string trigger: "click"
        property bool sticky: false
        property string animation: "none"
    }

    

    Column {
        spacing: 12
        Item {
            width: 360
            height: 120
            SyButton {
                anchors.centerIn: parent
                text: "눌러 보세요"
                SyInlineMessage { id: exampleControl1; 
                    variant: storyArgs.variant
                    message: storyArgs.message
                    icon: storyArgs.icon
                    action: storyArgs.action
                    btnLabel: storyArgs.btnLabel
                    position: storyArgs.position
                    trigger: storyArgs.trigger
                    sticky: storyArgs.sticky
                    animation: storyArgs.animation
                    onActionClick: output.log("actionClick")
                }
            }
        }
        EventLog { id: output }
    }

}

08 동작 버튼이 있는 피드백

action 설정을 적용한 동작 버튼이 있는 피드백 예제입니다.

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

    property QtObject settings: QtObject {
        id: storyArgs
        property string variant: "informational"
        property string message: "저장됐습니다."
        property bool icon: true
        property bool action: true
        property string btnLabel: ""
        property string position: "bottom"
        property string trigger: "click"
        property bool sticky: false
        property string animation: "none"
    }

    

    Column {
        spacing: 12
        Item {
            width: 360
            height: 120
            SyButton {
                anchors.centerIn: parent
                text: "눌러 보세요"
                SyInlineMessage { id: exampleControl1; 
                    variant: storyArgs.variant
                    message: storyArgs.message
                    icon: storyArgs.icon
                    action: storyArgs.action
                    btnLabel: storyArgs.btnLabel
                    position: storyArgs.position
                    trigger: storyArgs.trigger
                    sticky: storyArgs.sticky
                    animation: storyArgs.animation
                    onActionClick: output.log("actionClick")
                }
            }
        }
        EventLog { id: output }
    }

}

API 67

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

속성

속성타입기본값설명
string"informational""informational"(= "info") · "success" · "warning" · "error" — 색과 아이콘.
string"Inline message"글자. 말풍선이 300 px 안에 머물도록 줄바꿈합니다.
booltrue종류 아이콘을 보입니다.
boolfalse동작 버튼(btnLabel 또는 "OK" 라벨)을 보입니다.
string""버튼의 라벨. 비어 있지 않으면 action이 false여도 버튼이 보입니다.
list—동작 행의 직접 만든 아이템. 내장 버튼을 대신합니다.
string"click""click" · "focusout" · "none".
string"bottom""top" · "bottom" · "left" · "right"(베이스의 모서리 이름도 동작).
boolfalse스스로 닫히지 않음. hide()만(그리고 click 트리거의 앵커 토글).
boolfalse베이스 팝업의 앵커를 향한 포인터.
int0열기 / 닫기까지의 밀리초.
int0열기 / 닫기까지의 밀리초.
string"none""none" · "fade"; 속도 "x-fast" · "fast" · "medium" · "slow" · "x-slow".
string"fast""none" · "fade"; 속도 "x-fast" · "fast" · "medium" · "slow" · "x-slow".
Item선언된 아이템따라다닐 아이템(세 단계 안에서 hovered를 가진 가장 가까운 조상으로 결정).
bool (읽기 전용)—메시지가 보임.
string (읽기 전용)—뒤집기 뒤의 쪽.
읽기 전용—동작 행이 보이는지, 결정된 종류, 테마 색과 아이콘.
읽기 전용—동작 행이 보이는지, 결정된 종류, 테마 색과 아이콘.
읽기 전용—동작 행이 보이는지, 결정된 종류, 테마 색과 아이콘.
읽기 전용—동작 행이 보이는지, 결정된 종류, 테마 색과 아이콘.
읽기 전용—동작 행이 보이는지, 결정된 종류, 테마 색과 아이콘.
베이스 팝업—저수준 기하와 모양. position과 variant가 구동합니다.
베이스 팝업—저수준 기하와 모양. position과 variant가 구동합니다.
베이스 팝업—저수준 기하와 모양. position과 variant가 구동합니다.
베이스 팝업—저수준 기하와 모양. position과 variant가 구동합니다.
베이스 팝업—저수준 기하와 모양. position과 variant가 구동합니다.
베이스 팝업—저수준 기하와 모양. position과 variant가 구동합니다.
베이스 팝업—저수준 기하와 모양. position과 variant가 구동합니다.

메서드

메서드설명
코드에서 엽니다(setOpen()): 대기 중인 지연을 취소하고, 앵커가 disabled / readonly / 비활성이면 거부됩니다.
코드에서 닫습니다(setClose()): 대기 중인 지연을 취소하고 sticky여도 닫으며 dismiss()가 뒤따릅니다.
베이스 팝업의 메서드. 쓸 것은 show() / hide()입니다.
베이스 팝업의 메서드. 쓸 것은 show() / hide()입니다.
베이스 팝업의 메서드. 쓸 것은 show() / hide()입니다.
베이스 팝업의 메서드. 쓸 것은 show() / hide()입니다.
베이스 팝업의 메서드. 쓸 것은 show() / hide()입니다.

시그널

시그널인자발생 시점
—내장 동작 버튼을 눌렀을 때. actionContent 아이템에는 발생하지 않습니다. 메시지는 열린 채입니다.
—같은 누름에 대해 actionClick() 직후 — 별칭이므로 둘 중 하나만 처리하십시오.
—말풍선이 어떤 경로로든 숨겨짐(hide(), Escape, 바깥 누름, 앵커 토글). 이미 숨겨진 동안에는 발생하지 않습니다.
—팝업의 열기 전환이 끝나면 발생합니다.
—팝업의 닫기 전환이 끝나면 발생합니다.
—베이스 팝업의 생명 주기 시그널.

동작

항목동작 / 조건
메시지가 선언된 아이템. 컨트롤의 내용 안에서는 최대 세 단계 부모를 올라가 불리언 hovered를 가진 가장 가까운 아이템을 찾으므로 컨트롤 자체가 앵커입니다. 앵커의 자식이 되고 창 오버레이에 그려지며 앵커를 따라다닙니다.
상호작용 가능한 앵커 — 앵커가 enabled이고 disabled도 readonly도 아닐 때만 열립니다.
코드에서 엽니다(setOpen()): 대기 중인 지연을 취소하고, 앵커가 disabled / readonly / 비활성이면 거부됩니다.
"click" · "focusout" · "none".
코드에서 닫습니다(setClose()): 대기 중인 지연을 취소하고 sticky여도 닫으며 dismiss()가 뒤따릅니다.
스스로 닫히지 않음. hide()만(그리고 click 트리거의 앵커 토글).
내장 동작 버튼을 눌렀을 때. actionContent 아이템에는 발생하지 않습니다. 메시지는 열린 채입니다.
같은 누름에 대해 actionClick() 직후 — 별칭이므로 둘 중 하나만 처리하십시오.
말풍선이 어떤 경로로든 숨겨짐(hide(), Escape, 바깥 누름, 앵커 토글). 이미 숨겨진 동안에는 발생하지 않습니다.
종류 아이콘을 보입니다.
글자. 말풍선이 300 px 안에 머물도록 줄바꿈합니다.
동작 버튼(btnLabel 또는 "OK" 라벨)을 보입니다.
버튼의 라벨. 비어 있지 않으면 action이 false여도 버튼이 보입니다.
동작 행의 직접 만든 아이템. 내장 버튼을 대신합니다.
informational(기본; info도 같음), success, warning, error: 테마의 배경, 테두리, 글자, 아이콘 색.
"top" · "bottom" · "left" · "right"(베이스의 모서리 이름도 동작).
뒤집기 뒤의 쪽.
placement는 position이 구동하는 베이스의 저수준 속성입니다 — 둘 다가 아니라 position을 설정하십시오.
베이스 팝업의 앵커를 향한 포인터.
animation: "fade"는 animationSpeed(x-fast 100 · fast 150 · medium 250 · slow 350 · x-slow 500 ms)에 걸쳐 페이드합니다.
animation: "fade"는 animationSpeed(x-fast 100 · fast 150 · medium 250 · slow 350 · x-slow 500 ms)에 걸쳐 페이드합니다.
지연 — opendelay / closedelay(ms, 기본 0).
지연 — opendelay / closedelay(ms, 기본 0).
show() / hide()가 취소하며, 어떤 경로로든 — Escape, 바깥 누름, close() — 닫히면 대기 중인 지연 열기가 취소됩니다.

키보드

항목동작 / 조건
페이지 전체 공지에는 SyBannerMessage, 지나가는 확인에는 SyToast, 단순한 안내에는 SyTooltip, 폼 수준 검증에는 SyForm; 흔한 앵커로 SyInput과 SyButton.