加入直播:周四东部夏令时间 11 点,Storybook 9 发布及 AMA (问答会)

Storybook poleaxe

如果有了 storybook-axe,为什么不把它放在一个棍子上呢?

在 Github 上查看

理念

灵感来自 HTML-tree

提供

  • 👁 高亮显示页面上的标题,帮助理解其位置
  • 🌳 页面结构的树状视图,能够将你的页面视为一个词汇表

安装

// .storybook/main.js
module.exports = {
addons: [require.resolve('storybook-addon-poleaxe/preset')],
};

配置

你可以通过故事参数为特定故事默认启用或禁用高亮显示

HighlightedByDefault.parameters = {
  poleaxe: {
    highlighter: true,
  }
}

你还可以控制 MutationObserver 的行为

StaticStory.parameters = {
  poleaxe: {
    mutationObserver: true | false, // enabled of disabled for all
    mutationObserver: 'highlighter' | 'panel', // enabled only for some pieces
  }
}

另请参阅

许可

MIT