Storybook 擴充功能根屬性

Storybook 擴充功能根屬性，可在您的 Story 中於執行時切換 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 裝飾器在編譯時新增所有屬性值。它們可以全域新增或每個 Story 新增。然後，您可以選擇在擴充功能 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 參數來個別覆寫每個 Story 上的資源

// 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"
      }
    ]
  }
});