在 Storybook 中隐藏每个故事的插件

Jon*_*nny 9 javascript reactjs storybook

我正在使用 Storybook 和 React 构建一个组件库。使用 CSF 方法包含故事。

我有多个插件,并在显示单个故事时使用它们。我还在一个视图中一起显示所有故事,作为参考 - 我想禁用特定插件的就是这个故事。在这种情况下,我想禁用旋钮。

当我尝试禁用每个故事的单个插件时,什么也没有发生。

我在下面包含了我的文件的简化版本stories.js

import React from 'react';
import Button from './button';
import { withKnobs, text } from '@storybook/addon-knobs/react';

// global settings to be exported 
export default {
  title: 'components/Buttons',
  component: Button,
  decorators: [withKnobs],
  parameters: { options: {showPanel: true }}
}

// define individual stories
const Basic = () => <Button className={text("ClassName-Basic", "button basic")} id={text("ID", "Hello-id-basic")} content={text('Content', 'some text for Basic button here')}/>;
const Primary = () => <Button className={text("ClassName-Primary", "button primary")} id={text("ID", "Hello-id-primary")} content={text('Content', 'some text for Primary button here')}/>;
const Secondary = () => <Button className={text("ClassName-Secondary", "button secondary")} id={text("ID", "Hello-id-secondary")} content={text('Content', 'some text for Secondary button here')}/>;
const Disabled = () => <Button className={text("ClassName-Disabled", "button disabled")} id={text("ID", "Hello-id-disabled")} content={text('Content', 'some text for Disabled button here')}/>;
// define all stories together to be displayed in one view
const All = () => <div><Basic /><br /><Primary /><br /><Secondary /><br /><Disabled /></div>;

// export all components individually, and then export them all together
export  {Basic, Primary, Secondary, Disabled, All};

// settings for the 'All' story
All.story = {
  parameters: { 
    options: { 
      withKnobs: {
        disable: true, // do not show the knobs addon on this story
      } 
    }
  }
};

Run Code Online (Sandbox Code Playgroud)

尽管添加此设置以禁用所有故事视图上的旋钮,但它仍然显示。我究竟做错了什么?

我使用的是故事书版本5.2.8