[Ionic-React] slide UI 구현하기

1. 개요

모바일 환경에서 빠질 수 없는 UI인 slide를 구현해 보았다.

각각 좌에서 우로, 우에서 좌로 슬라이드를 한 상태이다.

구현 영상은 다음과 같다.

2. 코드 상세

//좌에서 우로 슬라이드
<IonItemOptions side="start">
	<IonItemOption>Hello</IonItemOption>
</IonItemOptions>

//우에서 좌로 슬라이드
<IonItemOptions side="end">
	<IonItemOption onClick={() => alert("pressed delete!")}>Delete</IonItemOption>
</IonItemOptions>

슬라이드 방향을 구분하는 것는 IonItemOptions의 side속성으로 제어가 가능하다.

side속성에는 start, end 두가지의 타입만 가능하다.

start는 좌에서 우로 슬라이딩한 경우 좌측에 컴포넌트를,

end는 우에서 좌로 슬라이딩한 경우 우측에 컴포넌트를 보여준다.