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 的节点版本。如果需要，安装NVM 并切换到更低版本的 nodejs，例如 v16.19.0，也称为 lts/gallium

nvm i lts/gallium
nvm use lts/gallium

路线图

• 集成 Storybook 事件
• 更新图标

备注

• 代码结构很大程度上借鉴了 storybook-dark-mode。我学习并借鉴了很多 ❤️
• 感谢 @storybook/a11y 仓库展示了如何实现带有工具提示的 Storybook 工具栏。