源码

The Source 块用于直接渲染一段源代码。

{/* ButtonDocs.mdx */}
 
import { Meta, Source } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';
 
<Meta of={ButtonStories} />
 
<Source of={ButtonStories.Primary} />

源码

import { Source } from '@storybook/blocks';

// Replace your-framework with the name of your framework
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
};
 
export default meta;
type Story = StoryObj<typeof Button>;
 
export const Basic: Story = {
  parameters: {
    docs: {
      source: { language: 'tsx' },
    },
  },
};

{/* ButtonDocs.mdx */}
 
<Source of={ButtonStories.Basic} language="tsx" />

code

类型: string

默认: parameters.docs.source.code

提供要渲染的源代码。

{/* ButtonDocs.mdx */}
 
import { Meta, Source } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';
 
<Meta of={ButtonStories} />
 
<Source code={`const thisIsCustomSource = true;
if (isSyntaxHighlighted) {
  console.log('syntax highlighting is working');
}`} />

dark

类型: boolean

默认: parameters.docs.source.dark

确定代码段是否以暗黑模式渲染。

excludeDecorators

类型: boolean

默认: parameters.docs.source.excludeDecorators

确定 装饰器 是否在源代码段中渲染。

format

类型: boolean | 'dedent' | BuiltInParserName

默认: parameters.docs.source.format 或 true

指定用于源代码的格式。 true 和 'dedent' 具有相同的效果，即删除任何多余的缩进。 支持所有有效的 prettier 解析器名称。

language

类型

'jsextra' | 'jsx' | 'json' | 'yml' | 'md' | 'bash' | 'css' | 'html' | 'tsx' | 'typescript' | 'graphql'

默认: parameters.docs.source.language 或 'jsx'

指定用于语法高亮的语言。

of

类型: 故事导出

指定渲染哪个故事的源代码。

transform

类型: (code: string, storyContext: StoryContext) => string

默认值: parameters.docs.source.transform

一个函数，用于在渲染前动态转换源代码，基于原始源代码和任何必要的故事情境。返回的字符串将按原样显示。如果同时指定了 code 和 transform，则 transform 将被忽略。

type

类型: 'auto' | 'code' | 'dynamic'

默认值: parameters.docs.source.type 或 'auto'

指定如何渲染源代码。

• auto: 与 dynamic 相同，如果故事的 render 函数接受参数输入，并且 dynamic 受当前使用的框架支持；否则与 code 相同。
• code: 渲染 code 属性 的值，否则渲染静态故事源代码。
• dynamic: 使用动态更新的参数值渲染故事源代码。