故事
显示带控件的组件。
Callout
介绍
🌐 Introduction
你可以使用 Fumadocs Story 来展示和记录组件。它是一个简单、以文档为中心的 Storybook 替代方案，主要用于组件库。
🌐 You can use Fumadocs Story to display & document components. It is a simple, docs-focused alternative of Storybook, it is mainly designed for component libraries.
如果你对故事（Story）的概念不熟悉，这里有一段来自 Storybook 文档的简短说明：
🌐 If you are new to the concept of Story, this is a short explanation from Storybook docs:
一个故事捕捉了 UI 组件的渲染状态。它是一个带有注解的对象，这些注解描述了在给定一组参数下组件的行为和外观。
什么时候应使用它而不是 Storybook？
Fumadocs Story 不是 Storybook 的替代品，我们仍然推荐使用 Storybook 进行正规的 UI 测试。
🌐 Fumadocs Story is not a replacement for Storybook, we still recommend Storybook for proper UI testing.
安装
🌐 Installation
根据你的设置按照安装指南操作：
🌐 Follow the installation guide according to your setup:
配置
🌐 Configurations
变体
🌐 Variants
你可以使用 args 提供该组件的多个变体：
🌐 You can provide multiple variants of the component with args:
import { defineStory } from '@/lib/story';
import { Callout } from '@/components/callout';
export const story = defineStory(import.meta.url, {
Component: Callout,
args: [
{
variant: 'Default',
initial: {
title: 'This is a Callout',
},
},
{
variant: 'Warning',
initial: {
title: 'This is a Callout',
},
// fixed values for props
fixed: {
type: 'warning',
},
},
],
});controls
你可以进一步自定义控件的生成方式：
🌐 You can further customise on how the controls are generated:
import { defineStory } from '@fumadocs/story';
import { GraphView } from '@/components/graph-view';
export const story = defineStory(import.meta.url, {
Component: GraphView,
args: {
// specify the control nodes
controls: {
node: {
type: 'object',
properties: [],
},
},
// or customise the generated controls
controls: {
transform: (node) => node,
},
},
});Last updated on