代码面板
代码面板是 Storysource 插件的替代品,该插件在 Storybook 9 中已弃用。
代码面板在 canvas 中查看故事时,会渲染该故事的源代码。故事中定义的任何 args 都会在输出中替换为其值。
用法
要启用代码面板,请将 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 { 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
const Primary: Story = {
args: {
children: 'Button',
},
};
const Secondary: Story = {
args: {
children: 'Button',
variant: 'secondary',
},
parameters: {
docs: {
// 👇 Disable Code panel for this specific story
codePanel: false,
},
},
};