组件故事格式 3 是 Storybook 的最新标准，使用基于对象的导出而不是旧的 `storiesOf` 或函数模板。它减少了样板代码并提高了与测试工具的兼容性。

此工具支持 TypeScript 吗？

是的。生成的输出包括标准的 TypeScript 接口以及 `Meta` 和 `StoryObj` 的类型定义，以确保您的 IDE 中的类型安全。

我可以一次添加多个故事吗？

此工具生成一个包含主要故事的基础文件。您可以在编辑器中手动复制故事对象，以创建诸如“禁用”或“加载”状态等变体。

我的组件代码是否已上传？

不会。生成器通过获取您提供的元数据并将其格式化为字符串来工作；没有文件被上传，也没有在服务器上执行代码分析。

格式化与代码

Storybook Story 生成器

CSF3 .stories.tsx file from a component name and props.

Runs in your browser

ComponentDefault args (key: value, one per line)Variants (comma-separated)

Button.stories.tsx

import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./Button";

const meta: Meta<typeof Button> = {
  component: Button,
  title: "Components/Button",
  args: {
  variant: 'primary',
  size: 'md',
  children: 'Click me',
  },
  argTypes: {
    variant: { control: "select", options: ["primary", "secondary", "ghost"] },
  },
};
export default meta;

type Story = StoryObj<typeof Button>;

export const Default: Story = {};

export const Primary: Story = {
  args: { variant: "primary" },
};
export const Secondary: Story = {
  args: { variant: "secondary" },
};
export const Ghost: Story = {
  args: { variant: "ghost" },
};

lines: 31chars: 653size: 653 B

live

编辑注

Understanding · One story per component state.

本深度章节目前仅有英文版本。上方的转换工具支持您的语言;长篇说明文章尚未翻译。

常见问题

Quick answers.

›What is CSF3?

Component Story Format 3 is the latest standard for Storybook, using object-based exports rather than the older `storiesOf` or functional templates. It reduces boilerplate and improves compatibility with testing tools.

›Does this tool support TypeScript?

Yes. The generated output includes standard TypeScript interfaces and type definitions for `Meta` and `StoryObj` to ensure type safety within your IDE.

›Can I add multiple stories at once?

This tool generates a base file with a Primary story. You can manually duplicate the story object in your editor to create variations like 'Disabled' or 'Loading' states.

›Is my component code uploaded?

No. The generator works by taking the metadata you provide and formatting it into a string; no files are uploaded and no code analysis is performed on a server.

大家也在搜索

More in this room.

查看所有格式化与代码