컨테이너
여러개의 컴포넌트를 하나로 묶어서 관리할 수 있습니다.
프로퍼티
프로퍼티 | 타입 | 설명 |
---|---|---|
이름 (name) | string | 컨테이너 컴포넌트의 고유 이름 |
헤더 표시 (isHeaderVisible) | boolean | 컨테이너 헤더 표시 여부 |
푸터 표시 (isFooterVisible) | boolean | 컨테이너 푸터 표시 여부 |
고정 높이 설정 (isHeightFixed) | boolean | 컨테이너 내용 고정 높이 설정 여부 |
높이 (contentHeight) | string | 컨테이너 내용 고정 높이 |
패딩 (padding) | string | number | 컨테이너의 헤더, 본문, 푸터 패딩 |
컴포넌트 숨김 (isHidden) | boolean | 배포된 페이지에서 컨테이너 숨김 여부 |
이름 (name)
컨테이너 컴포넌트의 고유 이름을 입력할 수 있는 프로퍼티입니다. 이름 규칙을 참고해주세요.
헤더 표시 (isHeaderVisible)
컨테이너의 헤더 표시 여부를 선택할 수 있습니다.
푸터 표시 (isFooterVisible)
컨테이너의 푸터 표시 여부를 선택할 수 있습니다.
고정 높이 설정 (isHeightFixed)
고정 높이 설정 여부를 선택하는 프로퍼티입니다.
고정 높이를 설정하지 않으면 컴포넌트 내부 크기에 맞추어 높이가 늘어납니다.
높이 (contentHeight)
컴포넌트의 고정 높이 값을 입력하는 프로퍼티입니다.
워크플로우의 실행 결과를 사용하거나 직접 값을 입력하여 높이를 설정할 수 있습니다.
패딩 (padding)
헤더, 본문, 푸터에 동일한 패딩을 적용합니다.
컴포넌트 내부 패딩을 입력할 수 있습니다.
좌우 또는 상하에 숫자를 입력하면 동일한 패딩이 설정되며, 36,24
와 같이 쉼표로 구분지어 각각의 패딩을 설정할 수 있습니다.
- 예시 1: 좌우 패딩에
36
입력할 경우 각각 36px 패딩 적용 - 예시 2: 좌우 패딩에
36,24
입력할 경우 좌측 36px, 우측 24px 패딩 적용
우측의 확장 버튼을 누르면 상, 하, 좌, 우 패딩을 각각 입력하실 수 있습니다.
값을 입력하지 않는 경우 각 패딩의 기본 패딩값이 적용됩니다.
컴포넌트 숨김 (isHidden)
컴포넌트의 숨김 상태를 입력하는 프로퍼티입니다.
워크플로우의 실행 결과를 사용하거나 직접 값을 입력하여 컴포넌트 숨김 상태를 설정할 수 있습니다.
값을 true
로 설정할 경우, 배포된 상태에서는 컴포넌트가 숨겨지고 편집 상태에서는 불투명한 상태로 편집이 가능합니다.
헤더
컨테이너의 헤더 표시를 활성화하면 헤더를 자유롭게 구성할 수 있습니다. 헤더 내부의 컴포넌트들은 일반 컴포넌트들과 동일하게 프로퍼티 설정이 가능합니다.
헤더 내부는 기본 에디터와 마찬가지로 원하는 컴포넌트들을 추가하거나 수정할 수 있습니다.
본문
컨테이너의 본문을 자유롭게 구성할 수 있습니다. 본문 내부의 컴포넌트들은 일반 컴포넌트들과 동일하게 프로퍼티 설정이 가능합니다.
본문 내부는 기본 에디터와 마찬가지로 원하는 컴포넌트들을 추가하거나 수정할 수 있습니다.
푸터
컨테이너의 푸터 표시를 활성화하면 푸터를 자유롭게 구성할 수 있습니다. 푸터 내부의 컴포넌트들은 일반 컴포넌트들과 동일하게 프로퍼티 설정이 가능합니다.
푸터 내부는 기본 에디터와 마찬가지로 원하는 컴포넌트들을 추가하거나 수정할 수 있습니다.