15

我似乎无法让@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>
  ))

这应该是没有道理的，但没有运气。

4

4 回答 4

49

希望这对某人有所帮助，但由于某种原因，我的插件面板突然从视图中消失了，我不知道如何找回它。我可以在我的开发工具的“元素”窗格中看到插件标记正在呈现 - 所以我知道一切正常。不知何故，故事书在我的存储中存储了一个不好的价值，localStorage['storybook-layout']因此插件被放置在屏幕之外。运行以下修复它。

localStorage.removeItem('storybook-layout')
于 2019-07-17T01:11:57.387 回答
14

您可能需要在 storybook 配置文件夹中创建 addons.js 文件。（默认为 .storybook）。

检查文档以获取需要添加以下内容的旋钮：

import '@storybook/addon-knobs/register';
于 2017-08-22T20:49:51.237 回答
6
  • 敲击D键盘会切换布局 // Ray Brown

或者

  • 您还应该能够通过单击并拖动右侧来展开侧边栏。

在此处输入图像描述

于 2021-04-09T23:15:24.853 回答
5

尝试删除 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

这对我有用。

于 2018-02-21T06:10:13.660 回答