Storybook 附加组件 Root Attribute

Storybook 附加组件 Root Attribute，用于在运行时为您的故事切换 html、body 或某些元素属性 Storybook

演示

安装

yarn add -D storybook-addon-root-attribute

配置

然后在您的 storybook 配置中创建一个名为 addons.js 的文件，并向其中添加以下内容

import "storybook-addon-root-attribute/register";

或创建一个名为 main.js 的文件，并在 addons 部分添加附加组件

module.exports = {
  ...
  addons: [
    ...
    'storybook-addon-root-attribute/register'
  ]
};

用法

您需要使用 withRootAttribute 装饰器在编译时添加所有属性值。它们可以全局添加或每个故事添加一个。然后，您可以在附加组件 UI 上选择激活哪些根属性

// Import from @storybook/X where X is your framework
import {
  configure,
  addDecorator,
  addParameters,
  storiesOf
} from "@storybook/react";
import { withRootAttribute } from "storybook-addon-root-attribute";

// global
addDecorator(withRootAttribute);
addParameters({
  rootAttribute: {
    defaultState: {
      name: "Default",
      value: null
    },
    states: [
      {
        name: "Dark",
        value: "dark"
      }
    ]
  }
});

您可以使用 rootAttribute 参数在每个故事上单独覆盖资源

// per story
storiesOf("Addons|RootAttribute", module).add(
  "Camera Icon",
  () => <i className="fa fa-camera-retro"> Camera Icon</i>,
  {
    rootAttribute: {
      defaultState: {
        name: "Default",
        value: null
      },
      states: [
        {
          name: "Dark",
          value: "dark"
        }
      ]
    }
  }
);

如果您想使用工具提示（面板不会消失），您需要在参数中设置 tooltip，值为 true

addParameters({
  rootAttribute: {
    tooltip: true,
    defaultState: {
      name: "Default",
      value: null
    },
    states: [
      {
        name: "Dark",
        value: "dark"
      }
    ]
  }
});

工具提示和面板不会同步更改属性。

配置

rootAttribute 参数的配置参数

名称	默认	变体	描述
root	'html'	'html'、'body' 或 'document.querySelector()' 返回的第一个元素，如果未找到，则为 'html'	根节点，附加组件将更改其属性
attribute	'class'	任何有效的属性名称	属性名称
defaultState	{}	应包含 name 和 value	属性的默认状态。值 nil 将从根中删除属性
states	[]	包含对象的数组，这些对象包含属性的唯一 name 和 value	属性值所需的所有状态。每个对象应包含唯一的 name（用于按钮）和属性的 value
tooltip	false	布尔值	为 Storybook 添加工具提示按钮

配置示例

addDecorator(withRootAttribute);
addParameters({
  rootAttribute: {
    root: "html",
    attribute: "class",
    defaultState: {
      name: "Default",
      value: null
    },
    states: [
      {
        name: "Dark",
        value: "dark"
      },
      {
        name: "A11Y",
        value: "accessibility"
      }
    ]
  }
});