Storybook 附加元件 Root Attributes

:star: 適用於 Storybook 7.0.0 :star

這是什麼

這個專案的靈感來自 le0pard/storybook-addon-root-attribute

現有的程式庫只接收一個屬性。因此，這個程式庫可以通過接收陣列形式的屬性來更改多個屬性。

Storybook 附加元件 Root Attributes，用於在執行時為您的 Story 切換 html、body 或某些元素的屬性 Storybook

示範

安裝

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 參數來個別覆蓋每個 Story 的資源

// 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	{}	應包含 name 和 value	屬性的預設狀態。值 nil 將從根中移除屬性
states	[]	包含物件的陣列，物件包含屬性的唯一 name 和 value	屬性值的所有必需狀態。每個物件應包含唯一的 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",
        },
      ],
    },
  ],
});