參數

參數是靜態中繼資料，用於在 Storybook 中設定您的stories和擴充套件。它們在 story、meta (元件) 和專案 (全域) 層級中指定。

Story 參數

在 story 層級中指定的參數僅適用於該 story。它們在 story 的 parameters 屬性 (具名匯出) 中定義。

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
};
export default meta;
 
type Story = StoryObj<typeof Button>;
 
export const OnDark: Story = {
  // 👇 Story-level parameters
  parameters: {
    backgrounds: {
      default: 'dark',
    },
  },
};

Meta 參數

在CSF檔案的 meta 設定中指定的參數適用於該檔案中的所有 stories。它們在 meta (預設匯出) 的 parameters 屬性中定義。

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
  // 👇 Meta-level parameters
  parameters: {
    backgrounds: {
      default: 'dark',
    },
  },
};
export default meta;
 
type Story = StoryObj<typeof Button>;
 
export const Basic: Story = {};

專案參數

在專案 (全域) 層級中指定的參數適用於 Storybook 中的所有 stories。它們在 .storybook/preview.js|ts 檔案中的預設匯出中的 parameters 屬性中定義。

// Replace your-renderer with the renderer you are using (e.g., react, vue3)
import { Preview } from '@storybook/your-renderer';
 
const preview: Preview = {
  parameters: {
    backgrounds: {
      values: [
        { name: 'light', value: '#fff' },
        { name: 'dark', value: '#333' },
      ],
    },
  },
};
 
export default preview;

可用參數

Storybook 僅直接接受一些參數。

layout

類型：'centered' | 'fullscreen' | 'padded'

預設值：'padded'

指定畫布應如何配置 story。

• centered：將 story 置於畫布中心
• padded：(預設) 在 story 中新增邊距
• fullscreen：按原樣顯示 story，不含邊距

options

類型

{
  storySort?: StorySortConfig | StorySortFn;
}

options.storySort

類型：StorySortConfig | StorySortFn

type StorySortConfig = {
  includeNames?: boolean;
  locales?: string;
  method?: 'alphabetical' | 'alphabetical-by-kind' | 'custom';
  order?: string[];
};
 
type Story = {
  id: string;
  importPath: string;
  name: string;
  title: string;
};
 
type StorySortFn = (a: Story, b: Story) => number;

指定 Storybook UI 中故事的顯示順序。

當指定配置物件時，可以使用以下選項：

• includeNames：是否在排序演算法中包含故事名稱。預設值為 false。
• locales：排序故事時使用的地區設定。預設值為您的系統地區設定。
• method：要使用的排序方法。預設值為 alphabetical。
  • alphabetical：依名稱字母順序排序故事。
  • alphabetical-by-kind：先依種類字母順序排序故事，然後再依名稱排序。
  • custom：使用自訂排序函式。
• order：指定順序的故事會優先顯示，依指定的順序排列。所有其他故事會接著顯示，依字母順序排列。順序陣列可以接受巢狀陣列來排序第二層級的故事種類，例如 ['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components']。

當指定自訂排序函式時，該函式的行為類似於典型的 JavaScript 排序函式。它接受兩個故事進行比較並傳回一個數字。例如：

(a, b) => (a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }));

請參閱指南以獲取使用範例。

test

類型

{
  clearMocks?: boolean;
  mockReset?: boolean;
  restoreMocks?: boolean;
  dangerouslyIgnoreUnhandledErrors?: boolean;
}

clearMocks

類型：boolean

預設值：false

類似於 Vitest，當故事卸載時，它將對使用 @storybook/test 的 fn() 建立的所有間諜呼叫 .mockClear()。這將清除模擬歷史記錄，但不會將其實作重設為預設值。

mockReset

類型：boolean

預設值：false

類似於 Vitest，當故事卸載時，它將對使用 @storybook/test 的 fn() 建立的所有間諜呼叫 .mockReset()。這將清除模擬歷史記錄並將其實作重設為空函式（將傳回 undefined）。

restoreMocks

類型：boolean

預設值：true

類似於 Vitest，當故事卸載時，它將對使用 @storybook/test 的 fn() 建立的所有間諜呼叫 .restoreMocks()。這將清除模擬歷史記錄並將其實作重設為原始實作。

dangerouslyIgnoreUnhandledErrors

類型：boolean

預設值：false

未處理的錯誤可能會導致錯誤的肯定斷言。將此設定為 true 將防止 play 函式 在執行期間擲回未處理的錯誤時失敗並顯示警告。

基本附加元件

所有其他參數由附加元件貢獻。基本附加元件的參數記錄在其個別頁面上。

• 動作
• 背景
• 控制項
• 強調
• 互動
• 測量 & 外框
• 視埠

參數繼承

無論在哪裡指定，參數最終都會應用於單一故事。在專案（全域）層級指定的參數會應用於該專案中的每個故事。在 meta（元件）層級指定的參數會應用於與該 meta 相關聯的每個故事。而為故事指定的參數僅適用於該故事。

當指定參數時，它們會依據明確性的遞增順序合併在一起：

1. 專案（全域）參數
2. Meta（元件）參數
3. 故事參數

換句話說，以下參數規格：

// .storybook/preview.js|ts
 
const preview = {
  // 👇 Project-level parameters
  parameters: {
    layout: 'centered',
    demo: {
      demoProperty: 'a',
      demoArray: [1, 2],
    },
  },
  // ...
};
export default preview;

// Dialog.stories.js|ts
 
const meta = {
  component: Dialog,
  // 👇 Meta-level parameters
  parameters: {
    layout: 'fullscreen',
    demo: {
      demoProperty: 'b',
      anotherDemoProperty: 'b',
    },
  },
};
export default meta;
 
// (no additional parameters specified)
export const Basic = {};
 
export const LargeScreen = {
  // 👇 Story-level parameters
  parameters: {
    layout: 'padded',
    demo: {
      demoArray: [3, 4],
    },
  },
};

將導致以下參數值應用於每個故事：

// Applied story parameters
 
// For the Basic story:
{
  layout: 'fullscreen',
  demo: {
    demoProperty: 'b',
    anotherDemoProperty: 'b',
    demoArray: [1, 2],
  },
}
 
// For the LargeScreen story:
{
  layout: 'padded',
  demo: {
    demoProperty: 'b',
    anotherDemoProperty: 'b',
    demoArray: [3, 4],
  },
}