mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-09 00:19:13 +08:00
47 lines
1.3 KiB
Plaintext
47 lines
1.3 KiB
Plaintext
---
|
|
title: 'Story layout'
|
|
sidebar:
|
|
order: 6
|
|
title: Story layout
|
|
---
|
|
|
|
The `layout` [parameter](../writing-stories/parameters.mdx) allows you to configure how stories are positioned in Storybook's Canvas tab.
|
|
|
|
## Global layout
|
|
|
|
You can add the parameter to your [`./storybook/preview.js`](./index.mdx#configure-story-rendering), like so:
|
|
|
|
{/* prettier-ignore-start */}
|
|
|
|
<CodeSnippets path="storybook-preview-layout-param.md" />
|
|
|
|
{/* prettier-ignore-end */}
|
|
|
|
|
|
|
|
In the example above, Storybook will center all stories in the UI. `layout` accepts these options:
|
|
|
|
* `centered`: center the component horizontally and vertically in the Canvas
|
|
* `fullscreen`: allow the component to expand to the full width and height of the Canvas
|
|
* `padded`: *(default)* Add extra padding around the component
|
|
|
|
## Component layout
|
|
|
|
You can also set it at a component level like so:
|
|
|
|
{/* prettier-ignore-start */}
|
|
|
|
<CodeSnippets path="storybook-component-layout-param.md" />
|
|
|
|
{/* prettier-ignore-end */}
|
|
|
|
## Story layout
|
|
|
|
Or even apply it to specific stories like so:
|
|
|
|
{/* prettier-ignore-start */}
|
|
|
|
<CodeSnippets path="storybook-story-layout-param.md" usesCsf3 csf2Path="configure/story-layout#snippet-storybook-story-layout-param" />
|
|
|
|
{/* prettier-ignore-end */}
|