Story 布局

layout 参数允许您配置 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;

Layout params centered story

在上面的示例中，Storybook 会将所有故事居中显示在 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;

故事布局

或者甚至可以像这样应用于特定的故事：

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',
  },
};