代码面板
代码面板取代了 Storysource 插件,而 在 Storybook 9 中已停用 是 在 Storybook 9 中已停用 的旧版本。
¥Code Panel is a replacement for the Storysource addon, which was discontinued in Storybook 9.
在画布中查看故事时,代码面板会渲染故事的源代码。故事中定义的任何 args 都将在输出中替换为其值。
¥The Code panel renders a story’s source code when viewing that story in the canvas. Any args defined in the story are replaced with their values in the output.

用法
¥Usage
要启用代码面板,请将 parameters.docs.codePanel 设置为 true。对于大多数项目,最好在 .storybook/preview.js|ts 文件中完成此操作,以便将其应用于所有故事。
¥To enable the Code panel, set parameters.docs.codePanel to true. For most projects, this is best done in the .storybook/preview.js|ts file, to apply to all stories.
// 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;你还可以在组件或故事级别启用它:
¥You can also enable it at the component or story level:
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,
},
},
};配置
¥Configuration
代码面板渲染的代码片段与 源代码文档块 相同,自动文档 页面也使用了相同的代码片段。该代码片段可自定义,并可重复使用 源代码配置参数。
¥Code panel renders the same snippet as the Source docs block, which is also used in Autodocs pages. The snippet is customizable and reuses the Source configuration parameters.
