Slate 레이아웃 구성

레이아웃은 업무 기능을 이해하고 조작하기 쉽게 만드는 방향으로 구성합니다. 스타일 덮어쓰기가 많아지면 유지보수도 복잡해지므로 새로운 기능을 추가하는 사이에 배치와 스타일을 정리합니다.

Container와 정렬

Container 위젯으로 관련 위젯을 묶습니다. 위젯마다 DOM 요소가 추가되므로 불필요한 중첩은 브라우저 자원 사용과 초기 로드 및 응답성에 영향을 줍니다. 가능하면 위젯 수를 줄이고 Container를 3~4단계보다 깊게 중첩하지 않는 것을 권장합니다. 이 깊이는 강제 한도가 아닙니다.

일반적인 배치는 CSS position을 직접 조정하기보다 Slate의 정적 위치 도구나 Flex Container를 사용합니다. 특별한 배치가 필요한 경우는 별도로 다룹니다.

Ctrl, macOS에서는 Cmd를 누르고 여러 위젯을 선택하면 오른쪽 패널에서 정렬과 간격 분배 옵션을 사용할 수 있습니다. 자동 배치는 Flex Container에서 주축, 정렬과 줄 바꿈을 구성합니다.

상태에 따라 숨기기

hidden class

Additional Classes에 hidden을 조건부로 적용할 수 있습니다. 함수나 상태값으로 표시 여부를 정하는 간단한 방식입니다. 처음 로드할 때에는 의존 관계 계산 뒤에 class가 적용되므로 잠깐 보이는 현상이 생길 수 있으며 여러 위젯을 각각 관리하면 복잡해집니다.

빈 탭과 내용 탭

Tabbed Container에 빈 탭 하나와 표시할 위젯이 있는 탭을 만들고 selectedTabIndex로 전환할 수 있습니다. minimal을 Additional Classes에 넣고 다음 CSS로 배경과 경계를 숨깁니다.

.minimal sl-app-container {
  border: none;
  background: none;
}

이 패턴은 로드 때 잠깐 보이는 현상을 피하고 여러 위젯을 함께 전환하는 데 사용할 수 있습니다.

루트 요소의 공간까지 숨기기

Flex 배치에서 다른 형제 위젯이 빈 공간을 사용하게 하려면 위젯 루트에 display: none을 적용합니다. 루트 ID 형식은 widget-[widgetName]입니다.

예를 들어 w_sidebar의 자식이 w_myHTMLWidget이라면 다음 규칙을 Styles에 정의하고 부모의 Additional Classes에 hide-myHTMLWidget을 조건부로 적용합니다.

.hide-myHTMLWidget #widget-w_myHTMLWidget {
  display: none;
}

display: none은 렌더링과 배치에서 해당 요소와 자손을 제외합니다. DOM 노드를 삭제하는 코드는 아니며 데이터 접근 권한을 바꾸지도 않습니다.

탭과 실제 페이지

Tabbed Container의 탭을 여러 화면처럼 사용할 수 있지만 탭을 바꾸는 것만으로 의존 관계 계산 범위가 나뉘지는 않습니다. 다른 탭의 차트도 데이터를 만드는 질의가 실행될 수 있습니다.

큰 앱은 Lazy rendering enabled로 보이는 탭을 열 때 위젯을 렌더링하도록 설정합니다. 이는 렌더링 시점을 조정하며 질의 실행을 막으려면 별도의 조건부 질의를 구성합니다.

사용자가 직접 탭을 선택하지 않는 단계형 업무에는 Show tab titles를 끄고 selectedTabIndex를 상태값에 연결할 수 있습니다. 탭 인덱스는 0부터 시작합니다.

UI뿐 아니라 로직과 리소스 범위를 분리하려면 실제 Slate 페이지를 사용합니다. 반응형 배치는 Flex의 방향, 주축 정렬과 줄 바꿈을 기준으로 구성하고 필요한 경우 플랫폼 인스턴스의 Working with Flex Containers 튜토리얼을 함께 사용할 수 있습니다.

Keyboard shortcuts