본문으로 건너뛰기
Version: 4.10.4

Panel

class Panel

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

constructor

new Panel(options, options.index, options.align, options.flicking, options.elementProvider)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
optionsobject옵션 오브젝트
options.indexnumber✔️패널의 초기 인덱스
options.alignConstants.ALIGN | string | number✔️패널의 초기 align
options.flickingFlicking✔️패널이 참조하는 Flicking 인스턴스
options.elementProviderFlicking✔️실제 엘리먼트를 반환하는 엘리먼트 공급자의 인스턴스

Properties

element

readonly

패널이 참조하고 있는 HTMLElement

Type: HTMLElement

elementProvider

readonly

index

readonly

패널의 인덱스

Type: number

position

readonly

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

Type: number

size

readonly

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

Type: number

sizeIncludingMargin

readonly

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

Type: number

height

readonly

패널 엘리먼트의 높이

Type: number

margin

readonly

패널 엘리먼트의 CSS margin

Type: object

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

alignPosition

readonly

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

Type: number

removed

readonly

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

Type: boolean

rendered

readonly

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

Type: boolean

loading

readonly

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

Type: boolean

range

readonly

패널 엘리먼트의 Bounding box 범위

Type: object

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

toggled

readonly

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

Type: boolean

toggleDirection

readonly

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

Type: DIRECTION

offset

readonly

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

Type: number

progress

readonly

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

Type: number

outsetProgress

readonly

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

Type: number

visibleRatio

readonly

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

Type: number

align

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

Type: Constants.ALIGN | string | number

Methods

markForShow

Mark panel element to be appended on the camera element

markForHide

Mark panel element to be removed from the camera element

resize

패널의 크기를 갱신합니다

Returns: this

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

setSize

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

Returns: this

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

contains

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

Returns: boolean

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

destroy

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

Returns: void

includePosition

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

Returns: boolean

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

includeRange

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

Returns: boolean

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

isVisibleOnRange

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

Returns: boolean

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

focus

Camera를 이 패널로 이동합니다

Returns: Promise<void>

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

prev

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

Returns: Panel | null

  • 이전 패널

next

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

Returns: Panel | null

  • 다음 패널

increaseIndex

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

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
valnumber0보다 같거나 큰 정수

decreaseIndex

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

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
valnumber0보다 같거나 큰 정수

updatePosition

Returns: this

toggle

Returns: boolean

  • toggled
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
prevPosnumber
newPosnumber

updateCircularToggleDirection

Returns: this