iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
1
Modern Web

玩轉 Storybook系列 第 8

玩轉 Storybook: Day 08 Parameters

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' },
    ],
  },
};

完整程式碼:VueAngular

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' },
      ],
    },    
  }
};

完整程式碼:VueAngular

Global parameters

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

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

完整程式碼:VueAngular

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:VueAngular


上一篇
玩轉 Storybook: Day 07 Write stories
下一篇
玩轉 Storybook: Day 09 Decorators
系列文
玩轉 Storybook30

尚未有邦友留言

立即登入留言