Storybook ng-source 插件

显示在模板上评估的参数或将其拆分为代码/HTML。

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

（如果您喜欢它，请考虑为它加星，以便我能够持续更新：D）

拆分参数（.HTML/.TS）	评估参数（.HTML）

入门

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

添加到您的 main.js 中，位于 addons 内部

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 作为多行字符串（必需）；
• 应将变量包含在双引号中（必需）

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