在 Storybook 侧边栏添加组件标签

在 Github 上查看

storybook-addon-tags

一个用于在侧边栏添加组件标签的 Storybook 插件。

要求

  • Storybook@>=6.0.0

入门指南

安装

npm install --save-dev storybook-addon-tags
# yarn add -D storybook-addon-tags

main.js 中注册插件

module.exports = {
  addons: ["storybook-addon-tags"],
};

在故事中包含它

在参数中添加标签,可以全局添加(应用于所有故事),也可以针对特定故事添加

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: "Button",
};

Primary.parameters = {
  tag: {
    title: "parent",
    color: "#fff",
    background: "orange"
  },
};