代码面板

代码面板是 Storysource 插件的替代品，该插件已在 Storybook 9 中停止支持。

代码面板在画布中查看故事时会渲染该故事的源代码。故事中定义的任何 args 都将被替换为它们在输出中的值。

Code panel showing story's source code

用法

要启用代码面板，请将 parameters.docs.codePanel 设置为 true。对于大多数项目，最好在 .storybook/preview.js|ts 文件中进行设置，以应用于所有故事。

.storybook/preview.ts

// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)
import type { Preview } from '@storybook/your-framework';
 
const preview: Preview = {
  parameters: {
    docs: {
      codePanel: true,
    },
  },
};
 
export default preview;

您也可以在组件或故事级别启用它

Button.stories.ts|tsx

import type { Meta, StoryObj } from '@storybook/react-vite';
 
import { Button } from './Button';
 
const meta = {
  component: Button,
  parameters: {
    docs: {
      // 👇 Enable Code panel for all stories in this file
      codePanel: true,
    },
  },
} satisfies Meta<typeof Button>;
export default meta;
 
type Story = StoryObj<typeof meta>;
 
// 👇 This story will display the Code panel
export const Primary: Story = {
  args: {
    children: 'Button',
  },
};
 
export const Secondary: Story = {
  args: {
    children: 'Button',
    variant: 'secondary',
  },
  parameters: {
    docs: {
      // 👇 Disable Code panel for this specific story
      codePanel: false,
    },
  },
};

配置

代码面板渲染的片段与 Source 文档块相同，后者也用于 Autodocs 页面。该片段是可自定义的，并重用了 Source 配置参数。