Component Story Format 3 là tiêu chuẩn mới nhất cho Storybook, sử dụng xuất dựa trên đối tượng thay vì `storiesOf` cũ hơn hoặc các template chức năng. Nó giảm mã lặp lại và cải thiện khả năng tương thích với các công cụ kiểm thử.

Công cụ này có hỗ trợ TypeScript không?

Có. Đầu ra được tạo bao gồm các interface TypeScript tiêu chuẩn và định nghĩa kiểu cho `Meta` và `StoryObj` để đảm bảo an toàn kiểu trong IDE của bạn.

Tôi có thể thêm nhiều story cùng lúc không?

Công cụ này tạo một tệp cơ sở với một story Chính. Bạn có thể sao chép đối tượng story theo cách thủ công trong trình chỉnh sửa của mình để tạo các biến thể như trạng thái 'Disabled' hoặc 'Loading'.

Mã component của tôi có được tải lên không?

Không. Trình tạo hoạt động bằng cách lấy siêu dữ liệu bạn cung cấp và định dạng nó thành một chuỗi; không có tệp nào được tải lên và không có phân tích mã nào được thực hiện trên máy chủ.

Công cụ định dạng & Mã

Trình tạo 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

Ghi chú của biên tập viên

Understanding · One story per component state.

Chương phân tích chuyên sâu này hiện chỉ có sẵn bằng tiếng Anh. Công cụ chuyển đổi ở trên hoạt động bằng ngôn ngữ của bạn; bài viết giải thích dài chưa được dịch.

Các câu hỏi thường gặp

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.

Mọi người cũng tìm kiếm

Công cụ liên quan

More in this room.

Xem tất cả trong Công cụ định dạng & Mã