擴充套件知識庫

一旦您瞭解撰寫擴充套件的基本知識後，就可以進行各種常見的增強功能，讓您的擴充套件更好。此頁面詳細介紹了關於擴充套件建立的其他資訊。在建立自己的擴充套件時，請將其用作快速參考指南。

停用擴充套件面板

可以針對特定的 Story 停用擴充套件面板。

若要做到這一點，您需要在註冊面板時傳遞 paramKey 元素

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 時，您可以傳遞停用的參數。

// 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 作為屬性接收主題。 深入瞭解主題設定。

Storybook 元件

擴充套件作者可以使用任何 React 程式庫來開發其 UI。但我們建議在 @storybook/components 中使用 Storybook 的 UI 元件，以便更快地建置擴充套件。當您使用 Storybook 元件時，您可以獲得

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

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

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

建置系統

當您將擴充套件開發為套件時，您無法使用 npm link 將其新增至您的專案。將您的擴充套件以本機相依性的形式列入您的 package.json 中

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

熱模組替換

在開發擴充套件時，您可以設定 HMR (熱模組替換) 來反映所做的變更。

獨立的 Storybook 附加元件

如果您正在開發獨立的附加元件，請在 package.json 中新增一個腳本，內容如下：

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

本機 Storybook 附加元件

如果您正在開發基於現有 Storybook 安裝的本機 Storybook 附加元件，則 HMR（熱模組替換）已開箱即用。

在預設集中組合附加元件

如果您正在開發一個預設集，該預設集載入您無法控制的第三方附加元件，並且您需要存取某些功能（例如，裝飾器）或提供其他設定。在這種情況下，您需要將預設集更新為以下內容，以允許您載入和設定其他附加元件

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,
};

如果您可以控制要自訂的附加元件。在這種情況下，您可以更新您的預設集，並實作一個自訂函式來載入任何其他預設集並提供必要的設定，類似於在Essentials 附加元件中的實作方式。