Controls
观看视频教程
Controls
代码块可用于显示给定 Story 的 args 动态表,作为记录其接口的一种方式,并允许您更改(单独)渲染的 Story 的 args(通过 Story
或 Canvas
代码块)。
如果您正在寻找一个静态表格,显示组件的 arg types 而没有 controls,请查看 ArgTypes
代码块。
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
配置选项关闭内联 stories,则 Controls 文档块才会有正常工作的 UI controls。
Controls
import { Controls } from '@storybook/blocks';
使用 props 和 parameters 进行配置
ℹ️ 与大多数代码块一样,Controls
代码块在 MDX 中使用 props 进行配置。这些 props 中的许多 props 的默认值都来自代码块命名空间 parameters.docs.controls
中的相应 parameter。
以下 exclude
配置是等效的
// 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;
<Controls of={ButtonStories} exclude={['style']} />
上面的示例在组件(或 meta)级别应用了 parameter,但它也可以应用于项目或 story 级别。
此 API 配置在文档页面中使用的 Controls 代码块。要配置 Controls 插件面板,请参阅 Controls 插件文档。要配置单个 controls,您可以为每个 controls 指定 argTypes
。
exclude
类型: string[] | RegExp
默认值: parameters.docs.controls.exclude
指定要从 args 表中排除哪些 controls。名称与正则表达式匹配或属于数组的任何 controls 都将被排除在外。
include
类型: string[] | RegExp
默认值: parameters.docs.controls.include
指定要在 args 表中包含哪些 controls。名称与正则表达式不匹配或不属于数组的任何 controls 都将被排除在外。
of
类型: Story 导出或 CSF 文件导出
指定从哪个 story 获取 controls。如果提供了 CSF 文件导出,它将使用文件中的主要(第一个)story。
sort
类型: 'none' | 'alpha' | 'requiredFirst'
默认值: parameters.docs.controls.sort
或 'none'
指定 controls 的排序方式。
- none:未排序,以 controls 处理的相同顺序显示
- alpha:按字母顺序排序,按 arg type 的名称
- requiredFirst:与 alpha 相同,任何必需的 controls 优先显示