Docs
Storybook Docs

ArgTypes

Watch a video tutorial

ArgTypes 块可用于显示给定组件的 参数类型 静态表，作为记录其接口的一种方式。

¥The ArgTypes block can be used to show a static table of arg types for a given component, as a way to document its interface.

如果你正在寻找一个动态表，该表显示故事的当前参数值并支持用户更改它们，请参阅 Controls 块。

¥If you’re looking for a dynamic table that shows a story’s current arg values for a story and supports users changing them, see the Controls block instead.

Screenshot of ArgTypes block

{/* ButtonDocs.mdx */}
 
import { Meta, ArgTypes } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';
 
<Meta of={ButtonStories} />
 
<ArgTypes of={ButtonStories} />

ArgTypes

import { ArgTypes } from '@storybook/blocks';
Configuring with props and parameters

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

¥ℹ️ Like most blocks, the ArgTypes 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.argTypes.

以下 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 */}
 
<ArgTypes 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.

exclude

类型：string[] | RegExp

¥Type: string[] | RegExp

默认：parameters.docs.argTypes.exclude

¥Default: parameters.docs.argTypes.exclude

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

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

include

类型：string[] | RegExp

¥Type: string[] | RegExp

默认：parameters.docs.argTypes.include

¥Default: parameters.docs.argTypes.include

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

¥Specifies which arg types to include in the args table. Any arg types 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 arg types 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.argTypes.sort 或 'none'

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

指定参数类型的排序方式。

¥Specifies how the arg types are sorted.

  • none:未排序，以处理参数类型的相同顺序显示

    ¥none: Unsorted, displayed in the same order the arg types are processed in

  • alpha：按参数类型的名称按字母顺序排序

    ¥alpha: Sorted alphabetically, by the arg type's name

  • requiredFirst:与 alpha 相同，首先显示任何所需的参数类型

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