QMLQT QUICK · C++ · PYTHON
QML 컴포넌트, 공통 디자인 토큰과 직접 실행할 수 있는 예제로 데스크톱 화면을 만드세요.
QML Core는 별도 제품입니다. C++와 Python에서 같은 QML 화면을 사용합니다.
QML CORE
56개 컴포넌트 중 56개
START WITH A WORKING APP
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순수 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 출시 후 사용하는 방법입니다.
아래 버전에서 네이티브 창과 예제의 기본 실행을 검사했습니다. Qt 6.8은 소스 최소 기준이며 모든 Qt 버전의 검증을 뜻하지 않습니다. Gallery는 software 렌더러를 사용합니다.
실행 중인 Windows 앱을 단계별로 캡처했습니다. 재생·일시 정지로 각 상태를 살펴보세요.
TRY IT YOURSELF
Windows 앱에서 예제를 실행하고 속성을 살펴보며 밝은 테마와 어두운 테마를 전환하세요. Gallery는 평가용이며 상업용 SDK는 별도 제품입니다.
Gallery 다운로드 · Windows x64$24.99 / 월
$249.99 / 년 · 개발자 1명 기준
Chart와 동일한 정규 단가입니다. 첫 구매·추가 좌석·갱신에 같은 가격이 적용됩니다.
문서, 실행 가능한 예제와 진단 도구를 제공합니다. 개별 기술 지원, 온보딩, SLA는 제공하지 않습니다.
구매 및 라이선스 조건 보기 →--qml 경로가 Syidax 폴더를 포함하는지 확인하세요. Python에서는 qml-pure를 사용합니다. 소스 저장소가 아닌 압축 해제한 SDK를 기준으로 실행하세요.
QML Core 인증서를 다시 다운로드한 뒤 --license로 전달하세요. Web Core·Chart·Grid 인증서는 QML을 활성화하지 않습니다. 월간 만료 시 사용이 종료되며, 연간은 이용 기간 내 출시 버전에 한해 보유 권한이 적용됩니다.
플러그인 빌드의 Qt 버전과 아키텍처를 확인하세요. 서로 다른 Python Qt 바인딩을 혼용하지 마세요. qml-pure로 플러그인 ABI 의존성을 피할 수 있습니다.
PDF는 별도 QtQuick.Pdf 모듈이 필요합니다. 이 모듈이 없어도 나머지 Core 컴포넌트는 사용 가능합니다. 아이콘 팩 등록과 리소스 경로는 SDK의 ICON-PACKS 문서를 확인하세요.
예제는 사용자 앱 데이터 폴더에만 저장합니다. 권한과 디스크 공간을 확인하세요. 잘못된 JSON은 백업한 뒤 초기 데이터로 복구됩니다. 저장 실패 시 입력 값이 유지됩니다.
이름이나 검색어처럼 한 줄의 텍스트를 입력하는 필드입니다. 라벨, 안내 문구와 검증 오류를 함께 표시합니다.
import Syidax.Core.Input
| 타입 | 정의 / 역할 |
|---|---|
| 검증·도움말·선택적 지우기 버튼을 갖춘 한 줄 텍스트 필드입니다. |
미리보기는 Qt 실행 화면의 이미지입니다. 아래 버튼으로 결과를 전환하세요.
SyInput은 한 줄 텍스트 필드입니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string label: "이름"
property string placeholder: "이름을 입력하세요"
property string value: ""
property string variant: "text"
property string type: "text"
property string size: "medium"
property string status: "default"
property bool required: false
property bool disabled: false
property bool readonly: false
property bool clearable: false
property bool borderless: false
property string message: ""
}
SyInput {
label: storyArgs.label
placeholder: storyArgs.placeholder
value: storyArgs.value
variant: storyArgs.variant
type: storyArgs.type
size: storyArgs.size
status: storyArgs.status
required: storyArgs.required
disabled: storyArgs.disabled
readonly: storyArgs.readonly
clearable: storyArgs.clearable
borderless: storyArgs.borderless
message: storyArgs.message
onValueChanged: if (storyArgs.value !== value) storyArgs.value = value
}
}variant가 세 종류의 필드 중 하나를 고릅니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
Column {
spacing: 12
SyInput { placeholder: "이름을 입력하세요" }
SyInput { variant: "password"; value: "hunter2" }
SyInput { variant: "search" }
}
}size가 상자 높이와 글자 크기를 정합니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string size: "medium"
}
SyInput { label: "이름"; placeholder: "이름을 입력하세요"; size: storyArgs.size }
}status는 검증과 무관하게 상자의 색을 정합니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
Column {
spacing: 12
SyInput { value: "default" }
SyInput { value: "warning"; status: "warning" }
SyInput { value: "error"; status: "error" }
SyInput { value: "success"; status: "success" }
}
}세 속성이 사용자가 할 수 있는 일을 바꿉니다.
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: 12
SyInput { id: featureTarget0; visible: true; value: "비활성"; disabled: true }
SyInput { id: featureTarget1; visible: true; value: "읽기 전용"; readonly: true }
SyInput { id: featureTarget2; visible: true; placeholder: "테두리 없음"; borderless: true }
}
}clearable: true는 필드가 포커스를 갖고 값이 비어 있지 않은 동안 상자 끝에 ×를 보입니다(disabled·readonly에서는 보이지 않음).
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
SyInput { clearable: true; value: "지워 보세요"; onClear: output.log("clear") }
EventLog { id: output }
}
}prefix와 suffix는 어떤 아이템이든 받습니다 — 아이콘, 단위, 짧은 텍스트, 작은 버튼 — 그리고 상자 안에 배치합니다.
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: 12
SyInput { id: featureTarget0; visible: true;
placeholder: "you@example.com"
prefix: SyIcon { source: Icons.inputSearch }
}
SyInput { id: featureTarget1; visible: true;
value: "42"
suffix: Text { text: "USD"; color: Theme.semantic.textSubtle; font.family: Theme.fontFamily; font.pixelSize: 14 }
}
}
}네 속성이 validStatus를 정합니다.
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: 12
SyInput { visible: true; id: nameField; label: "이름"; required: true; placeholder: "이름을 입력하세요" }
SyInput { visible: true; id: nickField; label: "닉네임"; min: 3; max: 8; message: "3~8자" }
SyInput { visible: true; id: emailField; label: "이메일"; type: "email"; error: "이메일 주소 형식이 아닙니다" }
Row {
spacing: 8
SyButton { id: exampleControl1; visible: true; text: "nameField.reportValidity()"; variant: "secondary"; size: "small"; onClicked: nameField.reportValidity() }
SyButton { id: exampleControl2; visible: true; text: "nickField.reportValidity()"; variant: "secondary"; size: "small"; onClicked: nickField.reportValidity() }
SyButton { id: exampleControl3; visible: true; text: "emailField.reportValidity()"; variant: "secondary"; size: "small"; onClicked: emailField.reportValidity() }
}
}
}필드에는 시그널이 넷 있습니다.
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
SyInput {
label: "이메일"; type: "email"; required: true; clearable: true
onChanged: (detail) => { if (true) { output.log(("changed: %1 (valid: %2)").arg(detail.value).arg(detail.isValid)) } }
onFocused: (detail) => { if (true) { output.log("focused") } }
onBlured: (detail) => { if (true) { output.log(("blured: status %1").arg(detail.status)) } }
onClear: { if (true) { output.log("clear") } }
}
EventLog { id: output }
}
}필드의 함수들입니다.
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
SyInput { id: nameField; label: "이름"; required: true }
Flow {
width: 560
spacing: 8
SyButton { id: exampleControl1; visible: true; text: "nameField.setFocus()"; variant: "secondary"; size: "small"; onClicked: nameField.setFocus() }
SyButton { id: exampleControl2; visible: true; text: "nameField.setBlur()"; variant: "secondary"; size: "small"; onClicked: nameField.setBlur() }
SyButton { id: exampleControl3; visible: true; text: "nameField.checkValidity()"; variant: "secondary"; size: "small"; onClicked: output.log("checkValidity() → " + nameField.checkValidity()) }
SyButton { visible: true; text: "nameField.reportValidity()"; variant: "secondary"; size: "small"; onClicked: output.log("reportValidity() → " + nameField.reportValidity()) }
SyButton { visible: true; text: "nameField.setCustomError()"; variant: "secondary"; size: "small"; onClicked: nameField.setCustomError() }
SyButton { visible: true; text: "nameField.clearCustomError()"; variant: "secondary"; size: "small"; onClicked: nameField.clearCustomError() }
SyButton { visible: true; text: "nameField.getStatus()"; variant: "secondary"; size: "small"; onClicked: output.log("getStatus() → " + JSON.stringify(nameField.getStatus())) }
}
Text {
text: "nameField.hasFocus === " + nameField.hasFocus + " nameField.valid === " + nameField.valid
font.family: Theme.monoFontFamily
font.pixelSize: 12
color: Theme.semantic.textSubtle
}
EventLog { id: output }
}
}variant · clearable · value 설정을 적용한 검색과 지우기 예제입니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string label: "이름"
property string placeholder: "이름을 입력하세요"
property string value: "Syidax"
property string variant: "search"
property string type: "text"
property string size: "medium"
property string status: "default"
property bool required: false
property bool disabled: false
property bool readonly: false
property bool clearable: true
property bool borderless: false
property string message: ""
}
SyInput {
label: storyArgs.label
placeholder: storyArgs.placeholder
value: storyArgs.value
variant: storyArgs.variant
type: storyArgs.type
size: storyArgs.size
status: storyArgs.status
required: storyArgs.required
disabled: storyArgs.disabled
readonly: storyArgs.readonly
clearable: storyArgs.clearable
borderless: storyArgs.borderless
message: storyArgs.message
onValueChanged: if (storyArgs.value !== value) storyArgs.value = value
}
}variant · value 설정을 적용한 비밀번호 입력 예제입니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string label: "이름"
property string placeholder: "이름을 입력하세요"
property string value: "example-password"
property string variant: "password"
property string type: "text"
property string size: "medium"
property string status: "default"
property bool required: false
property bool disabled: false
property bool readonly: false
property bool clearable: false
property bool borderless: false
property string message: ""
}
SyInput {
label: storyArgs.label
placeholder: storyArgs.placeholder
value: storyArgs.value
variant: storyArgs.variant
type: storyArgs.type
size: storyArgs.size
status: storyArgs.status
required: storyArgs.required
disabled: storyArgs.disabled
readonly: storyArgs.readonly
clearable: storyArgs.clearable
borderless: storyArgs.borderless
message: storyArgs.message
onValueChanged: if (storyArgs.value !== value) storyArgs.value = value
}
}검증 전·오류 표시·초기화 결과를 비교합니다.
import QtQuick
import Syidax.Core
Column {
width: 440; spacing: 12
SyInput {
id: field; width: parent.width; name: "selection"; required: true
label: "필수 입력"; placeholder: "name@example.com"; type: "email"
error: "계속하려면 이 항목을 입력하세요."
}
Row {
spacing: 8
SyButton { id: check; text: "검증"; onClicked: field.reportValidity() }
SyButton { id: reset; text: "초기화"; onClicked: field.reset() }
}
Text { text: "상태: " + (field.invalid ? "오류" : "입력 준비"); color: Theme.semantic.textDefault }
}업무 규칙에 맞는 오류를 표시하고 초기화합니다.
import QtQuick
import Syidax.Core
Column {
width: 440; spacing: 12
SyInput {
id: field; width: parent.width; name: "selection"; required: true
label: "필수 입력"; placeholder: "name@example.com"; type: "email"
value: "hello@example.com"
error: "현재 사용할 수 없는 선택입니다. 다른 값을 선택하세요."
}
Row {
spacing: 8
SyButton { id: check; text: "오류 표시"; onClicked: field.setCustomError() }
SyButton { id: reset; text: "초기화"; onClicked: field.reset() }
}
Text { text: "상태: " + (field.invalid ? "오류" : "입력 준비"); color: Theme.semantic.textDefault }
}항목을 가리키거나 선택하면 QML 예제와 복사 버튼이 나타납니다.
| 항목 | 동작 / 조건 |
|---|---|
공통 필드 속성(name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready)은 Form 페이지에 설명되어 있습니다. | |
공통 필드 속성(name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready)은 Form 페이지에 설명되어 있습니다. |
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| string | "" | 텍스트. 키를 누를 때마다, 그리고 대입할 때 바뀝니다. 문자열이 아닌 값은 변환됩니다. | |
| string | "" | 값이 비어 있는 동안 표시. 플레이스홀더가 빈 search variant는 "Search"를 보입니다. | |
| string | "" | 상자 위의 제목. required이면 *가 붙습니다. | |
| string | "" | 상자 아래 도움말 줄. 오류가 보이는 동안 숨김. | |
| string | "" | 무효인 동안 기본 문구 대신 쓸 직접 작성한 오류 문구. | |
| string | "" | 소속 SyForm의 values()에서의 키. | |
| string | "text" | text · password(글자 숨김, 눈 토글) · search(글리프, "Search" 플레이스홀더). | |
| string | "text" | text · email · url · tel · number · password · search. text가 아니면 숨김·키보드 힌트·형식 검사에서 variant를 덮어씁니다. | |
| string | "medium" | small 24 · medium 32 · large 40 px 높이, 글자 12 · 14 · 16 px. | |
| string | "default" | default · warning · error · success — 검증과 무관한 색조. 무효 색조 뒤로 숨겨집니다. | |
| bool | false | 빈 값 → valueMissing. * 표시를 더합니다. | |
| bool | false | 반응 없음, 항상 유효, 제출되지 않음. | |
| bool | false | 선택은 되지만 편집은 안 됨. 항상 유효하며 제출됩니다. | |
| bool | false | 값이 있고 포커스 중일 때 ×를 보입니다. 누르면 값을 비우고 clear()를 발생시킵니다. | |
| bool | false | 상자가 포커스되거나 무효가 되기 전까지 테두리 없음. | |
| int | -1 | 비어 있지 않은 값의 최소 길이(tooShort). -1 = 없음. | |
| int | -1 | 최대 길이. 타이핑이 거기서 멈추고, 코드로 넣은 더 긴 값은 tooLong. -1 = 없음. | |
| bool | false | 필드가 만들어지자마자 상자에 포커스. | |
| Item 목록 | — | 상자 안, 텍스트 앞의 아이템. | |
| Item 목록 | — | 텍스트 뒤, 내장 아이콘 다음의 아이템. | |
| bool | false | 비밀번호 필드가 글자를 보이는지 여부. 눈 아이콘이 뒤집습니다. | |
| bool(읽기 전용) | — | 텍스트 상자가 활성 포커스를 가짐. | |
| bool(읽기 전용) | — | 포인터가 상자 위에 있음(disabled에서는 false). | |
| string(읽기 전용) | — | 문자열로서의 value. | |
| 읽기 전용 | — | 실제로 적용되는 종류(type이 "text"가 아니면 그것, 아니면 variant)와 그것이 password인지 여부. | |
| 읽기 전용 | — | 실제로 적용되는 종류(type이 "text"가 아니면 그것, 아니면 variant)와 그것이 password인지 여부. | |
| 읽기 전용 | — | × / 테두리가 보이는지, 그리고 현재 색조(enabled · hover · focus · warning · error · success · invalid · readonly · disabled). | |
| 읽기 전용 | — | × / 테두리가 보이는지, 그리고 현재 색조(enabled · hover · focus · warning · error · success · invalid · readonly · disabled). | |
| 읽기 전용 | — | × / 테두리가 보이는지, 그리고 현재 색조(enabled · hover · focus · warning · error · success · invalid · readonly · disabled). |
| 메서드 | 설명 |
|---|---|
텍스트 상자에 포커스(focused 발생, 링 표시). | |
포커스 해제(blured 발생, touched 설정). | |
상태가 ""이면 true. 화면 변화 없음. | |
| 같은 결과를 돌려주고 필드를 보고됨으로 표시해 이제부터 오류 줄이 보이게 합니다. | |
상태 "custom"과 touched — 오류(error 또는 "Invalid by custom")가 즉시 보입니다. 인자 없음. | |
| custom 상태 해제. 일반 검사가 다시 적용됩니다. | |
"" · valueMissing · tooShort · tooLong · typeMismatch · custom. | |
| 필드가 만들어질 때의 값으로. touched·보고·custom 플래그를 지웁니다. |
| 시그널 | 인자 | 발생 시점 |
|---|---|---|
detail: { value: string, isValid: bool, status: string } | 로딩 뒤 value가 바뀜 — 키 입력마다, ×, 코드의 대입. 초기값에는 발생하지 않음. | |
| 같음 | 상자가 활성 포커스를 얻음. | |
| 같음 | 상자가 포커스를 잃음. 먼저 touched가 설정되므로 오류 줄이 함께 나타날 수 있음. | |
| — | ×를 누른 뒤. value는 이미 ""이고 그에 대한 changed는 발생한 뒤. 코드가 값을 비울 때는 발생하지 않음. |
| 항목 | 동작 / 조건 |
|---|---|
| 텍스트. 키를 누를 때마다, 그리고 대입할 때 바뀝니다. 문자열이 아닌 값은 변환됩니다. | |
로딩 뒤 value가 바뀜 — 키 입력마다, ×, 코드의 대입. 초기값에는 발생하지 않음. | |
초기값은 아무것도 발생시키지 않습니다(ready는 필드 로딩이 끝날 때까지 false). | |
값이 비어 있는 동안 표시. 플레이스홀더가 빈 search variant는 "Search"를 보입니다. | |
text · password(글자 숨김, 눈 토글) · search(글리프, "Search" 플레이스홀더). | |
문자열로서의 value. | |
text · email · url · tel · number · password · search. text가 아니면 숨김·키보드 힌트·형식 검사에서 variant를 덮어씁니다. | |
상태 "custom"과 touched — 오류(error 또는 "Invalid by custom")가 즉시 보입니다. 인자 없음. | |
빈 값 → valueMissing. * 표시를 더합니다. | |
비어 있지 않은 값의 최소 길이(tooShort). -1 = 없음. | |
최대 길이. 타이핑이 거기서 멈추고, 코드로 넣은 더 긴 값은 tooLong. -1 = 없음. | |
valid는 상태를 따르고, invalid는 오류를 보여도 되는 때 — 블러 뒤(touched) 또는 reportValidity() 뒤(submitted) — 에만 true입니다. | |
valid는 상태를 따르고, invalid는 오류를 보여도 되는 때 — 블러 뒤(touched) 또는 reportValidity() 뒤(submitted) — 에만 true입니다. disabled > readonly > invalid > status(warning · error · success) > focus > hover > enabled — 처음 해당하는 것이 테두리·배경·글자·아이콘 색을 정합니다. | |
valid는 상태를 따르고, invalid는 오류를 보여도 되는 때 — 블러 뒤(touched) 또는 reportValidity() 뒤(submitted) — 에만 true입니다. 상자를 떠나면 blured가 발생하고 touched가 설정됩니다. ×(clearable)는 값이 있고 포커스 중일 때만 보이며, 누르면 값을 비우고 changed 다음 clear()를 발생시킨 뒤 상자에 포커스를 되돌립니다. | |
| 같은 결과를 돌려주고 필드를 보고됨으로 표시해 이제부터 오류 줄이 보이게 합니다. | |
valid는 상태를 따르고, invalid는 오류를 보여도 되는 때 — 블러 뒤(touched) 또는 reportValidity() 뒤(submitted) — 에만 true입니다. | |
| 무효인 동안 기본 문구 대신 쓸 직접 작성한 오류 문구. | |
| 상자 아래 도움말 줄. 오류가 보이는 동안 숨김. | |
| 반응 없음, 항상 유효, 제출되지 않음. | |
| 선택은 되지만 편집은 안 됨. 항상 유효하며 제출됩니다. | |
default · warning · error · success — 검증과 무관한 색조. 무효 색조 뒤로 숨겨집니다. | |
disabled > readonly > invalid > status(warning · error · success) > focus > hover > enabled — 처음 해당하는 것이 테두리·배경·글자·아이콘 색을 정합니다. | |
disabled > readonly > invalid > status(warning · error · success) > focus > hover > enabled — 처음 해당하는 것이 테두리·배경·글자·아이콘 색을 정합니다. | |
| 상자가 포커스되거나 무효가 되기 전까지 테두리 없음. | |
| 상자가 활성 포커스를 얻음. | |
상자가 포커스를 잃음. 먼저 touched가 설정되므로 오류 줄이 함께 나타날 수 있음. | |
값이 있고 포커스 중일 때 ×를 보입니다. 누르면 값을 비우고 clear()를 발생시킵니다. | |
×를 누른 뒤. value는 이미 ""이고 그에 대한 changed는 발생한 뒤. 코드가 값을 비울 때는 발생하지 않음. | |
| 비밀번호 필드가 글자를 보이는지 여부. 눈 아이콘이 뒤집습니다. | |
disabled는 포커스와 타이핑을 막고 SyForm.values()에서 필드를 건너뜁니다. | |
필드는 width를 정하지 않으면 240 px 너비이고, 상자·제목·메시지 줄이 그 너비를 따릅니다. | |
small 24 · medium 32 · large 40 px 높이, 글자 12 · 14 · 16 px. | |
| 상자 안, 텍스트 앞의 아이템. | |
| 텍스트 뒤, 내장 아이콘 다음의 아이템. | |
색은 Theme.input에서 오고 Theme.scheme을 따릅니다. 아이콘 색 전환은 Theme.reducedMotion에서 생략됩니다. |
| 항목 | 동작 / 조건 |
|---|---|
| 키보드: Tab과 Shift+Tab으로 필드에 진입하고 이동합니다. 숨김·비활성 필드는 건너뜁니다. 열린 선택기는 Escape로 닫을 수 있습니다. Textarea의 Tab은 들여쓰기 대신 포커스를 이동하며 Modal 안에서는 포커스 경계를 유지합니다. |