storybook-addon-root-attributes
Storybook Addon Root Attributes 用于在运行时为你的故事切换 `多个` html 或 body 属性 (可在 Storybook 7 中使用!)
Storybook Addon Root Attributes
:star: 适用于 Storybook 7.0.0 :star
这是什么
该项目受到了 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 | {} | 应包含 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",
},
],
},
],
});