故事布局

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

全局布局

你可以像这样将参数添加到你的 ./storybook/preview.js 中

.storybook/preview.ts

// Replace your-framework with the framework you are using (e.g., react, vue3)
import { 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 name of your framework
import type { Meta } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
  // Sets the layout parameter component wide.
  parameters: {
    layout: 'centered',
  },
};
 
export default meta;

故事布局

甚至可以像这样将其应用于特定故事

Button.stories.ts|tsx

// Replace your-framework with the name of your framework
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
};
 
export default meta;
type Story = StoryObj<typeof Button>;
 
export const WithLayout: Story = {
  parameters: {
    layout: 'centered',
  },
};