故事手册 Addon Pseudo州

Storybook Addon Pseudo States允许您在 Storybook的预览区域中自动显示一个组件的伪状态(和属性状态).

• 现场直播
• 实例Repo( CRA)

框架支助

开始

首先,您需要将 Pseudo 状态安装到您的项目中, 作为 dev 依赖 .

npm install @ergosign/storybook-addon-pseudo-states-react --save-dev

使用时 创建- 反应- 应用程序 和相关预设,将其配置为附加 用于您的故事书环境(位于故事书配置目录中).

import "@ergosign/storybook-addon-pseudo-states-react/preset-postcss";

module.exports = {
  "addons": [
    '@ergosign/storybook-addon-pseudo-states-react/preset-postcss'
  ]
}

如果您有其它项目配置, 请检查 高级设置 ,以查看如何使其在不同的设置下工作.

看用假加子需要什么,看看那个 使用量 节.

高级设置

带有 PostCSS 预设

这个项目是附属于 邮递级 软件包. 不幸的是,最新版本只是被贴上标签而没有发布.

我们提供 预设员额 添加的预设 邮箱装入器 到故事书的自定义网络包配置. 将此预设添加到您的配置( 位于 Storybook 配置目录中)

import "@ergosign/storybook-addon-pseudo-states-react/preset-postcss";

module.exports = {
  "addons": [
    '@ergosign/storybook-addon-pseudo-states-react/preset-postcss'
  ]
}

这为每个 Cs 伪类创造了等同的普通 Cs 类( 例如) :hover 改为 \:hover),这样 您可以在元素的类属性中使用它 (<div class=":hover">Element in hover state</div>) (中文(简体) ).

您可以修改 ass 加载器选项( 请参见类型定义 ) 预选方案:

module.exports = {
   presets: [
       {
            name:"@ergosign/storybook-addon-pseudo-states-react/preset-postcss",
            options: {
                rules: [/\.scss$|\.sass$/, ".sass", ...],
                cssLoaderOptions: CssLoaderOptions,
                postCssLoaderPseudoClassesPluginOptions: {
                    prefix: 'pseudo-states--', // default for angular
                    blacklist: [':nth-child', ':nth-of-type']
                }
            }
        }     
    ] 
}

如果您设置了另一个前缀, 您也必须为加通设置相同的前缀 . 因此,请在下表中添加以下内容: .storybook/preview.js数字 :

addParameters({
    withPseudo: {
        prefix: "still-pseudo-states--",
    },
});

拥有 Webpack 配置( 但随 PostCs 自动生成)

当您已经配置了自己的网页包配置, 但仍想要使用此附加 加上 PostCSS, 添加 邮箱装入器 给您 网络包配置.

注意事项数字 : 当使用 CSS- Modules 时, 你必须小心不要 [hash] 用作 本地标识Name 在你身边 装弹机 选项.

module.exports = {
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              // ATTENTION when using css modules
              modules: {
                // !!! must not use [hash]'
                localIdentName: '[path][name]__[local]',
              },
            },
          },
          // Add loader here
          {
            loader: 'postcss-loader',
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
    ],
  },
};

值得一提的是,您必须启用 Postcs-peudo 类模块 postcss.config.js

module.exports = {
  plugins: {
    'postcss-pseudo-classes': {
      // prefix: 'pseudoclass--',
    },
  },
};

module.exports = {
  plugins: {
    'postcss-pseudo-classes': {
      prefix: 'pseudoclass-example-prefix',
    },
  },
};

手动

当您不想为您创建假课时,您可以提供 您自己的规则, 插件用于您的 css 类.

默认情况下,加词中用于查找 cs 类的前缀是 \:。 。 。 . 要添加所需的样式, 您必须添加包含 prefix + 键 pseudostate 一个人.

例如: 当你想要时 盘旋 财务报告和审定财务报表 焦点 状态由插件显示,您 必须添加 \:hover 财务报告和审定财务报表 \:focus 自己来上课.

对于默认的前缀, 这可能看起来是这样 :

.element {
  //element styling

  &:hover,
  &\:hover {
    // hover styling
  }
}

// in your story
parameters: {
    withPseudo: {
        selector: "element",
        prefix: "pseudoclass--"
    }
}

.element {
  //element styling

  &:hover,
  &.pseudoclass--hover {
    // hover styling
  }
}

带有 Elenti.js 的 Bail 插件

如果您使用 情绪. js 样式,您可能会考虑使用 贝亚尔-插图-故事手册-addon-pseudo-states-emotion这将为您的组件创建伪类.

{
  "plugins": ["babel-plugin-storybook-addon-pseudo-states-emotion"]
}

{
  "plugins": [
    [
      "babel-plugin-storybook-addon-pseudo-states-emotion",
      {"prefix": "pseudoclass--" }
    ]
  ]
}

显示/ 隐藏工具栏按钮

您可以启用一个工具栏按钮来切换预览区域的 Pseudo 状态 .

见 框架支助 哪个框架支持此特性.

启用按钮, 将它添加到您的附加配置文件( 位于 Storybook 配置目录中)

import "@ergosign/storybook-addon-pseudo-states-react/register";

module.exports = {
  "addons": [
    '@ergosign/storybook-addon-pseudo-states-react/register'
  ]
}

使用量

警告数字 : withPseudo 应始终是您 decorators 数组,因为它改变故事的模板.

常规

组件故事格式( CSF, 建议)

import { withPseudo } from '@ergosign/storybook-addon-pseudo-states-react';

const section = {
  title: 'Button',
  decorators: [withPseudo],
  parameters: {
    withPseudo: { selector: 'button' },
  },
};
export default section;

export const Story = () => {
  return {
    component: ButtonComponent,
  };
};

格式的故事

import { withPseudo } from '@ergosign/storybook-addon-pseudo-states-react';

storiesOf('Button', module)
  .addDecorator(withPseudo)
  .addParameters({
    withPseudo: {
      selector: 'button', // css selector of pseudo state's host element
      pseudos: ['focus', 'hover', 'hover & focus', 'active'],
      attributes: ['disabled', 'readonly', 'error'],
    },
  })
  .add('Icon Button', () => <Button />);

有一个默认配置 selector, (中文(简体) ), pseudos 财务报告和审定财务报表 attributes因此,你可以离开 withPseudo 选项为空.

参数类型( T)

见 类型