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

Question

如何使用插槽为以下组件添加精巧的故事书故事。

Button.svelte

<button>
 <slot />
</button>

我可以用作

<script>
  import Button from './Button.svelte';
</script>

<Button>Hello World</Button>

如何为其中包含插槽的此类组件创建故事？

Answer 1

根据官方故事书回购中的这个示例文件。

如果我们需要在 Svelte 环境中测试组件，例如测试插槽行为，那么将组件包装在专为故事制作的视图中是实现这一目标的最简单方法。

所以就目前而言，遵循这个建议可能是最容易的。

堆栈.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({});

也就是说，很快就有可能使用 svelte 模板语法来编写故事。我认为这样可以更优雅地解决问题。