反應故事書插件旋鈕未顯示

Question

我似乎無法讓@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>
  ))

這應該是沒有道理的，但沒有運氣。

Answer 1

希望這對某人有所幫助，但由於某種原因，我的插件面板突然從視圖中消失了，我不知道如何取回它。 我可以看到在我的開發工具的“元素”窗格中呈現插件標記 - 所以我知道一切正常。 不知何故，故事書在我的localStorage['storybook-layout']存儲了一個錯誤的值，因此插件被放置在屏幕外。 運行以下修復它。

localStorage.removeItem('storybook-layout')

Answer 2

您可能需要在 storybook 配置文件夾中創建 addons.js 文件。 （默認為 .storybook）。

檢查文檔以獲取您需要添加以下內容的旋鈕：

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

Answer 3

嘗試刪除 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

這對我有用。

Answer 4

• 按鍵盤上的D切換布局 // Ray Brown

或

• 您還應該能夠通過單擊並拖動右側來展開側邊欄。

Answer 5

在 Storybook 6.5 中，手動添加插件后我遇到了同樣的問題：

npm i @storybook/addon-knobs --dev

我需要做的就是將 go 放到.storybook文件夾內的main.js文件中，並添加以下內容：

"addons": ["@storybook/addon-knobs"] 

然后我使用ctrl/cmd + c在終端中停止已經運行的故事書，然后重新運行故事書：

npm run storybook

希望能幫助到你。 謝謝你。