Taffy

Taffy 是一个用于 Storybook 的响应式视口插件。这个插件深受 Ish 的启发，Ish 是由 Brad Frost 创建的原子设计可视化工具和静态站点生成器 Pattern Lab 中内置的令人愉快的尺寸调整器。

尽管市面上还有其他 Storybook 尺寸调整器，但 Taffy 带来了一些很棒的新功能，包括

• 通过视口右侧的可拖动句柄动态调整大小
• 通过数值输入进行精确调整，支持像素或 em 单位
• 一键式的小、中、大断点按钮，可将视口调整到每个范围内随机宽度。
• 全屏视图。
• 支持在 Storybook Docs 标签页内调整大小

安装

在你的项目中安装以下 npm 模块

npm i --save-dev @degjs/storybook-addon-taffy

然后，在 .storybook/main.js 的 addons 数组中注册该插件

module.exports = {
    ...
    addons: [
        '@degjs/storybook-addon-taffy/register'
    ]
};

最后，在 .storybook/preview.js 中导入 withTaffy 并添加装饰器，如下所示

import { addDecorator } from '@storybook/react';
import { withTaffy } from '@degjs/storybook-addon-taffy';

addDecorator(withTaffy);

就是这样！重新启动你的 Storybook 构建，你应该会在工具栏中看到 Taffy 的控件，以及在你的故事预览右侧看到一个尺寸调整句柄。