Taffy

Taffy 是 Storybook 的響應式視窗外掛。此擴充套件的靈感主要來自 Ish，這是 Pattern Lab 中內建的精美調整工具，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 控制項，以及故事預覽右側的調整大小手柄。