Taffy

Taffy 是 Storybook 的响应式视窗附加组件。这个附加组件的灵感很大程度上来自 Ish，这是一个内置于 Pattern Lab 的令人愉快的调整器， Brad Frost 的原子设计可视化工具和静态网站生成器。

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

• 通过视窗右侧的可拖动把手进行动态调整大小
• 通过像素或 em 值输入进行精确调整大小
• 一键式小型、中型和大型断点按钮，将视窗调整到每个范围内的随机宽度。
• 全屏视图。
• 支持在 Storybook 文档选项卡内调整大小

安装

在项目中安装以下 npm 模块

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

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

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

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

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

addDecorator(withTaffy);

就是这样！重新启动 Storybook 构建，你应该在工具栏中看到 Taffy 控件，以及故事预览右侧的调整大小把手。