立即开始
Docs
Storybook Docs

控件

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/addon-docs/blocks';
import * as ButtonStories from './Button.stories'
 
<Meta of={ButtonStories} />
 
<Canvas of={ButtonStories.Primary} />
 
<Controls of={ButtonStories.Primary} />

只有当你未使用 inline 配置选项关闭内联故事时，控件文档块才会包含可用的 UI 控件。

¥The Controls doc block will only have functioning UI controls if you haven't turned off inline stories with the inline configuration option.

控件

¥Controls

import { Controls } from '@storybook/addon-docs/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 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']} />

上面的示例在 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 用于配置文档页面中使用的 Controls 块。要配置“控件”面板，请参阅 功能文档。要配置单个控件，请为每个控件指定 argTypes。

¥This API configures the Controls blocks used within docs pages. To configure the Controls panel, see the feature documentation. To configure individual controls, 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