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-knobs，而是在 Storybook 核心分发版中继续发布 knobs，直到 7.0。这将使我们有时间根据用户反馈改进控件，并为 knobs 用户提供充足的时间进行迁移。
如果您以某种方式绑定到 knobs 或更喜欢 knobs 界面，我们很乐意为 knobs 项目接收维护者。如果您对此感兴趣，请在 #contributing Discord 频道联系我们。
如何从 addon-knobs 迁移？
如果您已经在使用 Storybook Knobs，您应该考虑迁移到 Controls。
您可能正在将其用于可以通过 上面描述的 其中一个案例来解决的事情。
让我们逐步介绍两个示例：将 knobs 迁移到自动生成的 args 和将 knobs 迁移到自定义 args。
首先，让我们考虑一个基本的填充组件 props 的 knobs 版本的故事
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,
},
},
};
我的控件没有自动生成。我该怎么办？
有几个已知的 cases 无法自动生成控件。
- 您正在使用一个不支持自动生成的框架 不支持自动生成的框架
- 您正在尝试为在外部库中定义的组件生成控件
通过少量的手动操作，您仍然可以在这些情况下使用控件。考虑以下示例
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 提供了在这些不支持的 cases 中生成控件所需的提示。有关控件类型的完整列表，请参阅 控件注释。
您的 Storybook 也可能配置错误。如果您认为可能是这种情况，请在 Storybook 的 Github issues 中搜索，如果您没有找到与您的用例匹配的问题，请创建一个新问题。
如何为特定故事的某些字段禁用控件？
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 时，控件的工作方式相同。有关示例，请参阅 文档。
