Storybook 控制項擴充功能
Storybook 控制項提供您一個圖形化使用者介面，讓您無需編寫程式碼即可動態與元件的參數互動。它會在您的元件範例（「故事」）旁邊建立一個擴充功能面板，讓您可以即時編輯它們。
安裝
控制項是 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，而會繼續在 7.0 版本之前與 Storybook 核心發行一起發布 knobs。這會給我們時間根據使用者回饋改進控制項，並讓 knobs 使用者有充足的時間遷移。
如果您因某種原因綁定到 knobs 或更喜歡 knobs 介面，我們很樂意接受 knobs 專案的維護者。如果您對此感興趣，請在 #contributing Discord 頻道中與我們聯繫。
如何從 addon-knobs 遷移？
如果您已經在使用 Storybook Knobs，您應該考慮遷移到控制項。
您可能將它用於可以滿足上述情況之一的功能。
讓我們逐步了解兩個範例：將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 時，控制項的運作方式會相同。請參閱文件以取得範例。
