Storybook ng-source 擴充功能

顯示在樣板上計算出的 args，或將其分成程式碼/HTML。

非常適合快速原型製作元件和基於複製貼上的開發。

（如果您喜歡它，請考慮給它一個星號，這樣我才能保持更新 :D）

分割的 Args (.HTML/.TS)	計算出的 Args (.HTML)

開始使用

使用 npm i storybook-ng-source-addon --save 安裝到您的專案中

將其新增到您的 main.js 中的擴充功能

module.exports = {
  ...
  "addons": [
    "storybook-ng-source-addon",
    ...
  ],
  ...
}

如何編寫故事才能使其正常運作

故事應以以下格式編寫

export const Template: Story<ButtonComponent> = (args) => ({
  props: args,
  template: `
    <pm-button
        [label]="label"
        [type]="type"
        [busy]="busy"
        [busyText]="busyText"
        [iconClass]="iconClass"
        [outline]="outline"
        [disabled]="disabled"
    >
        Button Content
    </pm-button>
  `
});

export const defaultArgs = {
  label: '',
  type: 'default',
  busy: false,
  busyText: '',
  iconClass: '',
  iconPosition: 'start',
  outline: false,
  disabled: false,
};

export const DefaultButton = Template.bind({});
DefaultButton.args = {
  ...defaultArgs
};

• 應僅具有變數 template 作為使用反引號的多行字串 (必要)；
• 應在雙引號內包含變數 (必要)

然後外掛程式將完成所有工作 :)