故事书 Addon HTML

Storybook 的此附加词添加一个标签, 显示所编译的 HTML 故事的情节.

所需资源

故事书 10.x

使用此加通的 9. x 版本 .

故事书9.x

使用这个加通的8.x版本.

故事书 8.x

使用这个加通的7.x版本.

开始

安装附加及其依赖.

与国家预防机制:

npm i --save-dev @whitespace/storybook-addon-html

与雅尔:

yarn add -D @whitespace/storybook-addon-html

与 PNPM 连接 :

pnpm add -D @whitespace/storybook-addon-html

注册加注

// .storybook/main.js

module.exports = {
  // ...
  addons: [
    '@whitespace/storybook-addon-html',
    // ...
  ],
};

使用量

您可以覆盖用于抓取组件 HTML 的包装元素选择器.

export const parameters = {
  html: {
    root: '#my-custom-wrapper', // default: #root
  },
};

一些框架将注释放入了HTML. 如果你想把这些取出 可以使用 removeComments 参数。 准备吧 true 删除所有注释 或设置为符合您评论内容的正则表达式 想要删除.

export const parameters = {
  html: {
    removeComments: /^\s*remove me\s*$/, // default: false
  },
};

你也可以使用这个 removeEmptyComments 只删除空的参数 评论 <!----> 财务报告和审定财务报表 <!-- -->。 。 。 .

export const parameters = {
  html: {
    removeEmptyComments: true, // default: false
  },
};

您可以覆盖 showLineNumbers 财务报告和审定财务报表 wrapLines 语法设置 通过使用 highlighter 参数 :

export const parameters = {
  html: {
    highlighter: {
      showLineNumbers: true, // default: false
      wrapLines: false, // default: true
    },
  },
};

另一种隐藏不想要的代码的方式是定义 transform 选项。 这个 允许您对输出代码进行修改,例如删除属性 由框架注入.

html: {
  transform: (code) => {
    // Remove attributes `_nghost` and `ng-reflect` injected by Angular:
    return code.replace(/(?:_nghost|ng-reflect).*?="[\S\s]*?"/g, '');
  };
}

您可以通过设置 HTML 面板来禁用 disable 参数为真. 这将隐藏和禁用您的故事中的 HTML 附加内容 .

html: {
  disable: true, // default: false
}