StorybookをvupしてからControlsを使ってなかったので設定してみる
Controlsは設定するだけでコンポーネントの引数を動的に操作するためのGUIが提供される
基本的に何も設定しなくても引数の型を解析してGUIをつくってくれるが
たとえば、これをカスタムしたい場合に設定が必要になる
例えば、先ほどの引数をフリーテキストではなくラジオボタンでprimaryかsecondaryの2択にしたい場合、以下のように設定する
// Button.stories.js|jsx|ts|tsx import { Button } from './Button'; export default { /* 👇 The title prop is optional. * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading * to learn how to generate automatic titles */ title: 'Button', component: Button, argTypes: { variant: { options: ['primary', 'secondary'], control: { type: 'radio' }, }, }, };
使える設定