Story 版面配置

layout 參數可讓您設定 stories 在 Storybook 的「畫布」索引標籤中的位置。

全域版面配置

您可以將參數新增至 ./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 會將所有 stories 置於 UI 的中心。layout 接受這些選項

centered：將元件水平和垂直置於畫布中心
fullscreen：允許元件擴展到畫布的完整寬度和高度
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;

Story 版面配置

甚至可以將其套用至特定的 stories，如下所示

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