Skip to content
This repository has been archived by the owner on Nov 15, 2022. It is now read-only.

Latest commit

 

History

History
57 lines (38 loc) · 1.35 KB

story-layout.md

File metadata and controls

57 lines (38 loc) · 1.35 KB
title
Story layout

The layout parameter 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, like so:

<CodeSnippets paths={[ 'common/storybook-preview-layout-param.js.mdx' ]} />

Layout params centered story

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:

<CodeSnippets paths={[ 'common/storybook-component-layout-param.js.mdx', 'common/storybook-component-layout-param.mdx.mdx', ]} />

Story layout

Or even apply it to specific stories like so:

<CodeSnippets paths={[ 'common/storybook-story-layout-param.js.mdx', 'common/storybook-story-layout-param.mdx.mdx', ]} />