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 時，使用者可以選擇多個選項。