Storybook ng-source 插件

在模板上显示 args 的评估结果，或将其拆分为代码/HTML。

非常适合快速原型设计组件和基于复制粘贴的开发。

（如果您喜欢，请考虑给它加个星，这样我就可以持续更新了 :D）

拆分的 Args (.HTML/.TS)	评估后的 Args (.HTML)

入门

使用 npm i storybook-ng-source-addon --save 将其安装到您的项目中

将其添加到您的 main.js 的 addons 中

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

如何编写 story 使其生效

Stories 应该采用以下格式编写

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，并使用反引号作为多行字符串（必需）；
• 变量应该放在双引号内（必需）

然后插件会完成所有工作 :)