控件

观看视频教程

可以使用 Controls 块显示给定故事的参数动态表格，作为一种记录其接口的方式，并允许您更改单独渲染的故事的参数（通过 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 配置选项关闭内联故事的情况下，Controls 文档块才会具有功能性 UI 控件。

Controls

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']} />

上面的示例在组件（或元数据）级别应用了参数，但它也可以在项目或故事级别应用。

此 API 配置文档页面中使用的 Controls 块。要配置 Controls 插件面板，请参阅 Controls 插件文档。要配置单个控件，您可以为每个控件指定 argTypes。

`exclude`

类型：string[] | RegExp

默认值：parameters.docs.controls.exclude

指定要从参数表中排除的控件。任何名称与正则表达式匹配或属于数组一部分的控件都将被排除在外。

`include`

类型：string[] | RegExp

默认值：parameters.docs.controls.include

指定要包含在参数表中的控件。任何名称与正则表达式不匹配或不属于数组一部分的控件都将被排除在外。

`of`

类型：Story 导出或 CSF 文件导出

指定要从中获取控件的故事。如果提供了 CSF 文件导出，它将使用文件中的主要（第一个）故事。

`sort`

类型：'none' | 'alpha' | 'requiredFirst'

默认值：parameters.docs.controls.sort 或 'none'

指定控件的排序方式。

**none**：未排序，按控件处理的顺序显示
alpha：按参数类型的名称按字母顺序排序
requiredFirst：与alpha相同，但任何必需的控件都将首先显示