ArgTypes

观看视频教程

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

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

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';

使用 props 和参数进行配置

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

以下 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 */}
 
<ArgTypes of={ButtonStories} exclude={['style']} />

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

`exclude`

类型：string[] | RegExp

默认值：parameters.docs.argTypes.exclude

指定要从 args 表格中排除哪些 arg 类型。任何名称与正则表达式匹配或属于数组一部分的 arg 类型都将被排除在外。

`include`

类型：string[] | RegExp

默认值：parameters.docs.argTypes.include

指定要包含在 args 表格中的哪些 arg 类型。任何名称与正则表达式不匹配或不属于数组一部分的 arg 类型都将被排除在外。

`of`

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

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

`sort`

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

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

指定如何排序 arg 类型。

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