加入在线会议:周四,美国东部时间上午 11 点,Storybook 9 发布 & AMA

storybook-addon-root-attributes

Storybook Addon Root Attributes 用于在运行时为你的故事切换 `多个` html 或 body 属性 (可在 Storybook 7 中使用!)

在 Github 上查看

Storybook Addon Root Attributes

:star: 适用于 Storybook 7.0.0 :star

demo

这是什么

该项目受到了 le0pard/storybook-addon-root-attribute 的启发

现有库只接收了 一个属性。 因此,该库可以通过接收 数组形式 的属性来更改多个属性。

Storybook Addon Root Attributes 用于在运行时为你的故事 Storybook 切换 html、body 或某些元素的属性

演示

安装

yarn add -D storybook-addon-root-attributes

配置

创建一个名为 main.js 的文件,并在 addons 部分添加插件

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

用法

创建一个名为 preview.js 的文件,并在 addParameters 中添加参数

import { addParameters } from "@storybook/react";

// global
addParameters({
  rootAttributes: [
    {
      defaultState: {
        name: "Default",
        value: null,
      },
      states: [
        {
          name: "Dark",
          value: "dark",
        },
      ],
    },
    {
      defaultState: {
        name: "Default",
        value: null,
      },
      states: [
        {
          name: "IOS",
          value: "ios",
        },
      ],
    },
  ],
});

你可以使用 rootAttributes 参数来单独覆盖每个故事的资源

// per story: Button.stories.js
export default {
  title: "Example/Button",
  component: Button,
  parameters: {
    rootAttributes: [
      {
        root: "html",
        attribute: "data-color-scheme",
        defaultState: {
          name: "Yellow",
          value: "yellow",
        },
        states: [
          {
            name: "Blue",
            value: "blue",
          },
          {
            name: "Red",
            value: "red",
          },
          {
            name: "Green",
            value: "green",
          },
        ],
      },
    ],
  },
};

如果你想使用工具提示 (面板将不会消失),你需要将 rootAttributesTooltip 参数设置为 true

addParameters({
  rootAttributesTooltip: true, // you need to set this property
  rootAttributes: [
    {
      root: "html",
      attribute: "data-scale-color",
      defaultState: {
        name: "Light",
        value: "light",
      },
      states: [
        {
          name: "Dark",
          value: "dark",
        },
        {
          name: "Gray",
          value: "gray",
        },
      ],
    },
    {
      root: "html",
      attribute: "data-letter-spacing",
      defaultState: {
        name: "IOS",
        value: "ios",
      },
      states: [
        {
          name: "Android",
          value: "android",
        },
      ],
    },
  ],
});

配置

rootAttributes 参数的配置参数

名称 默认值 可选值 描述
rootAttributes rootAttribute[] 包含对象的数组,其中包含 rootAttribute 请查看下面的详细信息
rootAttributesTooltip false 布尔值 为 Storybook 添加工具提示按钮

rootAttribute 参数的配置参数

名称 默认值 可选值 描述
root 'html' 'html'、'body',或由 'document.querySelector()' 返回的第一个元素,如果未找到,则为 'html' 根节点,其属性将被插件更改
attribute 'class' 任何有效的属性名称 属性名称
defaultState {} 应包含 namevalue 属性的默认状态。值 nil 将从根节点中移除属性
states [] 包含对象的数组,这些对象包含用于属性的唯一 namevalue 属性值的所有所需状态。每个对象应包含唯一的 name (用于按钮) 和用于属性的 value

配置示例

addParameters({
  rootAttributesTooltip: true,
  rootAttributes: [
    {
      root: "html",
      attribute: "data-scale-color",
      defaultState: {
        name: "Light",
        value: "light",
      },
      states: [
        {
          name: "Dark",
          value: "dark",
        },
        {
          name: "Gray",
          value: "gray",
        },
      ],
    },
    {
      root: "html",
      attribute: "data-letter-spacing",
      defaultState: {
        name: "IOS",
        value: "ios",
      },
      states: [
        {
          name: "Android",
          value: "android",
        },
      ],
    },
  ],
});