Controls

“控件”块可用于显示给定故事的动态参数表，以记录其接口，并允许您更改（单独）渲染的故事的参数（通过“故事”或“画布”块）。

如果您正在寻找一个静态表，显示组件的参数类型而没有控件，请改用“参数类型”块。

Screenshot of Controls block

ButtonDocs.mdx

import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
import * as ButtonStories from './Button.stories'
 
<Meta of={ButtonStories} />
 
<Canvas of={ButtonStories.Primary} />
 
<Controls of={ButtonStories.Primary} />

只有当您没有使用“内联”配置选项禁用内联故事时，“控件”文档块才会有可用的 UI 控件。

控件

import { Controls } from '@storybook/addon-docs/blocks';

使用 props **和** 参数进行配置

ℹ️ 与大多数块一样，“控件”块通过 MDX 中的 props 进行配置。其中许多 props 的默认值来自块命名空间中的相应参数，即parameters.docs.controls。

以下 exclude 配置是等效的

Button.stories.ts|tsx

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { Meta } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta = {
  component: Button,
  parameters: {
    docs: {
      controls: { exclude: ['style'] },
    },
  },
} satisfies Meta<typeof Button>;
 
export default meta;

ButtonDocs.mdx

<Controls of={ButtonStories} exclude={['style']} />

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

此 API 配置文档页面中使用的“控件”块。要配置控件面板，请参阅功能文档。要配置单个控件，请为每个控件指定参数类型。

`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：按字母顺序排序，按 arg 名称排序
requiredFirst：与 alpha 相同，但任何必需的控件会显示在前面