여러 옵션들 중 하나를 선택할 수 있는 컴포넌트입니다. (Radio와 같은 기능)
yarn add di-uni-segmented-control
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을 설정해주면 됩니다.
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>
);
}
https://di-uni-segmented-control.netlify.app/
git clone https://github.com/di-uni/toss-segmented-control
yarn install
yarn start