Slate Container 위젯

Container는 Basic, Dialog, Flex, Repeating, Split horizontally, Split vertically와 Tabbed 구성을 제공합니다. 위젯을 묶고 배치하거나 대화상자와 탭을 만듭니다.

공통 속성

아래 표에서 별도 표시가 없는 속성은 편집자가 구성하는 설정값입니다. 내부 배열 tabContents의 관리 방식은 속성표 뒤의 편집 절차를 따릅니다.

속성	자료형	필수	역할과 변경 방식
flex	Boolean	예	자식 위젯의 자동 정렬과 공간 분배를 사용합니다. 직접 설정합니다.
flexOptions	IFlexOptions	아니요	자식의 정렬 옵션입니다. 직접 설정합니다.
lazyRenderingEnabled	Boolean	예	보이는 자식 위젯만 렌더링합니다. 직접 설정합니다.
selectedTabIndex	Number	예	현재 표시하는 탭의 0부터 시작하는 인덱스입니다. 직접 설정합니다.
tabContents	`{children: IWidgetModel[]}[]`	예	각 탭의 위젯을 담는 내부 배열입니다.
tabTitles	`ITabTitle[]`	예	각 탭의 제목입니다. 직접 설정합니다.
titlesEnabled	Boolean	예	클릭 가능한 탭 제목을 위에 표시합니다. 직접 설정합니다.
scrollingEnabled	Boolean	예	넘친 내용을 스크롤할 수 있게 합니다. 직접 설정합니다.
splitDirection	Number	예	Container를 나누는 방향입니다. 직접 설정합니다.
splitMovableInConsumerMode	Boolean	예	사용 모드에서 분할 크기를 조정할 수 있는지 정합니다.
splitPanel	Boolean	예	분할 Container 안의 패널인지 나타내는 내부 값이며 사용자 상호작용으로 갱신됩니다.
repeat	Number	아니요	내용을 반복할 횟수입니다. 직접 설정합니다.
repeating	Boolean	예	반복형 Container인지 정합니다.
previewRepeating	Boolean	아니요	반복형 Container의 미리보기 여부입니다.

ITabTitle의 필수 title은 String입니다.

IFlexOptions

속성	자료형	필수	역할과 기본값
justifyContent	String	예	주축의 배치입니다. 가로 Flex는 Left, 세로 Flex는 Top이 기본입니다.
flexDirection	String	예	주축 방향입니다. 기본값은 Horizontally입니다.
flexWrap	String	예	여러 줄로 넘겨 배치할지 정합니다. 기본 UI 상태는 선택하지 않음입니다.

위젯을 Container 안팎으로 끌어 현재 선택한 탭에 넣거나 뺍니다. tabContents는 Raw 탭에서 지원하는 편집 대상이 아니므로 직접 수정하거나 사용자 상호작용 값으로 갱신하지 않습니다.

탭 구성 예

다음은 기본 단일 탭 구성의 구조이며 제목을 숨깁니다. children은 편집기의 드래그 배치로 관리합니다.

{
  "selectedTabIndex":0,
  "tabContents":[{"children":[]}],
  "tabTitles":[{"title":"Title"}],
  "titlesEnabled":false
}

탭 세 개의 제목을 보이고 두 번째 탭을 선택한 구성은 다음과 같습니다.

{
  "selectedTabIndex":1,
  "tabContents":[{"children":[]},{"children":[]},{"children":[]}],
  "tabTitles":[{"title":"Title 1"},{"title":"Title 2"},{"title":"Title 3"}],
  "titlesEnabled":true
}

다른 위젯이 선택값을 정한다면 위의 탭 구성을 유지하고 selectedTabIndex를 "{{w8.selectedValue}}", titlesEnabled를 false로 설정합니다. 이 경우 w8.selectedValue는 0, 1 또는 2의 숫자를 제공해야 합니다.

Dialog

속성	자료형	필수	역할
title	String	아니요	대화상자 제목입니다.
canEscapeKeyClose	Boolean	예	Escape 키로 닫을 수 있습니다.
canOutsideClickClose	Boolean	예	바깥 overlay를 클릭하여 닫을 수 있습니다.

open과 close 액션으로 열고 닫습니다. 완전히 열린 뒤 opened, 완전히 닫힌 뒤 closed 이벤트가 발생합니다. Slate 이벤트에 필요한 동작을 연결합니다.

Container와 canvas 스타일

Container의 배경과 좌우 테두리 설정 예입니다.

sl-app-container {
  background: lightgrey;
  border-left: none;
  border-right: none;
}

Container 배경과 테두리를 조정한 화면

앱 canvas 자체의 배경은 Local stylesheet에서 div.canvas-body와 background-color를 사용합니다. Container의 sl-app-container 선택기와 대상이 다릅니다.

canvas, Container와 차트에 서로 다른 색상을 지정한 화면

탭 스타일

sl-app-container table.container-titles tbody tr td.tab-title {
  color: #2786c1;
  text-transform: uppercase;
  border-left: none;
  border-right: none;
}

sl-app-container table.container-titles tbody tr td.tab-title:hover {
  text-decoration: none;
}

sl-app-container table.container-titles tbody tr td.tab-title.selected {
  color: #394B59;
  border-bottom: 4px solid #2786C1;
}

sl-app-container table.container-titles tbody tr td.tab-title:last-child {
  border-left: none;
  border-right: none;
}

위 규칙은 순서대로 일반 탭, hover, 선택된 탭과 마지막 탭을 다룹니다.

탭 제목의 일반, 선택 및 경계 스타일을 적용한 화면

복잡한 중첩, 숨김과 반응형 배치는 레이아웃 구성을 따릅니다.

Keyboard shortcuts