擴充功能知識庫

一旦您了解撰寫擴充功能的基礎知識後，有許多常見的增強功能可以讓您的擴充功能變得更好。本頁詳細介紹了關於擴充功能建立的額外資訊。在您建立自己的擴充功能時，請將其作為快速參考指南使用。

停用擴充功能面板

可以針對特定的 story 停用擴充功能面板。

為了實現這一點，您需要在註冊面板時傳遞 paramKey 元素

/my-addon/manager.js

addons.register(ADDON_ID, () => {
  addons.add(PANEL_ID, {
    type: types.PANEL,
    title: 'My Addon',
    render: () => <div>Addon tab content</div>,
    paramKey: 'myAddon', // this element
  });
});

然後在新增 story 時，您可以傳遞 disabled 參數。

Button.stories.ts|tsx

// Replace your-framework with the name of your framework
import type { Meta } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  /* 👇 The title prop is optional.
   * See https://storybook.dev.org.tw/docs/configure/#configure-story-loading
   * to learn how to generate automatic titles
   */
  title: 'Button',
  component: Button,
  parameters: {
    myAddon: { disable: true }, // Disables the addon
  },
};
 
export default meta;

為您的擴充功能設定樣式

Storybook 使用 Emotion 進行樣式設定。同時提供您可以自訂的主題！

我們建議使用 Emotion 為您的擴充功能的 UI 元件設定樣式。這讓您可以使用 Storybook 的現用主題，以提供無縫的開發者體驗。如果您不想使用 Emotion，您可以使用內嵌樣式或其他 css-in-js 函式庫。您可以使用 Emotion 的 withTheme HOC，以 prop 的形式接收主題。深入了解主題設定。

Storybook 元件

擴充功能作者可以使用任何 React 函式庫開發他們的 UI。但我們建議在 @storybook/components 中使用 Storybook 的 UI 元件，以更快地建立擴充功能。當您使用 Storybook 元件時，您可以獲得

經過實戰考驗的現成元件
Storybook 原生外觀與風格
內建支援 Storybook 主題設定

在您的下一個擴充功能中使用以下列出的元件。

元件	來源	Story
Action Bar	查看元件實作	查看元件 Story
擴充功能面板	查看元件實作	不適用
Badge	查看元件實作	查看元件 Story
Button	查看元件實作	查看元件 Story
Form	查看元件實作	查看元件 Story
Loader	查看元件實作	查看元件 Story
PlaceHolder	查看元件實作	查看元件 Story
Scroll Area	查看元件實作	查看元件 Story
Space	查看元件實作	查看元件 Story
Syntax Highlighter	查看元件實作	查看元件 Story
Tabs	查看元件實作	查看元件 Story
ToolBar	查看元件實作	不適用
ToolTip	查看元件實作	查看元件 Story
Zoom	查看元件實作	查看元件 Story

除了元件之外，還包含一組 UI 基礎元件。使用以下列出的內容作為為您的擴充功能設定樣式的參考。

元件	來源	Story
色彩調色盤（請參閱下方註釋）	查看實作	查看 Story
Icon	查看實作	查看 Story
排版	查看實作	查看 Story

@storybook/components 實作的色彩調色盤是 @storybook/theming 套件的高階抽象化。

建置系統

當您將擴充功能開發為套件時，您無法使用 npm link 將其新增至您的專案中。請將您的擴充功能作為本機依賴項列在您的 package.json 中

package.json

{
  "dependencies": {
    "@storybook/addon-controls": "file:///home/username/myrepo"
  }
}

執行 yarn 或 npm install 以安裝擴充功能。

熱模組替換

在開發擴充功能時，您可以設定 HMR（熱模組替換）以反映所做的變更。

獨立 Storybook 擴充功能

如果您正在開發獨立擴充功能，請在 package.json 中新增一個包含以下內容的新腳本

package.json

{
  "scripts": {
    "start": "npm run build -- --watch"
  }
}

本機 Storybook 擴充功能

如果您正在開發基於現有 Storybook 安裝的本機 Storybook 擴充功能，則 HMR（熱模組替換）可直接使用。

在 Presets 中組合擴充功能

如果您正在處理一個載入第三方擴充功能的 Preset，而您無法控制這些擴充功能，並且您需要存取某些功能（例如，decorators）或提供額外的設定。在這種情況下，您需要將您的 Preset 更新為以下內容，以允許您載入和設定其他擴充功能

my-preset/index.js

function managerEntries(entry = []) {
  return [...entry, require.resolve('my-other-addon/register')];
}
 
const config = (entry = [], options) => {
  return [...entry, require.resolve('my-other-addon/addDecorator')];
};
 
export default {
  managerEntries,
  config,
};

如果您可以控制您想要自訂的擴充功能。在這種情況下，您可以更新您的 Preset 並實作一個自訂函式，以載入任何額外的 Presets 並提供必要的設定，這與 Essentials 擴充功能中的實作方式類似。