Controls

觀看影片教學

Controls 區塊可用於顯示指定 story 的動態 args 表格，作為記錄其介面的一種方式，並讓您變更（分別）渲染 story 的 args（透過 Story 或 Canvas 區塊）。

如果您正在尋找顯示元件 arg types 的靜態表格，且沒有 controls，請改為參閱 ArgTypes 區塊。

Screenshot of Controls block

ButtonDocs.mdx

import { Meta, Canvas, Controls } from '@storybook/blocks';
import * as ButtonStories from './Button.stories'
 
<Meta of={ButtonStories} />
 
<Canvas of={ButtonStories.Primary} />
 
<Controls of={ButtonStories.Primary} />

如果您也安裝並註冊了 @storybook/addon-controls（包含在 @storybook/addon-essentials 中），並且沒有使用 inline 設定選項關閉內聯 stories，Controls 文件區塊才會具有正常運作的 UI controls。

Controls

import { Controls } from '@storybook/blocks';

使用 props 和 parameters 進行設定

ℹ️ 與大多數區塊一樣，Controls 區塊是使用 MDX 中的 props 進行設定。這些 props 的許多預設值都來自區塊命名空間 parameters.docs.controls 中對應的 parameter。

以下 exclude 設定是等效的

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> = {
  component: Button,
  parameters: {
    docs: {
      controls: { exclude: ['style'] },
    },
  },
};
 
export default meta;

ButtonDocs.mdx

<Controls of={ButtonStories} exclude={['style']} />

上面的範例在元件（或 meta）層級套用了 parameter，但它也可以套用在專案或story 層級。

此 API 設定在文件頁面中使用的 Controls 區塊。若要設定 Controls 附加元件面板，請參閱Controls 附加元件文件。若要設定個別的 controls，您可以為每個 control 指定 argTypes。

`exclude`

類型：string[] | RegExp

預設值：parameters.docs.controls.exclude

指定要從 args 表格中排除哪些 controls。名稱符合 regex 或屬於陣列的任何 controls 都將被排除。

`include`

類型：string[] | RegExp

預設值：parameters.docs.controls.include

指定要在 args 表格中包含哪些 controls。名稱不符合 regex 或不屬於陣列的任何 controls 都將被排除。

`of`

類型：Story 匯出或 CSF 檔案匯出

指定要從哪個 story 取得 controls。如果提供 CSF 檔案匯出，它將使用檔案中的主要（第一個）story。

`sort`

類型：'none' | 'alpha' | 'requiredFirst'

預設值：parameters.docs.controls.sort 或 'none'

指定 controls 的排序方式。

none：未排序，以 controls 被處理的相同順序顯示
alpha：依字母順序排序，依 arg type 的名稱
requiredFirst：與 alpha 相同，但任何必要的 controls 會優先顯示