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 迁移到自动生成的 args 和将 knobs 迁移到自定义 args。
首先，让我们考虑一个 knobs 版本的基本故事，它填写组件的 props
import { text } from '@storybook/addon-knobs';
import { Button } from './Button';
export const Basic = () => <Button label={text('Label', 'hello')} />;
这根据一个 knob 填写 Button 的标签，这正是上面 自动生成 的用例。因此，我们可以使用自动生成的 args 重写它
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}`} />
))}
</>
);
};
同样，如上所述，这可以使用 完全自定义的 args 重写
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 时，控件的工作方式相同。请参阅 文档 以获取示例。
