Update a bunch of images
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 212 KiB |
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 214 KiB |
Before Width: | Height: | Size: 147 KiB After Width: | Height: | Size: 74 KiB |
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 92 KiB |
Before Width: | Height: | Size: 73 KiB |
BIN
docs/configure/addon-locations.png
Normal file
After Width: | Height: | Size: 190 KiB |
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 209 KiB |
Before Width: | Height: | Size: 36 KiB |
BIN
docs/configure/sidebar-anatomy.png
Normal file
After Width: | Height: | Size: 147 KiB |
@ -4,7 +4,7 @@ title: 'Sidebar & URLS'
|
||||
|
||||
Storybook’s sidebar lists all your stories grouped by component. When you have many components, you may also wish to group those components. To do so, you can add the `/` separator to the `title` of your CSF file, and Storybook will group the stories into groups based on common prefixes:
|
||||
|
||||

|
||||

|
||||
|
||||
We recommend using a nesting scheme that mirrors the filesystem path of the components. For example, if you have a file `components/modals/Alert.js`, name the CSF file `components/modals/Alert.stories.js` and title it `Components/Modals/Alert`.
|
||||
|
||||
@ -12,7 +12,7 @@ We recommend using a nesting scheme that mirrors the filesystem path of the comp
|
||||
|
||||
By default, Storybook will treat your top-level nodes as “roots”. Roots are displayed in the UI as “sections” of the hierarchy. Lower level groups will show up as folders:
|
||||
|
||||

|
||||

|
||||
|
||||
If you’d prefer to show top-level nodes as folders rather than roots, you can set the `sidebar.showRoots` option to `false` in [`./storybook/manager.js`](./overview.md#configure-story-rendering):
|
||||
|
||||
|
Before Width: | Height: | Size: 14 KiB |
BIN
docs/configure/sidebar-roots.png
Normal file
After Width: | Height: | Size: 68 KiB |
@ -10,7 +10,7 @@ Addons are integral to the way Storybook works. Many of Storybook's core feature
|
||||
|
||||
The most obvious thing addons affect in Storybook is the UI of Storybook itself. Within the UI the **toolbar** and **addons panel** are the two chief places addons will appear.
|
||||
|
||||

|
||||

|
||||
|
||||
Addons can also hook into the rendering of your story in the preview pane via injecting their own [decorators](../writing-stories/decorators.md).
|
||||
|
||||
|
@ -31,7 +31,8 @@ It will install the required prerequisites, build the code, create and link a st
|
||||
|
||||
If all goes well, you should see the sandbox running.
|
||||
|
||||

|
||||

|
||||
|
||||
|
||||
## Running a different sandbox template
|
||||
|
||||
@ -89,7 +90,7 @@ If the work you'll be doing affects the `Preview` (the innermost Storybook `ifra
|
||||
|
||||
Otherwise, if it affects the `Manager` (the outermost Storybook `iframe` where the addons are displayed), you'll need to refresh manually after saving.
|
||||
|
||||

|
||||

|
||||
|
||||
## Check your work
|
||||
|
||||
|
Before Width: | Height: | Size: 136 KiB After Width: | Height: | Size: 329 KiB |
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 243 KiB |
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 276 KiB |
Before Width: | Height: | Size: 212 KiB After Width: | Height: | Size: 267 KiB |
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 271 KiB |
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 241 KiB |