加入在线会议:美国东部时间周四上午 11 点,Storybook 9 发布 & AMA

渲染模式

一个 Storybook 插件,用于模拟故事(story)的渲染模式(CSS 用户偏好)

在 Github 上查看

Storybook 渲染模式插件

这个插件增加了模拟用户 CSS 渲染偏好(例如 prefers-reduced-motion 及其他)的功能。此插件支持 Storybook v8+。

最初是从 storybook-addon-css-user-prefs 分支出来以支持 sb@^8.0.0,它也是 @jeysal/storybook-addon-css-user-preferences 的替代品。

支持的模式列表

  • prefers-color-scheme
  • prefers-contrast
  • prefers-reduced-data
  • prefers-reduced-motion
  • prefers-reduced-transparency
  • print (待办)
  • noscript (待办)

安装

  1. 包安装 pnpm add -D storybook-addon-render-modes

  2. 插件注册

const config: StorybookConfig = {
  // ...yourOtherSettings
  addons: [
    'storybook-addon-render-modes',
  ],
};

export default config;

注意事项

这个插件不能强制改变浏览器级别的渲染模式(这似乎不可能)。相反,它使用了一种巧妙的方法:通过 JS 遍历 document.styleSheets 并手动重写媒体样式规则。

在某些情况下,这种方法可能不会按预期工作。请随时为此类情况创建 Issue。