Storybook 控制項擴充套件
Storybook 控制項提供您一個圖形化 UI，讓您無需編寫程式碼就能動態地與元件的參數互動。它會在您的元件範例（「故事」）旁建立一個擴充套件面板，讓您可以即時編輯它們。
安裝
控制項是 essentials 的一部分，因此預設會在所有新的 Storybook 中安裝。如果您需要將它新增至您的 Storybook，您可以執行
npm i -D @storybook/addon-controls
然後，將以下內容新增至 .storybook/main.js
export default {
addons: ['@storybook/addon-controls'],
};
使用方式
使用方式已記錄在文件中。
常見問題
這將如何取代 addon-knobs？
Addon-knobs 是 Storybook 最受歡迎的擴充套件之一，每週下載量超過 100 萬次，因此我們知道許多使用者會受到此變更的影響。Knobs 也是一個成熟的擴充套件，具有 addon-controls 中沒有的各種選項。
因此，我們不會立即棄用 addon-knobs，而會繼續在 Storybook 核心發行版本中發布 knobs，直到 7.0 版本。這將給我們時間根據使用者回饋改進 Controls，並給 knobs 使用者充足的時間進行遷移。
如果您在某種程度上與 knobs 綁定或偏好 knobs 介面，我們很樂意為 knobs 專案接納維護者。如果您對此有興趣，請在 #contributing Discord 頻道中與我們聯繫。
我該如何從 addon-knobs 遷移？
如果您已經在使用 Storybook Knobs，您應該考慮遷移至 Controls。
您可能將其用於可以使用上述其中一種情況滿足的用途。
讓我們來看兩個範例：將knobs 遷移至自動產生參數，以及將knobs 遷移至自訂參數。
首先，讓我們考慮一個基本故事的 knobs 版本，它會填入元件的 props
import { text } from '@storybook/addon-knobs';
import { Button } from './Button';
export const Basic = () => <Button label={text('Label', 'hello')} />;
這會根據 knob 填入 Button 的標籤，這正是上述自動產生的使用案例。因此，我們可以使用自動產生參數來重寫它
export const Basic = (args) => <Button {...args} />;
Basic.args = { label: 'hello' };
同樣地，我們也可以考慮一個使用 knob 輸入來變更其行為的故事
import { number, text } from '@storybook/addon-knobs';
export const Reflow = () => {
const count = number('Count', 10, { min: 0, max: 100, range: true });
const label = text('Label', 'reflow');
return (
<>
{[...Array(count)].map((_, i) => (
<Button key={i} label={`button ${i}`} />
))}
</>
);
};
再次地，如同上述，可以使用完全自訂參數來重寫
export const Reflow = ({ count, label, ...args }) => (
<>
{[...Array(count)].map((_, i) => (
<Button key={i} label={`${label} ${i}`} {...args} />
))}
</>
);
Reflow.args = {
count: 3,
label: 'reflow',
};
Reflow.argTypes = {
count: {
control: {
type: 'range',
min: 0,
max: 20,
},
},
};
我的控制項沒有自動產生。我該怎麼做？
在某些已知情況下，無法自動產生控制項
- 您使用的是自動產生不支援的框架
- 您正在嘗試為外部函式庫中定義的元件產生控制項
透過一些手動操作，您仍然可以在這種情況下使用控制項。請看以下範例
import { Button } from 'some-external-library';
export default {
title: 'Button',
argTypes: {
label: { control: 'text' },
borderWidth: { control: { type: 'number', min: 0, max: 10 } },
},
};
export const Basic = (args) => <Button {...args} />;
Basic.args = {
label: 'hello',
borderWidth: 1,
};
argTypes 註解（如果需要，也可以應用於個別故事）會為 Storybook 提供在這些不支援的情況下產生控制項所需的提示。請參閱控制項註解以取得控制項類型的完整清單。
您的 Storybook 也可能設定錯誤。如果您認為可能是這種情況，請搜尋 Storybook 的 Github 問題，如果沒有找到符合您使用案例的問題，請提交一個新問題。
我如何為特定故事的某些欄位停用控制項？
argTypes 註解可以用於隱藏特定列的控制項，甚至隱藏列。
假設您有一個具有 borderWidth 和 label 屬性（自動產生或其他）的 Button 元件，而且您想要完全隱藏 borderWidth 列，並停用特定故事的 label 列的控制項。以下說明您該如何做
import { Button } from 'button';
export default {
title: 'Button',
component: Button,
};
export const CustomControls = (args) => <Button {...args} />;
CustomControls.argTypes = {
borderWidth: { table: { disable: true } },
label: { control: { disable: true } },
};
如同故事參數，args 和 argTypes 註解會以階層方式合併，因此故事層級的註解會覆寫元件層級的註解。
控制項如何與 MDX 搭配使用？
從您的 CSF 檔案將故事匯入 MDX 時，控制項的運作方式會相同。請參閱文件中的範例。
