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