storybook-addon-toolbar-actions

一个插件，用于在任何 React 函数组件内部向 Storybook 工具栏添加按钮。

请注意，此插件仅适用于 React 应用。

配置

在 .storybook/main.js 中

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

用法

在任何函数组件内部

添加图标

import { useToolbarActions } from 'storybook-addon-toolbar-actions';
import AcUnitIcon from '@material-ui/icons/AcUnit';

export const WithIcon = () => {
  useToolbarActions(
    'icon-id',
    <AcUnitIcon style={{ fill: 'currentColor' }} />,
    () => {
      console.log('clicked');
    },
  );
  return <button />;
};

添加选项列表

import { useToolbarActions } from 'storybook-addon-toolbar-actions';
import AcUnitIcon from '@material-ui/icons/AcUnit';

export const WithOptions = () => {
  const [options, setOptions] = useState<ToolbarActionOption[]>([
    { key: 'name', value: 'val' },
    { key: 'name2', value: 'val' },
  ]);

  useToolbarActions(
    'icon-id',
    <AcUnitIcon style={{ fill: 'currentColor' }} />,
    {
      options,
      onClick:(options, option) => {
      setOptions(options);
      console.log(option);
    },
    },
  );
  return <button />;
};

选项

• active?: boolean;
• options?: ToolbarActionOption[];
• closeOptionListOnClick?: boolean;
• group?: string | number;
• setToKnob?: string;
• stateKnobValues
• multiChoice?: boolean;

active

将激活 Storybook IconButton 指示器。

options

如果设置，按钮下方将打开一个下拉列表

closeOptionListOnClick

点击选项时将关闭选项下拉列表。

当 multiChoice 设置为 true 时，closeOptionListOnClick 选项无效。

group

使用此选项对容器中的按钮进行排序和分组，设置后将在按钮之间添加 Separator。

setToKnob

此选项的值将用于 knob

setToKnob: 'locale';
// will be knob-locale=value

knob 的值设置如下

图标按钮

需要将 active 设置为 true/false，如果 stateKnobValues 未设置，则 true/false 将是 knob 的值。

当 stateKnobValues 设置时，将根据 active 状态使用 stateKnobValues.active 或 stateKnobValues.inactive 的值。

单选选项

当提供了 options 且未设置 multiChoice 时，所选选项的值将设置给 knob。

多选选项

当提供了 options 且 multiChoice 设置为 true 时，所选选项的数组将设置给 knob。

stateKnobValues

当 stateKnobValues 设置时，将根据 active 状态使用 stateKnobValues.active 或 stateKnobValues.inactive 的值。

multiChoice

设置为 true 时，用户可以选择多个选项。