故事布局

layout 参数允许你配置故事在 Storybook 的 Canvas 选项卡中的位置。

¥The layout parameter allows you to configure how stories are positioned in Storybook's Canvas tab.

全局布局

¥Global layout

你可以将参数添加到你的 ./storybook/preview.js，如下所示：

¥You can add the parameter to your ./storybook/preview.js, like so:

.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 接受以下选项：

¥In the example above, Storybook will center all stories in the UI. layout accepts these options:

centered：在 Canvas 中水平和垂直居中组件

¥centered: center the component horizontally and vertically in the Canvas
fullscreen：允许组件扩展到 Canvas 的整个宽度和高度

¥fullscreen: allow the component to expand to the full width and height of the Canvas
padded：(默认)在组件周围添加额外的填充

¥padded: (default) Add extra padding around the component

组件布局

¥Component layout

你还可以在组件级别进行设置，如下所示：

¥You can also set it at a component level like so:

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;

故事布局

¥Story layout

或者甚至将其应用于特定的故事，如下所示：

¥Or even apply it to specific stories like so:

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