Svelte CSF

允許使用 Svelte 語法編寫 stories

在 Github 上查看

3.5 萬

每週下載量

Svelte Story 格式

允許您使用 .svelte 語法而不是 .js 語法編寫您的 stories。

它支援：

帶有 args 的 stories 和不帶 args 的 stories；
適用於帶有 args 的 stories 的「樣板」模式，與 svelte 語法相容；
提取 stories 的原始碼，並與 addon-sources 相容
裝飾器
knobs、actions、controls
storyshots (使用在 @storybook/addon-svelte-csf/jest-transform 下提供的特殊 jest 轉換)

範例

有一個基本的按鈕元件

<script>
  export let rounded = true;
</script>

<style>
  .rounded {
    border-radius: 35px;
  }

  button {
    border: 3px solid;
    padding: 10px 20px;
    background-color: white;
    outline: none;
  }
</style>

<button class="button" class:rounded on:click={onClick}>
  <slot />
</button>

和一個 button.stories.svelte 檔案

<script context="module">
  import Button from './Button.svelte';

  export const meta = {
    title: "Button",
    component: Button
  }
</script>

<script>
  import { Story, Template } from '@storybook/addon-svelte-csf';

  let count = 0;
  function handleClick() {
    count += 1;
  }
</script>

<Template let:args>
  <!--👇 'on:click' allows to forward event to addon-actions  -->
  <Button {...args} 
    on:click
    on:click={handleClick}>
    You clicked: {count}
  </Button>
</Template>

<Story name="Rounded" args={{rounded: true}}/>

<Story name="Square" source args={{rounded: false}}/>

<!-- Dynamic snippet should be disabled for this story -->
<Story name="Button No Args">
  <Button>Label</Button>
</Story>

Actions 會由 Storybook 自動註冊。若要讓此擴充功能使用，您只需轉發事件（在先前的範例中為 on:click）。

開始使用

npm install --save-dev @storybook/addon-svelte-csf 或 yarn add --dev @storybook/addon-svelte-csf
在 .storybook/main.js 中，將 @storybook/addon-svelte-csf 新增至 addons 陣列
在 .storybook/main.js 中，在您的 stories 模式中包含 .stories.svelte 檔案，例如，將模式變更為 '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'

一個範例 main.js 配置可能如下所示

module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-svelte-csf',
  ],
  framework: '@storybook/svelte-vite',
};