在故事书6中禁用每个故事的画布

Question

我试图在新的故事书6中找到一种在故事层禁用画布的方法。我正在制作一个组件库，根据故事的不同，其中一些组件将只拥有画布，而另一些组件将只拥有文档。

我试过用

myStory.parameters = {
  previewTabs: {
    canvas: {
      hidden: true,
    },
  },
};

或

myStory.parameters = {
  previewTabs: {
    'storybook/docs/panel': {
      hidden: false,
    },
  },
};

取决于故事。但是，这将导致没有显示标签名。因此，发生了以下情况：

1. ：我有故事1--只有画布可见的
2. ，我有故事2--只有docs
3. ，我点击了故事1--我看到了画布，正如我在故事2上点击的
4. --我也看到了画布，尽管它是隐藏的(我想是因为选项卡是从上一个故事中保留下来的)。好像这还不够糟糕，我甚至不能点击docs，因为没有标签名是visible.
5. Same，相反(如果我从

2开始)是有效的。

作为对docs的一种解决办法，我发现了这一点(感谢Benjamin，在本文here中)：

myStory.parameters = {
  docs: { page: null },
};

这样，我仍然可以看到canvas和docs选项卡，但对于设置了此参数的文档，docs选项卡现在是空的。

我想在画布上做一些类似的事情，并且尝试过。

myStory.parameters = {
  canvas: { page: null },
};

myStory.parameters = {
  canvas: { disabled: true },
};

但没有起作用。

Answer 1

我不知道这个解决方案是否适合您的需要，但我发现的工作方法是用.mdx编写我的故事，并在Meta上禁用画布

import { Meta } from '@storybook/addon-docs/blocks';
import { MyComponent } from './MyComponent';

<Meta
  title="Section/MyComponent"
  parameters={{
    viewMode: 'docs',
    previewTabs: { 
      canvas: { hidden: true } 
     },
  }}
/>

# My markdown title

<Canvas>
  <Story name="mycomponent">
    <MyComponent />
  </Story>
</Canvas>

Answer 2

是的，选项卡是从前一个故事中保存的，但是您可以为该故事设置一个默认的视图模式，这将解决您的问题。

myStory.parameters = {
  previewTabs: {
    canvas: {
        hidden: true,
    },
  },
  viewMode: 'docs',
};

关于https://github.com/storybookjs/storybook/blob/master/addons/docs/docs/recipes.md#controlling-a-storys-view-mode的更多示例

Answer 3

在MyStory.stories.jtsx文件中

要隐藏“画布”选项卡，请执行以下操作：

export default {
    title: 'YourTitle',
    parameters: {
        previewTabs: {
            canvas: { hidden: true},
        },
        viewMode: 'docs',
    }
};

要隐藏"Docs"选项卡，请执行以下操作：

export default {
    title: 'YourTitle',
    parameters: {
        previewTabs: {
            'storybook/docs/panel': { hidden: true }
        },
        viewMode: 'canvas',
    }
};

必须在该视图中设置默认选项卡，否则“故事书”将显示在前一个视图中打开的最后一个选项卡。