描述错误
我在StencilJs项目中使用了旋钮插件,并且在技术上是可行的(例如,如果我在故事中设置了组件概率,它将对其进行更改,例如:先查看故事文件,然后查看组件,您将看到它正在设置它-并且确实如此)。 但我看不到插件面板。 我认为已正确完成了所有设置(addons.js,package.json等)。
我尝试在正在运行的故事书中选择“显示插件”选项,但未显示任何内容。
我如何使用npm run storybook
运行它
重现
重现行为的步骤:
预期行为
如果安装了要使用的插件,我希望看到插件面板。
屏幕截图
代码段
以下是我的.storybook / addons.js
import '@storybook/addon-a11y/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-knobs/register';
以下是我的package.json
"scripts": {
"build": "stencil build",
"start": "stencil build --dev --watch --serve",
"stencil.dev": "stencil build --dev --watch --docs",
"storybook.dev": "./node_modules/.bin/start-storybook -p 8008 -c .storybook -s ./dist",
"storybook": "npm run build && ./node_modules/.bin/concurrently \"npm run stencil.dev\" \"npm run storybook.dev\"",
"test": "stencil test --spec --e2e",
"test.watch": "stencil test --spec --e2e --watch",
"generate": "stencil generate"
},
"dependencies": {
"@ionic/core": "^4.9.1"
},
"devDependencies": {
"@stencil/core": "^1.7.0",
"@stencil/less": "^1.0.0",
"@stencil/utils": "0.0.5",
"@stencil/webpack": "0.0.6",
"@storybook/addon-a11y": "5.2.3",
"@storybook/addon-actions": "5.2.3",
"@storybook/addon-knobs": "5.2.3",
"@storybook/addon-storysource": "5.2.3",
"@storybook/addon-viewport": "5.2.3",
"@storybook/addons": "5.2.3",
"@storybook/cli": "5.2.3",
"@storybook/html": "5.2.3",
"@storybook/polymer": "5.2.3",
"babel-core": "6.26.3",
"babel-loader": "7.1.5",
"babel-preset-env": "1.7.0",
"lit-html": "1.1.1",
"polymer-webpack-loader": "2.0.3",
"ts-loader": "^5.4.5",
"concurrently": "^4.1.0"
}
下面是我的.storybook / config.js
import { addDecorator, addParameters, configure } from '@storybook/polymer';
import { withA11y } from '@storybook/addon-a11y';
import { withKnobs } from '@storybook/addon-knobs';
import 'sumai-frontend';
addParameters({
options: {
/**
* name to display in the top left corner
* <strong i="6">@type</strong> {String}
*/
name: 'Sumai Components',
/**
* URL for name in top left corner to link to
* <strong i="7">@type</strong> {String}
*/
url: '#',
/**
* show story component as full screen
* <strong i="8">@type</strong> {Boolean}
*/
isFullscreen: false,
/**
* display panel that shows a list of stories
* <strong i="9">@type</strong> {Boolean}
*/
showNav: true,
/**
* display panel that shows addon configurations
* <strong i="10">@type</strong> {Boolean}
*/
showPanel: true,
/**
* display floating search box to search through stories
* <strong i="11">@type</strong> {Boolean}
*/
showSearchBox: false,
/**
* show addon panel as a vertical panel on the right
* <strong i="12">@type</strong> {string}
*/
addonPanelInRight: true,
/**
* sorts stories
* <strong i="13">@type</strong> {Boolean}
*/
sortStoriesByKind: false,
/**
* regex for finding the hierarchy separator
* <strong i="14">@example</strong>:
* null - turn off hierarchy
* /\// - split by `/`
* /\./ - split by `.`
* /\/|\./ - split by `/` or `.`
* <strong i="15">@type</strong> {Regex}
*/
hierarchySeparator: null,
/**
* regex for finding the hierarchy root separator
* <strong i="16">@example</strong>:
* null - turn off multiple hierarchy roots
* /\|/ - split by `|`
* <strong i="17">@type</strong> {Regex}
*/
hierarchyRootSeparator: null,
/**
* sidebar tree animations
* <strong i="18">@type</strong> {Boolean}
*/
sidebarAnimations: true,
/**
* id to select an addon panel
* <strong i="19">@type</strong> {String}
*/
selectedAddonPanel: undefined, // The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
/**
* enable/disable shortcuts
* <strong i="20">@type</strong> {Boolean}
*/
enableShortcuts: true // true by default
}
});
const req = require.context('../src/components', true, /story.tsx$/);
function loadStories() {
req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);
addDecorator(withA11y);
addDecorator(withKnobs);
// HMR interface
if (module.hot) {
// Capture hot update
module.hot.accept('sumai-frontend', () => {
document.location.reload();
});
}
以下是我的故事
import { storiesOf } from "@storybook/polymer";
import { text } from "@storybook/addon-knobs";
storiesOf("Basic Components", module)
.add("Modal", () => {
const el = document.createElement("sumai-full-width-image");
el.name = text('Name', 'Namey');
return el;
});
系统:
System:
OS: Linux 5.0 Ubuntu 19.04 (Disco Dingo)
CPU: (4) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
Binaries:
Node: 10.15.3 - /usr/local/bin/node
Yarn: 1.16.0 - /bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 75.0.3770.80
Firefox: 69.0.2
npmPackages:
@storybook/addon-a11y: 5.2.3 => 5.2.3
@storybook/addon-actions: 5.2.3 => 5.2.3
@storybook/addon-knobs: 5.2.3 => 5.2.3
@storybook/addon-storysource: 5.2.3 => 5.2.3
@storybook/addon-viewport: 5.2.3 => 5.2.3
@storybook/addons: 5.2.3 => 5.2.3
@storybook/cli: 5.2.3 => 5.2.3
@storybook/html: 5.2.3 => 5.2.3
@storybook/polymer: 5.2.3 => 5.2.3
其他背景
有时,UI会进入一种有趣的状态,其中基于本地存储隐藏了附加面板。 在这种情况下,在浏览器控制台中运行localStorage.clear()
并重新加载页面即可解决该问题。
是的,我做到了,而且奏效了,对于冗长的问题,深表歉意,谢谢您的帮助!
对不起,错误! 真高兴你做到了!
有时,UI会进入一种有趣的状态,其中基于本地存储隐藏了附加面板。 在这种情况下,在浏览器控制台中运行
localStorage.clear()
并重新加载页面即可解决该问题。
这挽救了我的一天,tvm @shilman
不确定是否应该将其关闭-这是不可修复的吗? 这种情况经常发生
重新开放。 我们应该弄清楚如何解决此错误。
感谢您提供修复建议。 期待永久修复
如果有帮助,添加旋钮包后,我立即遇到了该错误。 为了使面板可见,我要做的就是转到...
菜单并更改(不可见)面板的方向。 它神奇地出现在垂直方向上,之后我又可以旋转回去。
也许会有所帮助,也许不会!
我也遇到了这个问题,除了清除本地存储/打开隐身窗口不起作用。 我可以在Elements控制台中找到该面板并将其强制显示,并且旋钮可以正常工作。
更新:从我切换后它开始工作panelPosition: 'bottom'
至addonPanelInRight: true
在配置中。 然后,当我将其更改回panelPosition: 'bottom'
,它继续工作,但在隐身窗口中不起作用。 不确定这是否有帮助
遇到同样的问题,改变方向有助于解决问题,但是每当我选择另一个故事时,它就不断消失。 我相信它可能与3:2比例屏幕(《曲面书》)有关,也许因为这个原因它没有将其视为台式机?
在台式机chrome上也有同样的问题。 同样,改变方向有助于解决问题,但是每当我选择另一个故事时,它就不断消失。
很高兴我碰到了这个页面。 我今天遇到了这个令人沮丧的错误, localStorage.clear()
修复。 期待永久修复。
嘿,我刚刚在Storybook 6.0.10上遇到了这个错误,但是我通过更改配置找到了解决方法:
我有showPanel
和panelPosition
在我的配置preview.js
这样的:
// preview.js
addParameters({
options: {
showPanel: true,
panelPosition: "bottom",
},
});
将它们移至manager.js
为我解决了这个问题:
// manager.js
addons.setConfig({
showPanel: true,
panelPosition: "bottom",
});
也许这可以帮助您找到根本的问题,或者其他人正在寻找解决方法;)
在Storybook 6.x中遇到了此问题,localStorage.clear()解决方案对其进行了修复。
快速修复localStorage.clear()上的+1(^ 6.0.18)
而且还@milenaNeumann🙌🙌
当处于这种状态下面就无法解决:
快速而肮脏的修复程序:
长期修复(似乎在所有情况下都可以解决,@ milenaNeumann的道具):
npm i @storybook/addons
.storybook / manager.js :
import { addons } from "@storybook/addons";
addons.setConfig({
showPanel: true,
panelPosition: "bottom",
});
相同。 一直按照指南操作,而我遇到了同样的问题,这里没有什么可以解决的。 我可以转到“文档”标签,然后在此处设置我的参数。
编辑:设法通过使用npm-check-updates更新我的所有软件包来使这项工作有效。
可以肯定的是:只有在看到Storybook之前有旋钮的用户才应该这样做,对吗? 完全不应该影响新访客。
对我来说,以上方法均无效,但我设法通过在main.js中添加控件插件来解决了这一问题:
module.exports = {
addons: ['@storybook/addon-knobs', '@storybook/addon-controls'],
stories: ['./src/stories/*.stories.js'],
};
最有用的评论
有时,UI会进入一种有趣的状态,其中基于本地存储隐藏了附加面板。 在这种情况下,在浏览器控制台中运行
localStorage.clear()
并重新加载页面即可解决该问题。