苗条故事书的包装元素

Question

我目前正在用 svelte 编写一个组件，为了只处理这个组件，我也在使用故事书。

问题是，由于我使用的 css 库，组件将无法正确呈现，除非它被父元素正确包装。简而言之，这个组件是列表元素，如果没有列表包装器，css 会很时髦。

所以问题是，我能否以某种方式告诉故事书将我的组件包装在 div 中？

即像这样

storiesOf("Kanban card", module)
  .add(
    "small",
    () => ({
      Component: Card,
      template: "<div class='wrapper'><Card /></div>",
      props: {
        ...
      }
    })
  );

Answer 1

最好的办法是创建一个单独的 Svelte 组件，专门针对该故事。这种方法还为您提供了一种正确使用插槽的方法，这是 Storybook 无法明确提供的。

类似 kanban-card.story.svelte 的内容包含：

<script>
  import Card from '../wherever/kanban-card.svelte';

  // export the props that the component needs
  // pass up all events you want to handle
</script>

<Card on:eventYouWant />

苗条故事书的包装元素

Wrapper element for svelte storybook

css

svelte

storybook