控件

Watch a video tutorial

Controls 块可用于显示给定故事的动态参数表，作为记录其界面的方式，并允许你更改（单独）渲染故事的参数（通过 Story 或 Canvas 块）。

¥The Controls block can be used to show a dynamic table of args for a given story, as a way to document its interface, and to allow you to change the args for a (separately) rendered story (via the Story or Canvas blocks).

如果你正在寻找一个静态表，该表显示没有控件的组件参数类型，请参阅 ArgTypes 块。

¥If you’re looking for a static table that shows a component's arg types with no controls, see the ArgTypes block instead.

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 控件。

¥The Controls doc block will only have functioning UI controls if you have also installed and registered @storybook/addon-controls (included in @storybook/addon-essentials) and haven't turned off inline stories with the inline configuration option.

控件

¥Controls

import { Controls } from '@storybook/blocks';

Configuring with props and parameters

ℹ️ 与大多数块一样，Controls 块在 MDX 中使用 props 配置。其中许多属性的默认值来自块命名空间 parameters.docs.controls 中相应的参数。

¥ℹ️ Like most blocks, the Controls block is configured with props in MDX. Many of those props derive their default value from a corresponding parameter in the block's namespace, parameters.docs.controls.

以下 exclude 配置是等效的：

¥The following exclude configurations are equivalent:

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

上面的示例在 component（或元）级别应用了参数，但它也可以在 project 或 story 级别应用。

¥The example above applied the parameter at the component (or meta) level, but it could also be applied at the project or story level.

此 API 用于配置文档页面中使用的控件块。要配置“控件”插件面板，请参阅控件插件文档。要配置各个控件，你可以为每个控件指定一个 argTypes。

¥This API configures Controls blocks used within docs pages. To configure the Controls addon panel, see the Controls addon docs. To configure individual controls, you can specify argTypes for each.

`exclude`

类型：string[] | RegExp

¥Type: string[] | RegExp

默认：parameters.docs.controls.exclude

¥Default: parameters.docs.controls.exclude

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

¥Specifies which controls to exclude from the args table. Any controls whose names match the regex or are part of the array will be left out.

`include`

类型：string[] | RegExp

¥Type: string[] | RegExp

默认：parameters.docs.controls.include

¥Default: parameters.docs.controls.include

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

¥Specifies which controls to include in the args table. Any controls whose names don't match the regex or are not part of the array will be left out.

`of`

类型：故事导出或 CSF 文件导出

¥Type: Story export or CSF file exports

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

¥Specifies which story to get the controls from. If a CSF file exports is provided, it will use the primary (first) story in the file.

`sort`

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

¥Type: 'none' | 'alpha' | 'requiredFirst'

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

¥Default: parameters.docs.controls.sort or 'none'

指定控件的排序方式。

¥Specifies how the controls are sorted.

none:未排序，以处理控件的相同顺序显示

¥none: Unsorted, displayed in the same order the controls are processed in
alpha：按参数类型的名称按字母顺序排序

¥alpha: Sorted alphabetically, by the arg type's name
requiredFirst:与 alpha 相同，首先显示任何所需的控件

¥requiredFirst: Same as alpha, with any required controls displayed first