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

此选项的值将用于旋钮。

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

旋钮的值将如下设置

图标按钮

需要将 active 设置为 true/false，如果没有设置 stateKnobValues，则 true/false 将是旋钮的值。

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

单选选项

当提供 options 且未设置 multiChoice 时，将把所选选项的值设置为旋钮。

多选选项

当提供 options 且将 multiChoice 设置为 true 时，将把所选选项的数组设置为旋钮。

stateKnobValues

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

multiChoice

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