苗条故事书的包装器元素
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 为子孙后代 :)以上是关于苗条故事书的包装器元素的主要内容,如果未能解决你的问题,请参考以下文章
Jackson XML ArrayList 输出具有两个包装器元素