CSF3 คืออะไร?

Component Story Format 3 เป็นมาตรฐานล่าสุดสำหรับ Storybook โดยใช้การส่งออกแบบอิงวัตถุแทน `storiesOf` หรือเทมเพลตฟังก์ชันแบบเดิม ช่วยลด boilerplate และปรับปรุงความเข้ากันได้กับเครื่องมือทดสอบ

เครื่องมือนี้รองรับ TypeScript หรือไม่?

ใช่ ผลลัพธ์ที่สร้างขึ้นประกอบด้วยอินเทอร์เฟซ TypeScript มาตรฐานและคำจำกัดความประเภทสำหรับ `Meta` และ `StoryObj` เพื่อให้มั่นใจถึงความปลอดภัยของประเภทภายใน IDE ของคุณ

ฉันสามารถเพิ่มหลายเรื่องพร้อมกันได้หรือไม่?

เครื่องมือนี้สร้างไฟล์ฐานพร้อมกับ Primary story คุณสามารถคัดลอกออบเจกต์ story ด้วยตนเองใน Editor ของคุณเพื่อสร้างรูปแบบต่างๆ เช่น สถานะ 'Disabled' หรือ 'Loading'

โค้ดคอมโพเนนต์ของฉันถูกอัปโหลดหรือไม่?

ไม่ ตัวสร้างทำงานโดยรับข้อมูลเมตาที่คุณให้มาและจัดรูปแบบเป็นสตริง ไม่มีไฟล์ใดถูกอัปโหลดและไม่มีการวิเคราะห์โค้ดใดๆ ทำบนเซิร์ฟเวอร์

ตัวจัดรูปแบบและโค้ด

ตัวสร้าง 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.

ดูทั้งหมดใน ตัวจัดรูปแบบและโค้ด