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 查看参数结构