如何在故事书中使用“selectedPanel”？

Question

我注意到 Storybooks Options Docs 中有一个名为 selectedPanel 的 属性，我认为它可以让我预先 select 一个插件面板。

我不清楚如何使用它。例子是：

options: { selectedPanel: 'storybook/a11y/panel' }

我不明白的是 'storybook/a11y/panel' 字符串是从哪里来的。如果我想预 select 'Source' 面板怎么办？

Answer 1

我遇到了同样的问题，并设法发现 panelId 至少可以在插件的 register 源代码步骤中找到。例如，我想为某些故事打开 Readme 选项卡。

我最终在 registerWithPanelTitle.js 中找到了面板的 ID，然后将它与 storiesOf API 一起使用，如下所示：

.addParameters({
  options: { selectedPanel: 'REACT_STORYBOOK/readme/panel' },
})

对于a11y，可以在constants.ts中找到。

尽管如此，我已经在我的案例中搜索了分布式 node_modules 版本中的那些。

P.S。如果您想全局重新排序所有故事的面板，导入插件的列表会处理它。

Answer 2

对于希望默认使用旋钮面板的任何人：selectedPanel: 'storybookjs/knobs/panel' 似乎可行！

Answer 3

我在 main.js 中使用 @storybook/addons-essential 并简单地将 @storybook/addon-controls 添加到 addons 数组选项的前面，如下所示：

module.exports = {
    addons: ['@storybook/addon-controls', '@storybook/addon-essentials'],
    ...
}

这会将控件选项卡放在第一位，即 auto-selected。