Storybook Addon REM

一个 Storybook 插件，帮助你测试你的 REM 大小组件的行为。

为何以及何时使用 REM

Aleksandr Hovhannisyan 写了一篇关于 rems 作为字体大小 的很棒的文章。如果你想了解更多关于这个 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 在 canvas 和 docs 页面上的 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 工具栏。