ArgTypes
ArgTypes
文档块可用于显示给定组件的 arg 类型静态表格,作为记录其接口的一种方式。
如果您正在寻找一个动态表格,用于显示 Story 当前的 arg 值并支持用户修改它们,请参阅 Controls
文档块。
import { Meta, ArgTypes } from '@storybook/addon-docs/blocks';
import * as ButtonStories from './Button.stories';
<Meta of={ButtonStories} />
<ArgTypes of={ButtonStories} />
ArgTypes
import { ArgTypes } from '@storybook/addon-docs/blocks';
使用 props 和 parameters 进行配置
ℹ️ 与大多数文档块一样,ArgTypes
文档块在 MDX 中通过 props 进行配置。许多这些 props 的默认值来源于文档块命名空间 parameters.docs.argTypes
中的相应 parameter。
以下 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;
<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
类型:Story 导出或 CSF 文件导出
指定要从哪个 Story 获取 arg 类型。如果提供了 CSF 文件导出,将使用文件中的主要(第一个) Story。
sort
类型:'none' | 'alpha' | 'requiredFirst'
默认值:parameters.docs.argTypes.sort
或 'none'
指定 arg 类型的排序方式。
- none:不排序,按照 arg 类型处理的顺序显示
- alpha:按字母顺序排序,按照 arg 类型的名称排序
- requiredFirst:与
alpha
相同,但任何必需的 arg 类型优先显示