苗条故事书的包装器元素

Posted

技术标签:

【中文标题】苗条故事书的包装器元素【英文标题】:Wrapper element for svelte storybook 【发布时间】:2020-03-13 00:17:41 【问题描述】:

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

问题是由于我使用的 css 库,除非它被父元素正确包装,否则该组件将被错误地呈现。简而言之,这个组件是列表元素,没有列表包装器,css 会很时髦。

所以问题是,我能以某种方式告诉 storybook 将我的组件包装在一个 div 中吗?

即像这样的

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

【问题讨论】:

【参考方案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 />

【讨论】:

旧帖子,但我认为这就是我所做的并且有效 @munHunger 为子孙后代 :)

以上是关于苗条故事书的包装器元素的主要内容,如果未能解决你的问题,请参考以下文章

jQuery操作页面元素之包装元素

Jackson XML ArrayList 输出具有两个包装器元素

如何在不删除子元素的情况下删除包装器(父元素)?

如何在苗条的故事书中使用“插槽”

Angular:如何在不删除子元素的情况下删除包装器(父元素)?

为具有不同名称和不同@class 属性值的多个元素创建一个包装器元素