storybook-multi-toolbar

Storybook 擴充套件，用於定義多個可切換的工具列項目。

設定

npm install --save-dev storybook-multi-toolbar

在 .storybook/main.js 中註冊擴充套件

module.exports = {
  // ...
  addons: [
    'storybook-multi-toolbar',
    // ...
  ],
};

定義選單項目 .storybook/preview.js

export const parameters = {
  multiToolbar: {
    toolbars: [
      {
        param: 'features',
        name: 'Features',
        lists: [
          // toggleable menu items
          {
            type: 'toggle',
            title: 'Toggle features',
            items: [
              { param: 'firstFeature', title: 'First feature' },
              { param: 'secondFeature', title: 'Second feature' },
              { param: 'thirdFeature', title: 'Third feature' },
            ],
          },
          // normal menu items
          {
            title: 'Locale',
            param: 'locale',
            items: [
              { value: 'en', right: '🇺🇸', title: 'English' },
              { value: 'fr', right: '🇫🇷', title: 'Français' },
              { value: 'es', right: '🇪🇸', title: 'Español' },
            ],
          },
        ],
      },
    ],
  },
};

在 preview.ts 中查看更多範例，並在 types.ts 中查看參數結構