iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
1
Modern Web

玩轉 Storybook系列 第 9

玩轉 Storybook: Day 09 Decorators

Decorators

Decorator是一種設計模式,把要被裝飾的Story當做參數,傳入裝飾器中,Decorator可以幫Story加上額外的資訊,賦予給Story新的能力,而不是變動Story的本身。透過Decorator的設計方法,程式碼是可以被共用在不同的Story上,但不影響Story原本的寫法。

Storybook Decorators 有二種用途

  • wrap stories with extra markup
  • wrap stories with context mocking

Extra markup

當我們希望增加額外的模版呈現方式時使用。例如,想把現在的Story呈現的元件,再多加上間距,可以使用以下的撰寫方式完成。

// YourComponent.stories.js

export default {
  component: YourComponent,
  decorators: [(Story) => <div style={{ margin: '3em' }}><Story/></div>]
}

Context mocking

也可以把參數或資料使用Decorator的方式提供給Story,而不需要去重新改寫Story,很適用於在複合元件或頁面元件使用。

補充說明

因為官網目前在只有提供React的Decorator程式碼,Vue和Angular還在審查階段。目前Decorator大多是用於搭配Addon的功能使用,所以撰寫Story也不會太困難,如果Vue和Angular的程式碼有更新,再同步放上來給大家參考。

Story decorators

單一個Story的套用方式

// src/stories/Button.stories.js

export const Primary = …
Primary.decorators = [(Story) => <div style={{ margin: '3em' }}><Story/></div>];

Component decorators

// src/stories/Button.stories.js

export default {
  title: "Button",
  component: Button,
  decorators:  [(Story) => <div style={{ margin: '3em' }}><Story/></div>]
};

Global decorators

// .storybook/preview.js

export const decorators = [(Story) => <div style={{ margin: '3em' }}><Story/></div>];

Decorator inheritance

如同Parameter一樣,Decorator的套用優先權也是 Story > Component > Global。

Next

介紹完撰寫Story時要注意的相關語法,下一個單元要介紹如何將Storybook命名及Grouping的方式,讓Storybook可以更容易閱讀及查找。

Reference

Writing Stories - Decorators:VueAngular


上一篇
玩轉 Storybook: Day 08 Parameters
下一篇
玩轉 Storybook: Day 10 Naming components and hierarchy
系列文
玩轉 Storybook30

尚未有邦友留言

立即登入留言