如何在苗条的故事书中使用“插槽”
Posted
技术标签:
【中文标题】如何在苗条的故事书中使用“插槽”【英文标题】:How to use `slot` in svelte storybook 【发布时间】:2020-12-08 23:56:48 【问题描述】:如何使用插槽为以下组件添加一个苗条的故事书故事。
Button.svelte<button>
<slot />
</button>
我可以用作
<script>
import Button from './Button.svelte';
</script>
<Button>Hello World</Button>
如何为其中包含 slots 的组件创建故事?
【问题讨论】:
使用槽内的默认值解决。喜欢<slot>default</slot>
。
【参考方案1】:
根据官方故事书回购中的example file。
如果我们需要在 Svelte 环境中测试组件,例如 测试插槽行为,然后将组件包装在一个视图中 只是为了故事是实现这一目标的最简单方法。
所以目前可能最容易遵循这个建议。
Stack.svelte
<div class="flex-col">
<slot><!-- optional fallback --></slot>
</div>
StackView.svelte
<script lang="ts">
import Stack from './Stack.svelte'
</script>
<Stack>
<p>Slot 1</p>
<p>Slot 2</p>
<p>Slot 3</p>
</Stack>
stack.stories.js
import Stack from './StackView.svelte';
export default
title: 'Stack',
component: Stack,
;
const Template = ( ...args ) => (
Component: Stack,
props: args,
);
export const Regular = Template.bind();
也就是说,很快就有可能use svelte template syntax to write stories。我认为这会更优雅地解决问题。
【讨论】:
我认为简单使用 Svelte 模板语法的建议很有价值【参考方案2】:我使用 npx sb init 命令将故事书添加到我的苗条组件库中。下面的故事定义适用于我的 SuccessLabel 组件:
<!--SuccessLabel.svelte-->
<div>
<slot />
</div>
<style>
div
position: relative;
color: white;
background-color: #28a745;
border-color: #28a745;
margin-top: -3px;
padding: 10px;
border-radius: 5px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
font-size: 12px;
</style>
<!--SuccessLabel.stories.svelte-->
<script>
import Meta, Story from "@storybook/addon-svelte-csf";
import SuccessLabel from "../src/components/labels/SuccessLabel.svelte";
</script>
<Meta title="Labels/SuccessLabel" component=SuccessLabel />
<Story name="Default">
<SuccessLabel>This message should be shown</SuccessLabel>
</Story>
【讨论】:
以上是关于如何在苗条的故事书中使用“插槽”的主要内容,如果未能解决你的问题,请参考以下文章