9.4 서브 컴포넌트 속성

다음은 React와 Vue 서브 컴포넌트에 직접 지정하는 속성입니다. 피벗 엔진의 속성은 pivotProps 또는 수동 생성 시 create()에 전달합니다.

9.4.1 autoResize

컴포넌트가 크기 변경을 감지해 피벗 크기를 자동으로 맞출지 지정합니다. 기본값은 true입니다. false이면 자동 감지를 사용하지 않으며, 필요할 때 ref의 resize()를 직접 호출합니다.

9.4.2 createOnMounted

마운트 시 pivotProps로 피벗을 자동 생성합니다. 기본값은 true입니다. false이면 DOM이 준비된 후 ref의 create(pivotProps)를 호출하십시오. 행, 열, 값 설정과 데이터 입력은 생성 이후에 수행합니다.

9.4.3 name

피벗 영역의 DOM ID에 사용할 이름입니다. 기본값인 빈 문자열이면 이름을 자동 생성합니다. 명시한 경우 aui-pivot-wrap-이름 형태가 되므로 같은 화면에서 중복되지 않는 값을 사용하십시오. 생성 후 이름을 바꾸지 않습니다. 실제 피벗 ID는 ref의 getPID()로 확인할 수 있습니다.

9.4.4 pivotProps

자동 생성 시 사용할 피벗 엔진 속성입니다. 기본값은 빈 객체입니다. TypeScript에서는 aui-pivot의 Props로 선언합니다. 수동 생성에서는 이 객체를 create(pivotProps)에 직접 전달합니다.

// 너비를 생략하면 부모 영역에 맞춥니다. 높이 단위는 픽셀입니다.
const pivotProps = {
    height: 400,
    layoutType: 'table',
    showPivotPanel: true
};

생성 후 객체 변경을 자동으로 반영하지 않습니다. setProp() 등 해당 속성의 적용 API를 사용하십시오.

9.4.5 resizeDelayTime

크기 변경을 감지한 뒤 자동 조정을 실행하기까지 기다리는 시간입니다. 기본값은 300밀리초입니다. 0 이상의 숫자를 지정하며, 연속 알림은 마지막 알림 기준으로 합칩니다. 수동 resize() 호출에는 이 대기 시간을 적용하지 않습니다.

9.4.6 resizeMode

autoResize=true일 때 감지 대상을 지정합니다. 기본값은 "window"입니다.

• window: 브라우저 창의 resize 이벤트를 감지합니다.
• container: ResizeObserver로 피벗 호스트 영역의 크기를 감지합니다. 사이드바, 분할 화면, CSS 레이아웃처럼 창 크기가 그대로인 상태의 영역 변경에 사용합니다.

컨테이너 모드에서는 resizeDelayTime 이후 다음 화면 프레임에서 크기를 맞춥니다. 숨겨져 있거나 화면에서 해제된 영역, 크기가 같은 반복 알림은 처리하지 않습니다. ResizeObserver를 지원하지 않는 환경에서는 창 resize 이벤트로 대체합니다.

// React: 자동 생성과 부모 영역 크기 감지를 함께 사용합니다.
<AUIPivot ref={myPivot} pivotProps={pivotProps}
    resizeMode="container" resizeDelayTime={100} />

<!-- Vue: 숫자와 객체 속성은 바인딩으로 전달합니다. -->
<AUIPivot ref="myPivot" :pivotProps="pivotProps"
    resizeMode="container" :resizeDelayTime="100" />

9.4.7 waitPortalRendering

React에서 자동 생성을 한 프레임 늦춥니다. 기본값은 false이며 React JavaScript와 TypeScript만 지원합니다. createOnMounted=true일 때 적용됩니다. 수동 create()에는 적용되지 않습니다.

이 설정은 Portal의 생성 시점을 조절하는 옵션입니다. 애니메이션이나 숨겨진 탭의 표시 완료까지 기다리는 설정은 아닙니다.

9.4.8 크기 설정과 표시 시점

width, height는 피벗 엔진의 숫자 속성입니다. 부모 너비에 맞추려면 width를 생략하십시오. width: "100%"와 같은 문자열을 넣지 않습니다. 부모 영역에는 실제 너비가 있어야 하며 Flex나 Grid 항목이 줄어들어야 할 때는 min-width: 0을 지정합니다.

일정한 높이가 필요하면 height에 픽셀 값을 지정합니다. 컨테이너 감지는 피벗의 데이터에 따른 자동 높이 정책을 바꾸거나 부모 높이를 항상 채우도록 강제하지 않습니다.

숨겨진 탭, 접힌 패널이나 이동 중인 모달은 표시된 후 크기를 맞추십시오. 컨테이너 모드는 영역이 다시 나타나면 재측정하며, 수동으로 제어할 때는 표시 전환이 끝난 뒤 resize()를 호출합니다.

래퍼 속성은 생성 전 설정을 기준으로 사용합니다. 생성 후 감지 방식을 바꾸어야 하면 새 설정으로 컴포넌트를 다시 마운트하십시오. Vue의 KeepAlive 동작은 생성과 해제 시점을 참고하십시오.

문서 홈으로 돌아가기