mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 16:11:33 +08:00
57 lines
3.7 KiB
Markdown
57 lines
3.7 KiB
Markdown
---
|
||
title: 'Features and behavior'
|
||
---
|
||
|
||
To control the layout of Storybook’s UI you can use `addons.setConfig` in your [`.storybook/manager.js`](./overview.md#configure-story-rendering):
|
||
|
||
<!-- prettier-ignore-start -->
|
||
|
||
<CodeSnippets
|
||
paths={[
|
||
'common/storybook-config-layout.js.mdx',
|
||
]}
|
||
/>
|
||
|
||
<!-- prettier-ignore-end -->
|
||
|
||
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** | 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 }` |
|
||
|
||
## Configuring through URL parameters
|
||
|
||
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 | |