[英]react storybook addon knobs not showing
我似乎无法让@storybook 插件旋钮工作? 它似乎并没有装饰实际的故事。 几乎遵循这个
下面是我的代码..我使用 getstorybook 和 create-react-app
使用以下软件包:
@storybook/addon-actions": "^3.1.2,
@storybook/addon-info": "^3.1.4,
@storybook/addon-knobs": "^3.1.2,
@storybook/react": "^3.1.3
我的设置
//.storybook/addons.js
import '@storybook/addon-knobs/register'
//.config
import { configure, setAddon, addDecorator } from '@storybook/react';
import infoAddon from '@storybook/addon-info';
setAddon(infoAddon);
function loadStories() {
require('../stories');
}
configure(loadStories, module);
//stories/index.js
import React from 'react';
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
const stories = storiesOf('Storybook Knobs', module);
// Add the `withKnobs` decorator to add knobs support to your stories.
// You can also configure `withKnobs` as a global decorator.
stories.addDecorator(withKnobs);
// Knobs for React props
stories.add('with a button', () => (
<button disabled={boolean('Disabled', false)} >
{text('Label', 'Hello Button')}
</button>
))
这应该是没有道理的,但没有运气。
希望这对某人有所帮助,但由于某种原因,我的插件面板突然从视图中消失了,我不知道如何取回它。 我可以看到在我的开发工具的“元素”窗格中呈现插件标记 - 所以我知道一切正常。 不知何故,故事书在我的localStorage['storybook-layout']
存储了一个错误的值,因此插件被放置在屏幕外。 运行以下修复它。
localStorage.removeItem('storybook-layout')
尝试删除 url 上的所有查询字符串
例如。 http://localhost:6006/?knob-is_block=false&knob-Disabled=false&knob-disabled=false&knob-Style%20lite=false&knob-show=true&knob-Size=md&knob-readOnly=false&knob-Style=default&knob-icon%20name=vertical&knob-Label=Hello%20Button&knob-Active=false&knob-is_loading=false&selectedKind=Button&selectedStory=default%20style&full=0&addons=0&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs
到http://localhost:6006
这对我有用。
在 Storybook 6.5 中,手动添加插件后我遇到了同样的问题:
npm i @storybook/addon-knobs --dev
我需要做的就是将 go 放到.storybook文件夹内的main.js文件中,并添加以下内容:
"addons": ["@storybook/addon-knobs"]
然后我使用ctrl/cmd + c
在终端中停止已经运行的故事书,然后重新运行故事书:
npm run storybook
希望能帮助到你。 谢谢你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.