故事布局
layout
参数 允许您配置 stories 在 Storybook 的 Canvas 标签页中的位置。
全局布局
您可以将该参数添加到您的 ./storybook/preview.js
,如下所示
.storybook/preview.ts
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { Preview } from '@storybook/your-framework';
const preview: Preview = {
parameters: {
layout: 'centered',
},
};
export default preview;
在上面的示例中,Storybook 会将所有 stories 在 UI 中居中显示。layout
接受以下选项
centered
:将组件在 Canvas 中水平和垂直居中fullscreen
:允许组件扩展到 Canvas 的完整宽度和高度padded
:(默认) 在组件周围添加额外内边距
组件布局
您还可以在组件级别设置它,如下所示
Button.stories.ts|tsx
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { Meta } from '@storybook/your-framework';
import { Button } from './Button';
const meta = {
component: Button,
// Sets the layout parameter component wide.
parameters: {
layout: 'centered',
},
} satisfies Meta<typeof Button>;
export default meta;
故事布局
甚至可以将其应用于特定的 stories,如下所示
Button.stories.ts|tsx
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { Meta, StoryObj } from '@storybook/your-framework';
import { Button } from './Button';
const meta = {
component: Button,
} satisfies Meta<typeof Button>;
export default meta;
type Story = StoryObj<typeof meta>;
export const WithLayout: Story = {
parameters: {
layout: 'centered',
},
};