| title | Features and behavior |
|---|
To control the layout of Storybook鈥檚 UI you can use the setConfig addons API in your .storybook/manager.js:
<CodeSnippets paths={[ 'common/storybook-config-layout.js.mdx', ]} />
The following table details how to use the API values:
| Name | Type | Description | Example Value |
|---|---|---|---|
| isFullscreen | Boolean | Show story component as full screen | false |
| showNav | Boolean | Display panel that shows a list of stories | true |
| showPanel | Boolean | Display panel that shows addon configurations | true |
| panelPosition | String/Object | Where to show the addon panel | bottom or right |
| enableShortcuts | Boolean | Enable/disable shortcuts | true |
| isToolshown | String | Show/hide tool bar | true |
| theme | Object | Storybook Theme, see next section | undefined |
| selectedPanel | String | Id to select an addon panel | my-panel |
| initialActive | String | Select the default active tab on Mobile | sidebar or canvas or addons |
| sidebar | Object | Sidebar options, see below | { showRoots: false } |
| toolbar | Object | Modify the tools in the toolbar using the addon id | { fullscreen: { hidden: false } } } |
The following options are configurable under the sidebar namespace:
| Name | Type | Description | Example Value |
|---|---|---|---|
| showRoots | Boolean | Display the top-level nodes as a "root" in the sidebar | false |
| collapsedRoots | Array | Set of root node IDs to visually collapse by default | ['misc', 'other'] |
| renderLabel | Function | Create a custom label for tree nodes; must return a ReactNode | (item) => <abbr title="...">{item.name}</abbr> |
The following options are configurable under the toolbar namespace:
| Name | Type | Description | Example Value |
|---|---|---|---|
| id | String | Toggle visibility for toolbar item | { hidden: false } |