控制項

觀看影片教學

Controls 區塊可用於顯示給定 story 的動態 args 表格，作為記錄其介面的方式，並允許您變更（單獨）呈現的 story 的 args（透過 Story 或 Canvas 區塊）。

如果您正在尋找一個靜態表格，顯示元件的 arg 類型但沒有控制項，請參閱 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 設定選項關閉內嵌 story，則「控制項」文件區塊才會具有可運作的 UI 控制項。

控制項

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

使用 props 和參數設定

ℹ️ 與大多數區塊一樣，Controls 區塊是在 MDX 中使用 props 設定的。許多這些 props 的預設值都是從區塊命名空間 parameters.docs.controls 中對應的參數衍生而來。

以下 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）層級套用參數，但它也可以套用在專案或story層級。

此 API 設定在文件頁面中使用的「控制項」區塊。若要設定「控制項」擴充功能面板，請參閱「控制項」擴充功能文件。若要設定個別控制項，您可以為每個控制項指定 argTypes。

`exclude`

類型：string[] | RegExp

預設值：parameters.docs.controls.exclude

指定要從 args 表格中排除的控制項。名稱與正規表示式比對或屬於陣列的任何控制項都將被省略。

`include`

類型：string[] | RegExp

預設值：parameters.docs.controls.include

指定要在 args 表格中包含的控制項。名稱與正規表示式不符或不屬於陣列的任何控制項都將被省略。

`of`

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

指定要從哪個 story 取得控制項。如果提供 CSF 檔案匯出，則會使用檔案中的主要（第一個）story。

`sort`

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

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

指定如何排序控制項。

none：不排序，按照控制項被處理的順序顯示
alpha：按字母順序排序，依據參數類型的名稱
requiredFirst：與 alpha 相同，但任何必要的控制項會優先顯示