反应故事书插件旋钮未显示

Posted 2023-02-19

【中文标题】反应故事书插件旋钮未显示

【英文标题】：react storybook addon knobs not showing

【发布时间】：2017-11-21 06:12:38

【问题描述】：

我似乎无法让@storybook 插件旋钮工作？它似乎并没有装饰实际的故事。非常关注this

下面是我的代码..我使用 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>
  ))

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

【问题讨论】：

标题附近省略号菜单中的“显示插件”

【参考方案1】：

在键盘上点击 D 会切换布局 // Ray Brown

或

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

【参考方案2】：

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

localStorage.removeItem('storybook-layout')

【讨论】：

谢谢，这让我省去了几个小时的哭泣时间！当我将 Storybook 和旋钮插件从一个非常旧的版本更新到最新版本时，它发生在我身上。

这对我有用delete localStorage['@storybook/ui/store']

我可以通过点击D 键来解决这个问题，这会改变插件面板的方向。 （您也可以通过单击 Storybook 侧边栏中的 ... 菜单按钮，然后单击“更改插件方向”选项来执行此操作。）

你们都是美丽的天才！

【参考方案3】：

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

勾选Docs for knobs你需要添加以下内容：

import '@storybook/addon-knobs/register';

【讨论】：

为什么投反对票？我链接了笔记并且缺少插件寄存器是人们犯的一个常见错误，导致旋钮未显示。另外我说可能需要

这个问题是针对旋钮的，而不是仅供参考

您甚至没有打开链接或阅读文本对吗？我说需要创建文件和插件注释，这是一个组件作为插件旋钮它说。 “然后在你的故事书配置中创建一个名为 addons.js 的文件。”

【参考方案4】：

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

这对我有用。

【讨论】：

这是我的问题，谢谢。这将在您第一次安装插件并且您已经在浏览器中有一个故事书页面时发生。需要直接去http://localhost:9001或者你配置的任何端口

上面发布的解决方案都没有帮助我，但对我来说，至少旋钮面板以隐身模式显示