본문으로 건너뛰기
버전: Next

VirtualPanel

class VirtualPanel extends Panel

슬라이드 데이터 컴포넌트로, 단일 HTMLElement의 정보를 갖고 있습니다

constructor

new VirtualPanel(options, options.index, options.align, options.flicking)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
optionsobject옵션 오브젝트
options.indexnumber✔️패널의 초기 인덱스
options.alignConstants.ALIGN | string | number✔️패널의 초기 align
options.flickingFlicking✔️패널이 참조하는 Flicking 인스턴스

Properties

element

readonly

패널이 참조하고 있는 HTMLElement

Type: HTMLElement

cachedInnerHTML

readonly

이전 렌더링에서 캐시된 innerHTML 정보

Type: string | null

elementIndex

readonly

몇 번째 엘리먼트에 렌더링될 것인지를 나타내는 숫자

Type: number

elementProvider

readonlyinherited

index

readonlyinherited

패널의 인덱스

Type: number

position

readonlyinherited

패널의 현재 좌표, alignPosition을 포함하고 있습니다

Type: number

size

readonlyinherited

패널 엘리먼트의 캐시된 크기
이 값은 horizontaltrue일 경우 elementoffsetWidth와 동일하고, false일 경우 offsetHeight와 동일합니다

Type: number

sizeIncludingMargin

readonlyinherited

CSS margin을 포함한 패널의 크기
이 값은 horizontaltrue일 경우 margin left/right을 포함하고, false일 경우 margin top/bottom을 포함합니다

Type: number

height

readonlyinherited

패널 엘리먼트의 높이

Type: number

margin

readonlyinherited

패널 엘리먼트의 CSS margin

Type: object

PROPERTYTYPEDESCRIPTION
prevnumberhorizontaltrue일 경우 margin-left, false일 경우 margin-top에 해당하는 값
nextnumberhorizontaltrue일 경우 margin-right, false일 경우 margin-bottom에 해당하는 값

alignPosition

readonlyinherited

패널의 정렬 기준 위치. Camera의 뷰포트 내에서의 alignPosition이 위치해야 하는 곳입니다

Type: number

removed

readonlyinherited

패널이 remove되었는지 여부를 나타내는 값

Type: boolean

rendered

readonlyinherited

패널의 엘리먼트가 화면상에 렌더링되고있는지 여부를 나타내는 값

Type: boolean

loading

readonlyinherited

패널 내부의 이미지/비디오가 아직 로드되지 않아 resize될 것인지를 나타내는 값

Type: boolean

range

readonlyinherited

패널 엘리먼트의 Bounding box 범위

Type: object

PROPERTYTYPEDESCRIPTION
minnumberBounding box's left(horizontal: true) / top(horizontal: false)
maxnumberBounding box's right(horizontal: true) / bottom(horizontal: false)

toggled

readonlyinherited

패널의 위치가 circular 동작에 의해 토글되었는지 여부를 나타내는 값

Type: boolean

toggleDirection

readonlyinherited

패널의 위치가 circular 동작에 의해 토글되는 방향

Type: DIRECTION

offset

readonlyinherited

Panel#order에 의한 실제 위치 변경값

Type: number

progress

readonlyinherited

이 패널로부터 이전/다음 패널으로의 이동 진행률

Type: number

outsetProgress

readonlyinherited

현재 패널이 뷰포트 영역 밖으로 완전히 사라지는 지점을 기준으로 하는 진행도(prev방향: -1, 선택 지점: 0, next방향: 1)

Type: number

visibleRatio

readonlyinherited

뷰포트 안에서 패널이 보이는 영역의 비율

Type: number

align

inherited

alignPosition이 패널 내의 어디에 위치해야 하는지를 나타내는 값

Type: Constants.ALIGN | string | number

Methods

markForShow

inherited

Mark panel element to be appended on the camera element

markForHide

inherited

Mark panel element to be removed from the camera element

resize

inherited

패널의 크기를 갱신합니다

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
cachedobject✔️사전에 캐시된 패널의 크기 정보

setSize

inherited

패널 크기를 변경합니다. 패널 엘리먼트에 해당 크기의 CSS width/height를 적용합니다

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
sizeobject✔️새 패널 크기
size.widthnumber | string✔️CSS 문자열 또는 숫자(px)
size.heightnumber | string✔️CSS 문자열 또는 숫자(px)

contains

inherited

해당 엘리먼트가 이 패널의 element 내에 포함되어 있는지를 반환합니다

Returns: boolean

  • 패널의 element내에 해당 엘리먼트 포함 여부
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
elementHTMLElement확인하고자 하는 HTMLElement

destroy

inherited

내부 상태를 초기화하고 removedtrue로 설정합니다.

Returns: void

includePosition

inherited

주어진 좌표가 현재 패널의 range내에 속해있는지를 반환합니다.

Returns: boolean

  • 해당 좌표가 패널 영역 내에 속해있는지 여부
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
posnumber확인하고자 하는 좌표
includeMarginboolean✔️false패널 영역에 margin값을 포함시킵니다

includeRange

inherited

주어진 범위가 이 패널 내부에 완전히 포함되는지를 반환합니다

Returns: boolean

  • 해당 범위가 패널 영역 내에 완전히 속해있는지 여부
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
minnumber확인하고자 하는 최소 범위
maxnumber확인하고자 하는 최대 범위
includeMarginboolean✔️false패널 영역에 margin값을 포함시킵니다

isVisibleOnRange

inherited

주어진 범위 내에서 이 패널의 일부가 보여지는지를 반환합니다

Returns: boolean

  • 해당 범위 내에서 패널을 볼 수 있는지 여부
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
minnumber확인하고자 하는 최소 범위
maxnumber확인하고자 하는 최대 범위

focus

inherited

Camera를 이 패널로 이동합니다

Returns: Promise<void>

  • 패널 도달시에 resolve되는 Promise
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
durationnumber✔️애니메이션 진행 시간 (단위: ms)

prev

inherited

이전(index - 1) 패널을 반환합니다. 이전 패널이 없을 경우 null을 반환합니다
circular 모드가 활성화되었을 때 첫번째 패널에서 이 메소드를 호출할 경우 마지막 패널을 반환합니다

Returns: Panel | null

  • 이전 패널

next

inherited

다음(index + 1) 패널을 반환합니다. 다음 패널이 없을 경우 null을 반환합니다
circular 모드가 활성화되었을 때 마지막 패널에서 이 메소드를 호출할 경우 첫번째 패널을 반환합니다

Returns: Panel | null

  • 다음 패널

increaseIndex

inherited

패널의 인덱스를 주어진 값만큼 증가시킵니다

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
valnumber0보다 같거나 큰 정수

decreaseIndex

inherited

패널의 인덱스를 주어진 값만큼 감소시킵니다

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
valnumber0보다 같거나 큰 정수

updatePosition

inherited

Returns: this

toggle

inherited

Returns: boolean

  • toggled
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
prevPosnumber
newPosnumber

updateCircularToggleDirection

inherited

Returns: this