Slate 입력과 선택 위젯

Control에는 Button, Checkbox, Dropdown, Input Box, Multiselect Box, Radio button, Segmented Control, Slider, Textarea와 Toggle이 있습니다.

열 가지 위젯의 공통 속성 disabled는 필수 Boolean이며 기본값은 false입니다. "{{w1.on}}"처럼 Boolean을 반환하는 참조로 사용자 조작을 막을 수 있습니다. 아래 표에서 상호작용값은 사용자의 조작으로 갱신되며, 별도 표시가 없는 속성은 편집자가 구성하는 설정값입니다.

Button

{"cssClasses":["pt-button","pt-intent-primary"],"disabled":false,"text":"Run"}

기본 구성은 위 값에 queryNames 빈 배열을 포함합니다.

{"cssClasses":["pt-button","pt-intent-primary"],"disabled":false,"queryNames":[],"text":"Run"}

클릭에 실행할 동작은 이벤트로 연결합니다.

Checkbox

ICheckboxHover는 displayValue(String), index(Number), value(Any)를 모두 가집니다. 각각 현재 표시값, 항목 인덱스와 원래 값이며 포인터 상호작용으로 바뀝니다.

Dropdown

동적 예제의 query1은 memberName과 memberId 배열을 반환하는 질의입니다. 검색어를 사용하는 질의를 연결합니다.

{
  "disabled":false,
  "displayValues":"{{query1.memberName}}",
  "searchText":"John",
  "selectedValue":"65849",
  "serverSearchEnabled":true,
  "values":"{{query1.memberId}}"
}

정적 선택 예와 기본 구성은 다음과 같습니다.

{
  "disabled":false,
  "searchText":"",
  "selectedValue":"giraffe",
  "serverSearchEnabled":false,
  "values":["giraffe","rhinoceros","elephant"]
}

{"disabled":false,"searchText":"","selectedValue":null,"serverSearchEnabled":false,"values":[]}

Input Box

{"disabled":false,"placeholder":"Choose an animal...","queryNames":["query1"],"text":""}

clear 액션은 입력값을 지웁니다. 기본값은 다음과 같습니다.

{"disabled":false,"placeholder":"placeholder goes here","text":""}

Multiselect Box

동적 질의 연결 예입니다.

{
  "disabled":false,
  "displayValues":"{{query1.memberName}}",
  "hasValues":false,
  "searchText":"John",
  "selectedDisplayValues":[],
  "selectedValues":[],
  "serverSearchEnabled":true,
  "values":"{{query1.memberId}}"
}

정적 항목 두 개를 선택한 상태와 기본 구성은 다음과 같습니다.

{
  "disabled":false,
  "hasValues":true,
  "selectedDisplayValues":["giraffe","rhinoceros"],
  "selectedValues":["giraffe","rhinoceros"],
  "serverSearchEnabled":false,
  "values":["giraffe","rhinoceros","elephant"]
}

{"disabled":false,"hasValues":false,"selectedDisplayValues":[],"selectedValues":[],"serverSearchEnabled":false,"values":[]}

Radio button

IRadioHover는 필수 displayValue(String), index(Number), value(Any)를 가지며 현재 가리키는 항목을 나타냅니다.

Segmented Control

ISegmentedControlHover의 필수 필드는 displayValue(String), index(Number), value(Any)입니다. index는 왼쪽에서 오른쪽으로 센 segment 위치입니다.

Slider

query1.maxValue가 숫자 하나를 반환하는 범위 예입니다.

{
  "disabled":false,
  "from":25,
  "groupingDelimiter":" ",
  "groupingEnabled":true,
  "max":"{{query1.maxValue}}",
  "min":1,
  "prefix":"$",
  "rangeEnabled":true,
  "to":50
}

기본 구성은 다음과 같습니다.

{"disabled":false,"from":25,"groupingEnabled":false,"max":100,"min":0,"rangeEnabled":false}

Textarea

Textarea는 마지막 입력 후 0.5초 동안 기다렸다가 값을 반영합니다. 이 위젯을 마지막으로 작성한 뒤 0.5초 안에 쓰기 질의를 제출하면 텍스트 끝부분이 빠질 수 있습니다. 제출 전 값 반영 시간을 확보하는 방법과 debounce가 없는 Input Box 대안은 빠른 제출 시 텍스트 누락에 설명합니다.

{
  "delimiter":";",
  "disabled":false,
  "hasValues":true,
  "placeholder":"Choose an animal...",
  "text":"giraffe; rhinoceros; elephant",
  "values":["giraffe","rhinoceros","elephant"]
}

{"delimiter":";","disabled":false,"hasValues":false,"text":"","values":[]}

Toggle

날짜와 시각 입력은 Time 위젯, 입력을 표시할 텍스트와 선택 카드는 Text 위젯에 설명합니다. 객체 카드, 리소스 선택과 액션 폼은 Platform 위젯에서 구성합니다.