GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-09 00:19:13 +08:00
Code Issues Packages Projects Releases Wiki Activity
storybook/docs/configure/story-layout.md
Kyle Gach 975ad7604b Update TOC to use heading type 
- Rename `introduction.md`, `overview.md`, `how-to-contribute.md` pages -> `index.md` pages
- Add all-new `index.md` pages for Sharing and API
- Find/replace `introduction.md`/`overview.md` -> `index.md`
- Find/replace `/introduction`/`/overview` -> `/`
- Add `hideRendererSelector: true` to frontmatter of (some) pages that aren't conditional on renderer
2023-11-27 20:57:51 -07:00

1.8 KiB
Raw Blame History

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', 'common/storybook-preview-layout-param.ts.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={[ 'angular/storybook-component-layout-param.ts.mdx', 'web-components/storybook-component-layout-param.js.mdx', 'web-components/storybook-component-layout-param.ts.mdx', 'common/storybook-component-layout-param.js.mdx', 'common/storybook-component-layout-param.ts.mdx', ]} />

Story layout

Or even apply it to specific stories like so:

<CodeSnippets paths={[ 'angular/storybook-story-layout-param.ts.mdx', 'web-components/storybook-story-layout-param.js.mdx', 'web-components/storybook-story-layout-param.ts.mdx', 'common/storybook-story-layout-param.js.mdx', 'common/storybook-story-layout-param.ts.mdx', ]} usesCsf3 csf2Path="configure/story-layout#snippet-storybook-story-layout-param" />