title |
---|
Features and behavior |
To control the layout of Storybook’s UI you can use addons.setConfig
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 |
showToolbar | Boolean | Show/hide tool bar | true |
theme | Object | Storybook Theme, see next section | undefined |
selectedPanel | String | Id to select an addon panel | storybook/actions/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 } |
You can use URL parameters to configure some of the available features:
Config option | Query param | Supported values |
---|---|---|
enableShortcuts | shortcuts |
false |
isFullscreen | full |
true |
showNav | nav |
false |
showPanel | panel |
false , right , bottom |
selectedPanel | addonPanel |
Any panel ID |
showTabs | tabs |
true |
--- | instrument |
false , true |