Storybook Addon Knobs使って数値などを動的に変更して確認する方法

前提条件

下記がインストール済
* Vue.js
* Storybook
* Storybook Addon Knobs
https://github.com/storybooks/storybook/tree/master/addons/knobs

手順

ストーリーのimportでnumberも呼び出す。

import { withKnobs, number } from '@storybook/addon-knobs';

sample-listコンポーネントでは、itemをpropで数字を受け取って、一覧の個数を受け取ると仮定しています。

.add('サンプル表示', withNotes(`サンプル一覧です`)(() => ({
  components: { Sample-list },
  template: '<sample-list :item="number"/>',
  data() {
    return {
      number: number('number', 1, { min:1, max:6 }),
    };
  },
}))

これ以外にも、テキスト入力、チェックボックス、色などブラウザから入力したものを動的にコンポーネントに送って状態確認などできます。

参考文献

https://blog.spacemarket.com/code/storybook-addon/
https://github.com/storybooks/storybook/tree/master/addons/knobs#number