Slider

Slider 는 입력된 Data 들이 가로 형태로 슬라이드 될 수 있는 컴포넌트입니다.

<Slider
  data={[1, 2, 3, 4, 5]}
  panelsPerView={2}
  renderItem={({ item, index }) => (
    <Box
      aspectRatio={4 / 3}
      width="100%"
      background="surface1"
      borderColor="informative"
      borderWidth={1}
      borderStyle="solid"
      justifyContent="center"
      alignItems="center"
    >
      <Body level={1} weight="bold">
        {index}
      </Body>
    </Box>
  )}
  keyExtractor={(item) => item}
/>

<Slider
  data={[1, 2, 3, 4, 5]}
  panelsPerView={2}
  renderItem={({ item, index }) => (
    <Box
      aspectRatio={4 / 3}
      width="100%"
      background="surface1"
      borderColor="informative"
      borderWidth={1}
      borderStyle="solid"
      justifyContent="center"
      alignItems="center"
    >
      <Body level={1} weight="bold">
        {index}
      </Body>
    </Box>
  )}
  keyExtractor={(item) => item}
/>

How to use

import { Slider } from '@vibrant-ui/components';

Properties

Prop	Type	Default	Description
renderItem (*)	() => ReactElement \| null		`data`로부터 아이템을 받아 리스트에 렌더할 요소를 지정합니다
data (*)	array		배열 형태로 `renderItem`으로 전달될 아이템의 리스트를 지정합니다
keyExtractor (*)	(item: Data, index: number) => string		주어진 아이템에 대한 키를 지정합니다
onItemImpressed	(item: Data, index: number \| null) => void;		아이템이 화면에 보이는 순간 호출되는 콜백함수
onEndReached	() => void;		리스트의 끝에 도달했을 때 호출되는 콜백함수
width	`number`	100%	Slider 의 width 를 지정합니다
spacing	`number`		Panel 간의 간격을 지정합니다
px	`number`		Slider 안쪽의 padding horizontal 값을 지정합니다
loop	`boolean`	false	Slider 를 처음과 끝에서 이동했을때 무한으로 이어질 수 있는가 여부의 설정값을 지정합니다
snap	`boolean`	false	각 Panel 이 화면에 완전히 보여질 때까지 스크롤을 멈추는 설정값을 지정합니다
snapAlignment	`center` \| `end` \| `start`	`center`	snap 이 활성화 되었을 때, snap 되는 위치를 지정합니다
initialIndex	`number`	0	초기에 보여질 Panel 의 index 를 지정합니다
panelsPerView(*)	`number`	-	화면에 보여질 Panel 의 개수를 지정합니다
panelWidth(*)	`number`	-	Panel 의 width 를 지정합니다

Usage

PanelWidth

Slider 의 Panel Width 는 두가지 방법으로 설정할 수 있습니다.

panelsPerView 또는 panelWidth 둘 중 하나는 필수로 입력되어야만 하며, 두 필드를 동시에 사용하는 것은 불가능합니다.

첫번째는 panelsPerView 를 지정하는 방법입니다.

<Slider
  data={[1, 2, 3, 4, 5, 6]}
  panelsPerView={3}
  renderItem={({ item, index }) => (
    <Box
      aspectRatio={4 / 3}
      width="100%"
      background="surface1"
      borderColor="informative"
      borderWidth={1}
      borderStyle="solid"
      justifyContent="center"
      alignItems="center"
    >
      <Body level={1} weight="bold">
        {index}
      </Body>
    </Box>
  )}
  keyExtractor={(item) => item}
/>

<Slider
  data={[1, 2, 3, 4, 5, 6]}
  panelsPerView={3}
  renderItem={({ item, index }) => (
    <Box
      aspectRatio={4 / 3}
      width="100%"
      background="surface1"
      borderColor="informative"
      borderWidth={1}
      borderStyle="solid"
      justifyContent="center"
      alignItems="center"
    >
      <Body level={1} weight="bold">
        {index}
      </Body>
    </Box>
  )}
  keyExtractor={(item) => item}
/>

두번째는 panelWidth 를 지정하는 방법입니다.

<Slider
  data={[1, 2, 3, 4, 5, 6]}
  panelWidth={100}
  renderItem={({ item, index }) => (
    <Box
      aspectRatio={4 / 3}
      width="100%"
      background="surface1"
      borderColor="informative"
      borderWidth={1}
      borderStyle="solid"
      justifyContent="center"
      alignItems="center"
    >
      <Body level={1} weight="bold">
        {index}
      </Body>
    </Box>
  )}
  keyExtractor={(item) => item}
/>

<Slider
  data={[1, 2, 3, 4, 5, 6]}
  panelWidth={100}
  renderItem={({ item, index }) => (
    <Box
      aspectRatio={4 / 3}
      width="100%"
      background="surface1"
      borderColor="informative"
      borderWidth={1}
      borderStyle="solid"
      justifyContent="center"
      alignItems="center"
    >
      <Body level={1} weight="bold">
        {index}
      </Body>
    </Box>
  )}
  keyExtractor={(item) => item}
/>

Loop

loop 속성을 설정하는 경우, Slider 의 맨 앞에서 왼쪽으로 스와이프 하는 경우에는 맨 뒤에 위치한 패널로 위치하게 됩니다.

맨 뒤에서 오른쪽으로 스와이프 하는 경우에는 맨 앞에 위치한 패널로 위치하게 됩니다.

즉 사용자 입장에서 Slider 는 무한으로 패널을 스와이프 할 수 있게 됩니다.

<Slider
  data={[1, 2, 3, 4, 5, 6]}
  panelsPerView={1}
  loop={true}
  snap={true}
  renderItem={({ item, index }) => (
    <Box
      aspectRatio={4 / 3}
      width="100%"
      height={100}
      background="surface1"
      borderColor="informative"
      borderWidth={1}
      borderStyle="solid"
      justifyContent="center"
      alignItems="center"
    >
      <Body level={1} weight="bold">
        {item}
      </Body>
    </Box>
  )}
  keyExtractor={(item) => item}
/>

<Slider
  data={[1, 2, 3, 4, 5, 6]}
  panelsPerView={1}
  loop={true}
  snap={true}
  renderItem={({ item, index }) => (
    <Box
      aspectRatio={4 / 3}
      width="100%"
      height={100}
      background="surface1"
      borderColor="informative"
      borderWidth={1}
      borderStyle="solid"
      justifyContent="center"
      alignItems="center"
    >
      <Body level={1} weight="bold">
        {item}
      </Body>
    </Box>
  )}
  keyExtractor={(item) => item}
/>

Slider

How to use​

Properties​

Usage​

PanelWidth​

Loop​

How to use

Properties

Usage

PanelWidth

Loop