Container

복사하려면 클릭

요소를 그룹화하는 데 사용


룩앤필 설정:

Name (필수) - 구성 요소의 이름입니다.

Direction (필수) - 요소가 컨테이너 내부에 세로 또는 가로로 배열되는 방식입니다. 수평은 기본입니다.

Wrap (필수) - 컨테이너의 범위를 벗어날 때 콘텐츠를 래핑합니다. 기본적으로 나우랩

Alignment (필수) - 컨테이너의 요소 정렬. 기본적으로 시작합니다.

Sizes (필수) - 컨테이너 크기. 픽셀 또는 백분율. 기본적으로 너비 100%

Max Width (필수) - 최대 컨테이너 너비(픽셀 또는 백분율). 기본적으로 100%입니다.

Margin (필수) - 바깥쪽 들여쓰기. 기본적으로 0입니다.

Padding (필수) - 내부 들여쓰기. 기본적으로 0 이미지, 그라디언트 또는 오버레이(필수 아님) - 배경용.

Background color (필수 아님) - 배경의 기본 색상입니다.

Border (필수 아님) - 구성 요소 테두리 설정입니다.

Visible (필수) - 켜져 있는 경우 구성 요소를 표시합니다. 기본적으로 활성화되어 있습니다.

Container Settings


워크플로 트리거:

  • onCreate – 페이지에서 요소가 생성될 때 발생합니다.
  • onShow – 구성 요소가 해당 상태를 표시(페이지에 표시됨)로 변경할 때 발생합니다.
  • onHide – 구성 요소가 상태를 숨김(표시 중지)으로 변경할 때 발생합니다.
  • onDestroy – 구성 요소가 파괴될 때 발생합니다.
  • onClick - 구성 요소를 클릭하면 실행됩니다.



구성 요소 작업:

Container get properties

컨테이너의 속성을 가져옵니다.

입력 매개변수:

  • Component Id [string] - 컨테이너 구성 요소의 식별자입니다.

출력 매개변수:

  • Width [string] - 구성 요소의 너비.
  • Height [string] - 구성 요소의 높이.
  • Flex direction [enum] - 구성 요소의 방향.
  • Wrap [enum] - 구성 요소의 랩;
  • Alignment horizontal [enum] - 구성 요소의 수평 정렬.
  • Alignment vertical [enum] - 구성 요소의 수직 정렬.
  • Margin [string] - 구성 요소의 여백.
  • Padding [string] - 구성 요소의 패딩.
  • Border [string] - 구성 요소의 테두리입니다.
  • Background color [string] - 구성 요소의 배경색.
  • Visible [boolean] - 컴포넌트 가시성 상태입니다.


Container set properties

컨테이너의 속성을 가져옵니다.

입력 매개변수:

  • 구성 요소 ID [문자열] - 컨테이너 구성 요소의 식별자입니다.

출력 매개변수:

  • Width [string] - 구성 요소의 너비.
  • Height [string] - 구성 요소의 높이.
  • Flex direction [enum] - 구성 요소의 방향.
  • Wrap [enum] - 구성 요소의 랩;
  • Alignment horizontal [enum] - 구성 요소의 수평 정렬.
  • Alignment vertical [enum] - 구성 요소의 수직 정렬.
  • Margin [string] - 구성 요소의 여백.
  • Padding [string] - 구성 요소의 패딩.
  • Border [string] - 구성 요소의 테두리입니다.
  • Background color [string] - 구성 요소의 배경색.
  • Visible [boolean] - 컴포넌트 가시성 상태입니다.


Container update properties

컨테이너 속성 업데이트

입력 매개변수:

  • Component Id [string] - 컨테이너 구성 요소의 식별자입니다.
  • Width [string] - 구성 요소의 너비.
  • Height [string] - 구성 요소의 높이.
  • Flex direction [enum] - 구성 요소의 방향.
  • Wrap [enum] - 구성 요소의 랩;
  • Alignment horizontal [enum] - 구성 요소의 수평 정렬.
  • Alignment vertica l [enum] - 구성 요소의 수직 정렬.
  • Margin [string] - 구성 요소의 여백.
  • Padding [string] - 구성 요소의 패딩.
  • Border [string] - 구성 요소의 테두리입니다.
  • Border radius [string] - 구성 요소의 테두리 반경.
  • Background color [string] - 구성 요소의 배경색.
  • Visible [boolean] - 컴포넌트 가시성 상태입니다.



사용 예

컨테이너를 사용하여 요소를 그룹화할 수 있습니다. 예를 들어, 여러 다른 입력 필드에서 양식을 어셈블하려면 다음을 수행합니다.

example use containers