Segmented Control

여러 옵션들 중 하나를 선택할 수 있는 컴포넌트입니다. (Radio와 같은 기능)

Usage

yarn add di-uni-segmented-control

<SegmentedControl>

props:

• size: "large" 또는 "small", default값은 "large"로 설정되어 있습니다.

• options (required): Option[], 옵션들의 리스트입니다.

  interface Option {
    id: number;
    label: string;
    value: string;
  }

• defaultOpt: number, 옵션의 id 값을 이용해 default 옵션을 설정할 수 있습니다. 기본값은 0입니다. (첫번째 옵션)

• callback: (val: string) => void, 컴포넌트 바깥에서 선택된 옵션값을 이용할 경우 callback을 설정해주면 됩니다.

Example

import React, { useState } from "react";
import SegmentedControl from "di-uni-segmented-control";

function App() {
  const options = [
    {
      id: 0,
      label: "하나",
      value: "하나",
    },
    {
      id: 1,
      label: "둘",
      value: "둘",
    },
    {
      id: 2,
      label: "셋",
      value: "셋",
    },
  ];
  const defaultOpt = 2;
  const [selectedVal, setSelectedVal] = useState(options[defaultOpt].value);

  return (
    <div className="App">
      <SegmentedControl
        callback={(val) => setSelectedVal(val)}
        defaultOpt={defaultOpt}
        options={options}
      ></SegmentedControl>
      <p>Size: large, Selected value: {selectedVal}</p>
    </div>
  );
}

Demo

https://di-uni-segmented-control.netlify.app/

Development

git clone https://github.com/di-uni/toss-segmented-control
yarn install
yarn start