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.Datepicker
| 타입 | 정의 / 역할 |
|---|---|
| 일·월·년·10년 단위로 탐색하는 날짜 선택 격자입니다. | |
| 시·분·초 목록을 스크롤해 시간을 선택하고 확정합니다. | |
| 날짜와 시간 선택을 묶어 하나의 확인 버튼으로 확정합니다. | |
| 두 달력에서 기간의 시작일과 종료일을 선택합니다. | |
| variant에 따라 날짜·날짜와 시간·기간·시간 선택 화면을 표시하는 인라인 달력입니다. | |
| 날짜·시간·기간을 입력하고 달력을 여는 폼 필드입니다. |
미리보기는 Qt 실행 화면의 이미지입니다. 아래 버튼으로 결과를 전환하세요.
SyDatepicker는 폼 필드입니다: 달력 글리프가 있는 텍스트 상자이며, 아래로 variant에 맞는 달력을 엽니다 — 날짜(date), OK로 확정하는 날짜와 시각(datetime), 두 상자의 시작 → 끝 쌍(range), 시각만(time).
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string variant: "date"
property string mode: "day"
property string format: "yyyy-MM-dd hh:mm:ss"
property string placeholder: ""
property bool mondayStart: false
property bool hideWeekend: false
property bool disabled: false
property bool readonly: false
property bool required: false
}
SyDatepicker { id: exampleControl1;
label: "생일"
variant: storyArgs.variant
mode: storyArgs.mode
format: storyArgs.format
placeholder: storyArgs.placeholder
mondayStart: storyArgs.mondayStart
hideWeekend: storyArgs.hideWeekend
disabled: storyArgs.disabled
readonly: storyArgs.readonly
required: storyArgs.required
}
}variant는 상자가 여는 달력과 필드가 담는 것을 정합니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
Column {
spacing: 12
SyDatepicker { id: exampleControl1; label: "생일"; year: "2026"; month: "10"; day: "9" }
SyDatepicker { label: "약속"; variant: "datetime"; year: "2026"; month: "10"; day: "9"; hour: "14"; minute: "30" }
SyDatepicker { label: "기간"; variant: "range" }
SyDatepicker { label: "알람"; variant: "time"; hour: "7"; minute: "0" }
}
}mode는 사용자가 고르는 단위입니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
Column {
spacing: 12
SyDatepicker { id: exampleControl1; mode: "day"; year: "2026"; month: "10"; day: "9" }
SyDatepicker { mode: "month"; format: "yyyy-MM"; year: "2026"; month: "10"; day: "1" }
SyDatepicker { mode: "year"; format: "yyyy"; year: "2026"; month: "1"; day: "1" }
}
}format은 상자의 글자 모양과 입력을 해석하는 기준을 정합니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string format: "dd/MM/yyyy"
}
SyDatepicker { id: exampleControl1; format: storyArgs.format; year: "2026"; month: "10"; day: "9" }
}SyCalendar는 필드가 여는 면이며 단독으로, 인라인으로 쓸 수 있습니다.
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
property QtObject settings: QtObject {
id: storyArgs
property string variant: "date"
property string dateNames: "Su,Mo,Tu,We,Th,Fr,Sa"
property bool mondayStart: false
property bool hideWeekend: false
}
Column {
spacing: 12
Rectangle {
width: calendar.width + 2
height: calendar.height + 2
color: Theme.semantic.backgroundDefault
border.width: 1
border.color: Theme.semantic.borderSubtle
radius: Foundation.borderRadiusMedium
SyCalendar {
id: calendar
x: 1
y: 1
variant: storyArgs.variant
datetime: ({ year: 2026, month: 10, day: 9, hour: 9, minute: 0, second: 0 })
dateNames: storyArgs.dateNames
mondayStart: storyArgs.mondayStart
hideWeekend: storyArgs.hideWeekend
onSelected: (detail) => output.log(JSON.stringify(detail))
}
}
EventLog { id: output }
}
}disabled는 비활성 톤으로 그립니다.
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
SyDatepicker { id: featureTarget0; visible: true; year: "2026"; month: "10"; day: "9"; disabled: true }
SyDatepicker { id: featureTarget1; visible: true; year: "2026"; month: "10"; day: "9"; readonly: true }
SyDatepicker { visible: true; id: due; label: "마감일"; required: true }
SyButton { visible: true; text: "due.reportValidity()"; variant: "secondary"; size: "small"; onClicked: due.reportValidity() }
}
}changed(detail)는 글자가 적용될 때마다 글자를 전달합니다: 달력 선택, Enter나 상자를 떠나며 확정한 입력, 지우기(× 또는 비운 상자, value: "").
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
SyDatepicker { id: exampleControl1;
label: "생일"
onChanged: (detail) => { if (true) { output.log(("changed: %1").arg(detail.value)) } }
onSelected: (detail) => { if (true) { output.log(("selected: %1").arg(detail.year + "-" + detail.month + "-" + detail.day)) } }
}
SyDatepicker {
label: "기간"; variant: "range"
onChanged: (detail) => { if (true) { output.log(("changed (%1): %2").arg(detail.mode).arg(detail.value)) } }
}
EventLog { id: output }
}
}openCalendar()는 상자 아래에 달력을 열고(disabled, readonly, 이미 열림이면 무시), closeCalendar()는 닫습니다.
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: 560; height: 420
SyDatepicker {
x: 24; y: 24
id: start; label: "시작일"; required: true }
}
Flow {
objectName: "exampleCommands"
width: 560
spacing: 8
SyButton { id: exampleControl1; visible: true; text: "start.openCalendar()"; variant: "secondary"; size: "small"; onClicked: start.openCalendar() }
SyButton { id: exampleControl2; visible: true; text: "start.closeCalendar()"; variant: "secondary"; size: "small"; onClicked: start.closeCalendar() }
SyButton { id: exampleControl3; visible: true; text: "start.setFocus()"; variant: "secondary"; size: "small"; onClicked: start.setFocus() }
SyButton { id: exampleControl4; visible: true; text: "start.checkValidity()"; variant: "secondary"; size: "small"; onClicked: output.log("checkValidity() → " + start.checkValidity()) }
SyButton { id: exampleControl5; visible: true; text: "start.reportValidity()"; variant: "secondary"; size: "small"; onClicked: output.log("reportValidity() → " + start.reportValidity()) }
SyButton { id: exampleControl6; visible: true; text: "start.getStatus()"; variant: "secondary"; size: "small"; onClicked: output.log("getStatus() → " + JSON.stringify(start.getStatus())) }
}
Text {
text: "start.value === " + JSON.stringify(start.value)
font.family: Theme.monoFontFamily
font.pixelSize: 12
color: Theme.semantic.textSubtle
}
EventLog { id: output }
}
}mode 설정을 적용한 월 선택 예제입니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string variant: "date"
property string mode: "month"
property string format: "yyyy-MM-dd hh:mm:ss"
property string placeholder: ""
property bool mondayStart: false
property bool hideWeekend: false
property bool disabled: false
property bool readonly: false
property bool required: false
}
SyDatepicker { id: exampleControl1;
label: "생일"
variant: storyArgs.variant
mode: storyArgs.mode
format: storyArgs.format
placeholder: storyArgs.placeholder
mondayStart: storyArgs.mondayStart
hideWeekend: storyArgs.hideWeekend
disabled: storyArgs.disabled
readonly: storyArgs.readonly
required: storyArgs.required
}
}mode 설정을 적용한 연도 선택 예제입니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string variant: "date"
property string mode: "year"
property string format: "yyyy-MM-dd hh:mm:ss"
property string placeholder: ""
property bool mondayStart: false
property bool hideWeekend: false
property bool disabled: false
property bool readonly: false
property bool required: false
}
SyDatepicker { id: exampleControl1;
label: "생일"
variant: storyArgs.variant
mode: storyArgs.mode
format: storyArgs.format
placeholder: storyArgs.placeholder
mondayStart: storyArgs.mondayStart
hideWeekend: storyArgs.hideWeekend
disabled: storyArgs.disabled
readonly: storyArgs.readonly
required: storyArgs.required
}
}mondayStart · hideWeekend 설정을 적용한 평일 달력 예제입니다.
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
property QtObject settings: QtObject {
id: storyArgs
property string variant: "date"
property string dateNames: "Su,Mo,Tu,We,Th,Fr,Sa"
property bool mondayStart: true
property bool hideWeekend: true
}
Column {
spacing: 12
Rectangle {
width: calendar.width + 2
height: calendar.height + 2
color: Theme.semantic.backgroundDefault
border.width: 1
border.color: Theme.semantic.borderSubtle
radius: Foundation.borderRadiusMedium
SyCalendar {
id: calendar
x: 1
y: 1
variant: storyArgs.variant
datetime: ({ year: 2026, month: 10, day: 9, hour: 9, minute: 0, second: 0 })
dateNames: storyArgs.dateNames
mondayStart: storyArgs.mondayStart
hideWeekend: storyArgs.hideWeekend
onSelected: (detail) => output.log(JSON.stringify(detail))
}
}
EventLog { id: output }
}
}variant 설정을 적용한 기간 선택 예제입니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string variant: "range"
property string mode: "day"
property string format: "yyyy-MM-dd hh:mm:ss"
property string placeholder: ""
property bool mondayStart: false
property bool hideWeekend: false
property bool disabled: false
property bool readonly: false
property bool required: false
}
SyDatepicker { id: exampleControl1;
label: "생일"
variant: storyArgs.variant
mode: storyArgs.mode
format: storyArgs.format
placeholder: storyArgs.placeholder
mondayStart: storyArgs.mondayStart
hideWeekend: storyArgs.hideWeekend
disabled: storyArgs.disabled
readonly: storyArgs.readonly
required: storyArgs.required
}
}variant 설정을 적용한 시간 선택 예제입니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string variant: "time"
property string mode: "day"
property string format: "yyyy-MM-dd hh:mm:ss"
property string placeholder: ""
property bool mondayStart: false
property bool hideWeekend: false
property bool disabled: false
property bool readonly: false
property bool required: false
}
SyDatepicker { id: exampleControl1;
label: "생일"
variant: storyArgs.variant
mode: storyArgs.mode
format: storyArgs.format
placeholder: storyArgs.placeholder
mondayStart: storyArgs.mondayStart
hideWeekend: storyArgs.hideWeekend
disabled: storyArgs.disabled
readonly: storyArgs.readonly
required: storyArgs.required
}
}format · variant 설정을 적용한 날짜 표시 형식 예제입니다.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string variant: "datetime"
property string mode: "day"
property string format: "dd/MM/yyyy hh:mm"
property string placeholder: ""
property bool mondayStart: false
property bool hideWeekend: false
property bool disabled: false
property bool readonly: false
property bool required: false
}
SyDatepicker { id: exampleControl1;
label: "생일"
variant: storyArgs.variant
mode: storyArgs.mode
format: storyArgs.format
placeholder: storyArgs.placeholder
mondayStart: storyArgs.mondayStart
hideWeekend: storyArgs.hideWeekend
disabled: storyArgs.disabled
readonly: storyArgs.readonly
required: storyArgs.required
}
}검증 전·오류 표시·초기화 결과를 비교합니다.
import QtQuick
import Syidax.Core
Column {
width: 440; spacing: 12
SyDatepicker {
id: field; width: parent.width; name: "selection"; required: true
label: "필수 입력"
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
SyDatepicker {
id: field; width: parent.width; name: "selection"; required: true
label: "필수 입력"
datetime: ({year: 2026, month: 10, day: 15})
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 예제와 복사 버튼이 나타납니다.
SyDatepicker| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| string | "date" | date · datetime · range · time — 면과 값의 모양. | |
| string | "day" | day · month · year — 달력에서 사용자가 고르는 단위. | |
| string | "yyyy-MM-dd hh:mm:ss" | 표시·해석 형식: yyyy yy MM dd hh mm ss. date는 시각 부분을 버리고 time은 시각 부분만 씁니다. | |
| string | "" | 생성 시 한 번 읽힘(year가 있을 때, time 변형은 hour). | |
| string | "" | 초기 날짜. 생성 시 한 번 읽힘(year가 있을 때, time 변형은 hour). | |
| string | "" | 초기 날짜. 생성 시 한 번 읽힘(year가 있을 때, time 변형은 hour). | |
| string | "" | 생성 시 한 번 읽힘(year가 있을 때, time 변형은 hour). | |
| string | "" | 초기 날짜. 생성 시 한 번 읽힘(year가 있을 때, time 변형은 hour). | |
| string | "" | 초기 날짜. 생성 시 한 번 읽힘(year가 있을 때, time 변형은 hour). | |
| object | null | 선택의 { year, month, day, hour, minute, second }(단일 변형). 읽기용이며 applyDate()로 설정합니다. | |
| object | null | 범위 양 끝의 { year, month, day }. applyRange()로 설정합니다. | |
| object | null | 범위 양 끝의 { year, month, day }. applyRange()로 설정합니다. | |
string 또는 [start, end](읽기 전용 바인딩) | — | format대로 보이는 글자. 폼이 제출하는 값. | |
| string | "" | 상자의 글자(endText는 range만). | |
| string | "" | 상자의 글자(endText는 range만). | |
| string | "start" | 편집 중인 range 상자: start · end. range의 changed에 실리는 mode. | |
| string | "" | 형식에서 만든 플레이스홀더를 대체(range 상자는 쓰지 않음). | |
| string | "Su,Mo,Tu,We,Th,Fr,Sa" | 일요일부터 쉼표로 구분한 일곱 요일 이름. | |
| bool | false | 주가 월요일에 시작. | |
| bool | false | 토·일 없는 5열. | |
| bool | false | 읽기 가능, 입력·달력 없음. 항상 유효. | |
| bool(읽기 전용) | — | 달력 팝업이 열려 있는지. | |
| bool(읽기 전용) | — | variant === "range". | |
| bool(읽기 전용) | — | 상자에 포커스가 있거나 달력이 열림 | |
| bool(읽기 전용) | — | 포인터가 상자 위. | |
| string(읽기 전용) | — | 실제로 보이는 플레이스홀더. | |
| string | "" | 프레임의 제목, 폼 키, 도움말, 사용자 오류 문구. | |
| string | "" | 프레임의 제목, 폼 키, 도움말, 사용자 오류 문구. | |
| string | "" | 프레임의 제목, 폼 키, 도움말, 사용자 오류 문구. | |
| string | "" | 프레임의 제목, 폼 키, 도움말, 사용자 오류 문구. | |
| string | "medium" | small · medium · large — 상자 높이 24 / 32 / 40 px. | |
| bool | false | 비활성 톤과 반응 없음 | |
| bool | false | 날짜가 없으면 valueMissing. | |
| 읽기 전용 | — | 유효성: "" · valueMissing · custom. invalid는 touched 되거나 report 된 뒤. | |
| 읽기 전용 | — | invalid는 touched 되거나 report 된 뒤. | |
| 읽기 전용 | — | 유효성: "" · valueMissing · custom. invalid는 touched 되거나 report 된 뒤. | |
| real | 200(range는 300) | 앱이 너비를 정하지 않을 때의 너비. |
SyCalendar(필드가 여는 셸, 인라인 가능)| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| string | "date" | 불러올 면: date · datetime · range · time. | |
| string | "day" | day · month · year — 고를 단위(면에 전달). | |
| string | "yyyy-MM-dd hh:mm:ss" | 여기서는 시각 부분만 의미가 있습니다: 어떤 시각 칸이 보이는지. | |
| object | null | date · datetime · time에 보일 선택. date 면은 생성 시 한 번 그 달로 엽니다. | |
| object | null | 보일 범위. | |
| object | null | 보일 범위. | |
| string | "Su,Mo,…" | 그리드(면에 전달). | |
| bool | false | 그리드(면에 전달). | |
| bool | false | 그리드(면에 전달). |
SyDateCalendar(머리글이 있는 한 달 그리드)| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| object | null | 선택된 날짜(강조). 시각 부분은 selected에 복사됩니다. | |
| string | "day" | 그리드가 지금 보이는 것: day · month · year · decade. 제목 클릭이 올라가고 선택이 내려갑니다. | |
| string | "day" | 사용자가 고르는 가장 작은 단위: day · month · year. 그 단계의 선택이 selected를 발생시킵니다. | |
| int | 오늘 | 화면의 달. | |
| int | 오늘 | 화면의 달. | |
| string | "" | "start" / "end"가 범위 그리기(음영, entered)를 켬. 비면 단일. | |
| object | null | 음영을 위한 범위와 포인터 아래의 날. | |
| object | null | 음영을 위한 범위와 포인터 아래의 날. | |
| object | null | 음영을 위한 범위와 포인터 아래의 날. | |
| string | "Su,Mo,…" | 요일 이름(일요일 먼저), 월요일 시작, 5열. | |
| bool | false | 요일 이름(일요일 먼저), 월요일 시작, 5열. | |
| bool | false | 요일 이름(일요일 먼저), 월요일 시작, 5열. | |
| bool | true | Now 버튼이 있는 바닥글(day 모드, 단일). | |
| 읽기 전용 | — | 오늘의 구성 요소, 머리글 글자, 화면의 42칸, 요일 순서, 열 수, 32. | |
| 읽기 전용 | — | 오늘의 구성 요소, 머리글 글자, 화면의 42칸, 요일 순서, 열 수, 32. | |
| 읽기 전용 | — | 오늘의 구성 요소, 머리글 글자, 화면의 42칸, 요일 순서, 열 수, 32. | |
| 읽기 전용 | — | 오늘의 구성 요소, 머리글 글자, 화면의 42칸, 요일 순서, 열 수, 32. | |
| 읽기 전용 | — | 오늘의 구성 요소, 머리글 글자, 화면의 42칸, 요일 순서, 열 수, 32. | |
| 읽기 전용 | — | 오늘의 구성 요소, 머리글 글자, 화면의 42칸, 요일 순서, 열 수, 32. |
SyDateTimeCalendar(그리드 + 시각 칸 + OK)| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| object | null | 선택. 설정하면 그리드와 시각 칸이 움직입니다. | |
| string | "day" | SyDateCalendar와 같음. | |
| string | "day" | SyDateCalendar와 같음. | |
| string | "yyyy-MM-dd hh:mm:ss" | 공백 뒤 부분이 시각 칸을 정합니다. | |
| string | "Su,Mo,…" | 그리드. | |
| bool | false | 그리드. | |
| bool | false | 그리드. | |
| object | datetime | 지금까지 고른 날짜 부분(시각은 칸에서 옴). |
SyRangeCalendar(시작과 끝을 위한 달 그리드 둘)| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| object | null | 범위: { year, month, day } 또는 null. | |
| object | null | 범위: { year, month, day } 또는 null. | |
| string | "start" | 다음 클릭이 정할 끝: start · end(선택마다 번갈아 바뀜). | |
| string | "day" | 그리드의 모드. | |
| string | "Su,Mo,…" | 그리드. | |
| bool | false | 그리드. | |
| bool | false | 그리드. | |
| object | null | 끝이 아직 없는 동안 포인터 아래의 날. | |
| int | 시작의 달, 없으면 오늘 | 왼쪽 그리드의 달. 오른쪽은 다음 달(rightMonth). | |
| int | 시작의 달, 없으면 오늘 | 왼쪽 그리드의 달. 오른쪽은 다음 달(rightMonth). |
SyTimepicker(시각 칸)| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| int | 0 | 시각. 선택마다 하나씩 기록됩니다. | |
| int | 0 | 시각. 선택마다 하나씩 기록됩니다. | |
| int | 0 | 시각. 선택마다 하나씩 기록됩니다. | |
| string | "hh:mm:ss" | 어떤 칸이 보이는지: hh · mm · ss 토큰. | |
| string | ":" | 머리글 글자에서 부분 사이. | |
| bool | false | OK 버튼 없음(부모가 대신 확정). | |
| 읽기 전용 | — | 머리글 글자와 어떤 칸이 있는지. | |
| 읽기 전용 | — | 머리글 글자와 어떤 칸이 있는지. | |
| 읽기 전용 | — | 머리글 글자와 어떤 칸이 있는지. | |
| 읽기 전용 | — | 머리글 글자와 어떤 칸이 있는지. | |
| 읽기 전용 | — | 머리글 글자와 어떤 칸이 있는지. |
SyDatepicker| 메서드 | 설명 |
|---|---|
| 달력 팝업을 엽니다. disabled, readonly, 이미 열림이면 무시됩니다. | |
| 닫습니다. | |
| 시작 상자에 포커스(달력이 열림) | |
| 두 상자의 포커스를 거두고 달력을 닫음. | |
보조 함수: { year, month, day, hour, minute, second }로 datetime과 글자를 changed 없이 설정합니다. | |
보조 함수: 범위 양 끝({ year, month, day } 또는 null)과 글자를 changed 없이 설정합니다. | |
날짜(range는 양 끝)를 지우고 필드를 touched로 표시하며 ""로 changed를 발생시킵니다 — 지우기 ×가 하는 일. | |
상태가 ""인지 조용히 | |
| 같지만 오류 줄을 드러냄. | |
"", "valueMissing" 또는 "custom". | |
custom 상태를 강제 · 해제. | |
custom 상태를 강제 · 해제. | |
날짜를 지우고(changed 발생) touched / submitted / custom 플래그를 지웁니다. |
| 항목 | 동작 / 조건 |
|---|---|
previous() / next()(day 모드에서 한 달, 위에서는 한 해·십년·백년), previousFar() / nextFar()(day 모드에서 한 해), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up()(한 단계 위), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next()(day 모드에서 한 달, 위에서는 한 해·십년·백년), previousFar() / nextFar()(day 모드에서 한 해), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up()(한 단계 위), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next()(day 모드에서 한 달, 위에서는 한 해·십년·백년), previousFar() / nextFar()(day 모드에서 한 해), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up()(한 단계 위), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next()(day 모드에서 한 달, 위에서는 한 해·십년·백년), previousFar() / nextFar()(day 모드에서 한 해), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up()(한 단계 위), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next()(day 모드에서 한 달, 위에서는 한 해·십년·백년), previousFar() / nextFar()(day 모드에서 한 해), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up()(한 단계 위), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next()(day 모드에서 한 달, 위에서는 한 해·십년·백년), previousFar() / nextFar()(day 모드에서 한 해), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up()(한 단계 위), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next()(day 모드에서 한 달, 위에서는 한 해·십년·백년), previousFar() / nextFar()(day 모드에서 한 해), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up()(한 단계 위), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next()(day 모드에서 한 달, 위에서는 한 해·십년·백년), previousFar() / nextFar()(day 모드에서 한 해), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up()(한 단계 위), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next()(day 모드에서 한 달, 위에서는 한 해·십년·백년), previousFar() / nextFar()(day 모드에서 한 해), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up()(한 단계 위), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next()(day 모드에서 한 달, 위에서는 한 해·십년·백년), previousFar() / nextFar()(day 모드에서 한 해), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up()(한 단계 위), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next()(day 모드에서 한 달, 위에서는 한 해·십년·백년), previousFar() / nextFar()(day 모드에서 한 해), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up()(한 단계 위), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next()(day 모드에서 한 달, 위에서는 한 해·십년·백년), previousFar() / nextFar()(day 모드에서 한 해), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up()(한 단계 위), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next()(day 모드에서 한 달, 위에서는 한 해·십년·백년), previousFar() / nextFar()(day 모드에서 한 해), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up()(한 단계 위), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
previous() / next()(day 모드에서 한 달, 위에서는 한 해·십년·백년), previousFar() / nextFar()(day 모드에서 한 해), goMonths(delta), goYears(delta), showMonth(year, month), setMode(m), up()(한 단계 위), pickDay(cell), pickMonth(month), pickYear(year), pickDecade(start), pickToday(). | |
current()는 현재 구성 요소를 돌려주고, confirm()은 closable: true로 selected를 발생시킵니다(OK). | |
current()는 현재 구성 요소를 돌려주고, confirm()은 closable: true로 selected를 발생시킵니다(OK). | |
pick({ year, month, day })가 클릭을 적용하고, entered(day)가 호버 음영을 갱신합니다. | |
pick({ year, month, day })가 클릭을 적용하고, entered(day)가 호버 음영을 갱신합니다. | |
pick(part, value)가 "hour" / "minute" / "second"를 설정하고 changed + selected를 발생시키며, confirm()은 closable: true로 selected를 발생시키고, scrollToSelection()은 칸을 현재 시각으로 스크롤합니다. | |
pick(part, value)가 "hour" / "minute" / "second"를 설정하고 changed + selected를 발생시키며, confirm()은 closable: true로 selected를 발생시키고, scrollToSelection()은 칸을 현재 시각으로 스크롤합니다. | |
pick(part, value)가 "hour" / "minute" / "second"를 설정하고 changed + selected를 발생시키며, confirm()은 closable: true로 selected를 발생시키고, scrollToSelection()은 칸을 현재 시각으로 스크롤합니다. |
SyDatepicker| 시그널 | 인자 | 시점 |
|---|---|---|
detail: { value } · range: { mode, value } | 글자가 적용됨: 달력 선택, Enter / 블러의 입력, 지우기(""). mode는 "start" 또는 "end". 초기 날짜와 거부된 글자에는 없음. | |
detail: { year, month, day, hour, minute, second [, closable] } · range: { rangestart, rangeend } | 달력이 고름(changed 다음). datetime / time의 OK에서 closable이 true. range 끝은 { year, month, day } 또는 null. | |
detail: { value, isValid, status } | 상자가 포커스를 얻음 / 잃음. 블러는 글자를 확정하고 필드를 touched로 표시합니다. | |
detail: { value, isValid, status } | 상자가 포커스를 얻음 / 잃음. 블러는 글자를 확정하고 필드를 touched로 표시합니다. |
| 항목 | 동작 / 조건 |
|---|---|
selected(detail)가 면의 detail을 전달하고, closed()는 면이 닫기를 요청할 때(날짜 선택, OK, 완성된 범위) 발생합니다. | |
selected(detail)가 면의 detail을 전달하고, closed()는 면이 닫기를 요청할 때(날짜 선택, OK, 완성된 범위) 발생합니다. | |
pickerMode 단계의 선택이나 Now에 selected({ year, month, day, hour, minute, second }), 화살표로 화면의 달이 바뀔 때 changed({ year, month }), range 모드에서 날짜에 호버하면 entered({ year, month, day }). | |
pickerMode 단계의 선택이나 Now에 selected({ year, month, day, hour, minute, second }), 화살표로 화면의 달이 바뀔 때 changed({ year, month }), range 모드에서 날짜에 호버하면 entered({ year, month, day }). | |
pickerMode 단계의 선택이나 Now에 selected({ year, month, day, hour, minute, second }), 화살표로 화면의 달이 바뀔 때 changed({ year, month }), range 모드에서 날짜에 호버하면 entered({ year, month, day }). | |
날짜나 시각 선택과 Now에 selected({ closable, year, month, day, hour, minute, second })(closable: false), OK에 closable: true. | |
선택마다 selected({ rangestart, rangeend }). | |
선택마다 changed({ hour, minute, second }), 선택마다 selected({ closable, hour, minute, second })(closable: false), OK에 closable: true. | |
선택마다 changed({ hour, minute, second }), 선택마다 selected({ closable, hour, minute, second })(closable: false), OK에 closable: true. |
| 항목 | 동작 / 조건 |
|---|---|
문자열로 줍니다: year, month, day, 그리고 시각 변형에서는 hour, minute, second. 필드가 만들어질 때 한 번만, 그리고 year가 있을 때만(time 변형은 hour가 있을 때) 읽힙니다. datetime은 { year, month, day, hour, minute, second }(숫자) 또는 null이고, range는 rangestart와 rangeend를 { year, month, day } 또는 null로 가집니다. | |
문자열로 줍니다: year, month, day, 그리고 시각 변형에서는 hour, minute, second. datetime은 { year, month, day, hour, minute, second }(숫자) 또는 null이고, range는 rangestart와 rangeend를 { year, month, day } 또는 null로 가집니다. | |
문자열로 줍니다: year, month, day, 그리고 시각 변형에서는 hour, minute, second. datetime은 { year, month, day, hour, minute, second }(숫자) 또는 null이고, range는 rangestart와 rangeend를 { year, month, day } 또는 null로 가집니다. | |
문자열로 줍니다: year, month, day, 그리고 시각 변형에서는 hour, minute, second. 필드가 만들어질 때 한 번만, 그리고 year가 있을 때만(time 변형은 hour가 있을 때) 읽힙니다. datetime은 { year, month, day, hour, minute, second }(숫자) 또는 null이고, range는 rangestart와 rangeend를 { year, month, day } 또는 null로 가집니다. | |
문자열로 줍니다: year, month, day, 그리고 시각 변형에서는 hour, minute, second. datetime은 { year, month, day, hour, minute, second }(숫자) 또는 null이고, range는 rangestart와 rangeend를 { year, month, day } 또는 null로 가집니다. | |
문자열로 줍니다: year, month, day, 그리고 시각 변형에서는 hour, minute, second. datetime은 { year, month, day, hour, minute, second }(숫자) 또는 null이고, range는 rangestart와 rangeend를 { year, month, day } 또는 null로 가집니다. | |
보조 함수: { year, month, day, hour, minute, second }로 datetime과 글자를 changed 없이 설정합니다. | |
보조 함수: 범위 양 끝({ year, month, day } 또는 null)과 글자를 changed 없이 설정합니다. | |
선택의 { year, month, day, hour, minute, second }(단일 변형). 읽기용이며 applyDate()로 설정합니다. | |
datetime은 { year, month, day, hour, minute, second }(숫자) 또는 null이고, range는 rangestart와 rangeend를 { year, month, day } 또는 null로 가집니다. | |
datetime은 { year, month, day, hour, minute, second }(숫자) 또는 null이고, range는 rangestart와 rangeend를 { year, month, day } 또는 null로 가집니다. | |
format대로 보이는 글자. 폼이 제출하는 값. | |
표시·해석 형식: yyyy yy MM dd hh mm ss. date는 시각 부분을 버리고 time은 시각 부분만 씁니다. | |
value는 보이는 글자 — format대로의 startText, range에서는 [startText, endText] — 이며 SyForm.values()가 제출하는 값입니다. | |
value는 보이는 글자 — format대로의 startText, range에서는 [startText, endText] — 이며 SyForm.values()가 제출하는 값입니다. | |
value는 보이는 글자 — format대로의 startText, range에서는 [startText, endText] — 이며 SyForm.values()가 제출하는 값입니다. | |
글자가 적용됨: 달력 선택, Enter / 블러의 입력, 지우기(""). mode는 "start" 또는 "end". 초기 날짜와 거부된 글자에는 없음. | |
| 달력 팝업을 엽니다. disabled, readonly, 이미 열림이면 무시됩니다. | |
| 닫습니다. | |
Escape, 바깥 누름, closeCalendar(), setBlur(), 그리고 면 자체의 닫기 요청 — date의 날짜 선택, datetime과 time의 OK, range의 완성된 쌍 — 이 닫습니다. | |
"start" / "end"가 범위 그리기(음영, entered)를 켬. 비면 단일. | |
| 달력 팝업이 열려 있는지. | |
달력이 고름(changed 다음). datetime / time의 OK에서 closable이 true. range 끝은 { year, month, day } 또는 null. | |
| 일요일부터 쉼표로 구분한 일곱 요일 이름. | |
| 주가 월요일에 시작. | |
| 토·일 없는 5열. | |
day · month · year — 달력에서 사용자가 고르는 단위. | |
| 형식에서 만든 플레이스홀더를 대체(range 상자는 쓰지 않음). | |
disabled: 비활성 톤, 포커스·입력·달력·지우기 × 없음. | |
| 읽기 가능, 입력·달력 없음. 항상 유효. | |
지우기 ×는 글자가 있고 필드가 반응 가능할 때 보이며, 전부(range는 양 끝) 비우고 ""로 changed를 발생시킵니다. | |
hasFocus는 상자에 포커스가 있거나 달력이 열린 동안 true입니다. | |
required인데 날짜가 없으면(range는 한쪽이라도 없으면) valueMissing, setCustomError()면 custom, disabled나 readonly면 항상 "". | |
required인데 날짜가 없으면(range는 한쪽이라도 없으면) valueMissing, setCustomError()면 custom, disabled나 readonly면 항상 "". | |
오류 줄은 상자를 떠난(touched) 뒤나 reportValidity() 뒤에 보입니다. | |
small · medium · large — 상자 높이 24 / 32 / 40 px. | |
상자는 size 높이(24 / 32 / 40 px)이고, 너비는 앱이 width를 정하지 않으면 preferredWidth — 200, range는 300 — 입니다. | |
| 앱이 너비를 정하지 않을 때의 너비. |
| 항목 | 동작 / 조건 |
|---|---|
| 키보드: Tab과 Shift+Tab으로 필드에 진입하고 이동합니다. 숨김·비활성 필드는 건너뜁니다. 열린 선택기는 Escape로 닫을 수 있습니다. Textarea의 Tab은 들여쓰기 대신 포커스를 이동하며 Modal 안에서는 포커스 경계를 유지합니다. |