Storybook 插件 REM

一个 Storybook 插件，帮助您测试 REM 尺寸组件的行为。

为什么以及何时使用 REM

Aleksandr Hovhannisyan 撰写了一篇关于 字体大小使用 REM 的精彩文章。如果您想了解更多关于此 CSS 单位的信息，请查看。

入门

安装插件

npm i storybook-addon-rem --dev

将以下内容添加到 .storybook/main.(js|mjs|cjs) 文件中

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

在您的组件样式中添加一些 css rem 声明，例如：

.your-component-button {
  font-size: 1rem;
}

运行您的 Storybook 实例。您应该能够在工具栏中看到并使用此插件 🚀

配置

自定义尺寸

如果您想传递自定义尺寸，您可以在 .storybook/preview.(js|mjs|cjs) 文件中添加类似以下内容

export const parameters = {
  // ...
  rem: {
    // ...
    sizes: [
      { value: 6, title: 'Tiny' },
      { value: 12, title: 'Standard' },
      { value: 72, title: 'Huge' },
    ]
  },
}

默认填充

默认情况下，storybook-rem-addon 会移除画布和文档页面上的 Storybook rem 填充。如果您想保留 rem 填充，可以在 .storybook/preview.(js|mjs|cjs) 文件中进行配置

export const parameters = {
  // ...
  rem: {
    // ...
    canvasRemPadding: true,
    docsRemPadding: true,
  }
};

事件

您可以通过插件通道监听 rem-update 事件

const channel = api.getChannel();

// On mount
useEffect(() => {
  channel.addListener( 'rem-update', onRemUpdate );

  return () => {

    // On unmount
    channel.removeListener( 'rem-update', onRemUpdate );
  };
});

const onRemUpdate = ( data ) => {
  console.log( data.title, data.value );
}

Storybook 插件 REM 开发

运行构建：监视进程

npm build:watch

打开第二个终端。转到 examples/basic

cd example/basic/

这是一个简单的 Storybook 设置，其中集成了此插件。使用以下命令安装依赖项：

npm i

然后使用以下命令启动 Storybook：

npm run storybook

注意：此 Storybook 实例需要低于 18 的 Node 版本。如果需要：安装 NVM 并切换到较低的 Nodejs 版本，例如 v16.19.0，也称为 lts/gallium

nvm i lts/gallium
nvm use lts/gallium

路线图

• 集成 Storybook 事件
• 更新图标

备注

• 代码结构很大程度上受到 storybook-dark-mode 的启发。我学到了很多并进行了调整 ❤️
• 感谢 @storybook/a11y 存储库展示了如何使用工具提示实现 Storybook 工具栏。