Next.js

安装

🌐 Installation

npm i @fumadocs/story

添加 Tailwind CSS 预设。

🌐 Add the Tailwind CSS preset.

Tailwind CSS

@import '@fumadocs/story/css/preset.css';

创建一个故事

🌐 Create a Story

创建一个故事工厂来存储你的全局设置：

🌐 Create a story factory to store your global settings:

lib/story.ts

import { createFileSystemCache, defineStoryFactory } from '@fumadocs/story';

export const { defineStory } = defineStoryFactory({
  // for Vercel, this is required: choose a directory for cache.
  cache:
    process.env.NODE_ENV === 'production'
      ? createFileSystemCache('.next/fumadocs-story')
      : undefined,

  tsc: {
    // we use tsc to generate controls from types
    // you can pass TypeScript options here
  },
});

现在开始创建你的第一个故事：

🌐 Now create your first story:

import { defineStory } from '@/lib/story';
import { MyComponent } from './my-component';

export const story = defineStory(import.meta.url, {
  Component: MyComponent,
  args: {
    // default props (recommended)
    initial: {},
  },
});

该故事必须在服务器组件中定义。
故事必须导出为 story，或者必须将 name 选项设置为与导出名称匹配。
将 Component 选项填入你的组件，传入的组件必须是客户端组件。

现在你可以这样呈现故事：

🌐 Now you can render the story like:

index.mdx

import { story } from '@/components/my-component.story';

## Overview

Preview for component:

<story.WithControl />

安装

创建一个故事

On this page