Storybook Addon 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 addon REM 开发

运行 build:watch 进程

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 工具栏。