在没有多个故事的故事书中显示多个变体

Question

我正在构建一个故事书，希望在"文档"选项卡中显示同一组件的多个变体，而不在左侧导航的组件下创建新的故事。这可能吗？

例如，我有以下组件：

export const Template = (args) => (
<Alert {...args}></Alert>
)
<Canvas>
<Story
name="Filled Alert"
args={{
children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
severity: 'info',
variant: 'filled'
}}>
{Template.bind({})}
</Story>
</Canvas>

这个组件有多个我想显示的severity值('info'、'success'、'warning'、'error'(。如果我创建另一个<Story>来在文档中显示该变体：

<Story
name="Filled Alert - Success"
args={{
children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
severity: 'success',
variant: 'filled'
}}>
{Template.bind({})}
</Story>

在这种情况下，我将在上面的每个故事的"警报"下获得两个条目。不过，我想要的只是一个"已填充警报"条目。Canvas显示了可以播放的单个组件，Docs显示了我的MDX文档。

但是(更棘手的是(，我试图为每个variant属性获取一个唯一的条目。因此：

• 警报
  • 已填充警报
  • 标准警报
  • 大纲警报

每个子项目符号显示不同的severity，但不创建新的子项目符号。

Answer 1

您是否尝试过使用本SO文章中提到的@addon旋钮？

@addon旋钮已被弃用，取而代之的是@addon控件。