Parameter

Parameter 是用來定義Stories的靜態metadata(解釋資料的資料)，Parameter能提供給不同的addon去做設定。

舉例說明，我們使用Parameter設定好backgrounds的資料，然後background addon可以透過parameters.background，把設定好的背景色清單顯示在backound addon的toolbar上面，方便呈現storybook時做選擇切換。

Story parameters

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

// 這裡 Vue 跟 Angular 的設定方式一樣
Primary.parameters = {
  backgrounds: {
    values: [
      { name: 'story-red', value: 'pink' },
      { name: 'story-green', value: 'olive' },
    ],
  },
};

完整程式碼：Vue、Angular

Component parameters

觀察以上設定在Storybook的呈現結果，只有套用在被設定單個Story上，如果希望是整個對應Component的多個stories都要使用，那就要寫在Component的設定上。

// 這裡 Vue 跟 Angular 的設定方式一樣
export default {
  title: 'Example/Button',
  component: MyButton,
  parameters: {
    backgrounds: {
      values: [
        { name: 'component-red', value: 'DarkRed' },
        { name: 'component-green', value: 'DarkGreen' },
      ],
    },    
  }
};

完整程式碼：Vue、Angular

Global parameters

當希望整個Storybook都套用的設定，就設定在preview.js上

// 這裡 Vue 跟 Angular 的設定方式一樣
export const parameters = {
  ...
  backgrounds: {
    values: [
      { name: 'global-red', value: 'red' },
      { name: 'global-green', value: 'green' },
    ],
  },
}

完整程式碼：Vue、Angular

Parameter inheritance

權重

story > component > global

Parameter可以設定給每個 story，也可以寫在stories對應的 component，如果需要整個Storybook都設定，就設在 global 的preview.js上。

在套用時，如果遇到相同的設定，story level 會是最後被採用的設定，所以在相同的Parameter (eg.backgrounds)，story > component > global。

Storybook是使用merge的方式去合併在每個level設定的Parameters，所以在global設定的Parameters，只要後面的component及story沒有設定相同名稱的Parameter去更動，它會被保留下來以供使用。

Next

權重的觀念也同樣套用在之接下來要說明的Decorator上。

Reference

Writing Stories - Parameters：Vue、Angular