mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 15:01:23 +08:00
51 lines
5.0 KiB
Markdown
51 lines
5.0 KiB
Markdown
---
|
|
title: 'Story'
|
|
---
|
|
|
|
Stories (component tests) are Storybook's fundamental building blocks.
|
|
In Storybook Docs, stories are rendered in the `Story` block.
|
|
|
|
|
|
|
|
## Working with the DocsPage
|
|
|
|
With each story you write, Storybook will automatically generate a new `Story` Doc Block, wrapped inside a [`Canvas`](./doc-block-canvas.md)(with a toolbar if it's the first "primary" story) alongside a [source code ](./doc-block-source.md) preview underneath it. Below is a condensed table of the available configuration options.
|
|
|
|
| Option | Description |
|
|
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| `inlineStories` | Configures Storybook to render stories inline. <br/> `docs: { inlineStories: false }` <br/> Read the [documentation](./docs-page.md#inline-stories-vs-iframe-stories) for inline rendering framework support. |
|
|
|
|
## Working with MDX
|
|
|
|
With MDX, the `Story` block is not only a way of rendering stories, but how you define them. Internally, Storybook looks for named `Story` instances located at the top of your document, or inside a [Canvas](./doc-block-canvas.md). Below is an abridged example and table featuring all the available options.
|
|
|
|
| Option | Description |
|
|
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| `args` | Provide the required component inputs (e.g., props). <br/> `<Story args={{ text: 'Button' }}/>` <br/> Read the [documentation](../writing-stories/args.md) to learn more. |
|
|
| `decorators` | Provide additional markup or mock a data provider to allow proper story rendering. <br/> `<Story decorators={[(Story) => ( div style={{ margin: '3em' }}><Story/></div>)]}/>` <br/> Read the [documentation](../writing-stories/decorators.md) to learn more. |
|
|
| `id` | Storybook's internal story identifier. Used for embedding Storybook stories inside Docs. <br/> `<Story id="example-mycomponent--starter"/>` <br/> Read the [documentation](../api/mdx.md#embedding-stories) to learn more. |
|
|
| `inline` | Enables Storybook's inline renderer. <br/> `<Story inline={false}/>` <br/> Read the [documentation](./docs-page.md#inline-stories-vs-iframe-stories) to learn more. |
|
|
| `loaders` | (Experimental) Asynchronous function for data fetching with stories. <br/> `<Story loaders={[async () => ({ data: await (await fetch('your-endpoint'))}) ]}/>` <br/> Read the [documentation](../writing-stories/loaders.md) to learn more. |
|
|
| `name` | Adds a name to the component story. <br/> `<Story name="Example"/>` . |
|
|
| `parameters` | Provides the necessary static named metadata related to the story. <br/> `Story parameters={{ backgrounds: { values: [{ name:'red', value:'#f00' }] } }} />` <br/> Read the [documentation](../writing-stories/parameters.md) to learn more. |
|
|
| `play` | Generate component interactions. <br/> `<Story play={async () => { await userEvent.click(screen.getByRole('button')) }}/>` <br/> Read the [documentation](../writing-stories/play-function.md) to learn more. |
|
|
|
|
<!-- prettier-ignore-start -->
|
|
|
|
<CodeSnippets
|
|
paths={[
|
|
'react/component-story-mdx-story-by-name.mdx.mdx',
|
|
'angular/component-story-mdx-story-by-name.mdx.mdx',
|
|
'vue/component-story-mdx-story-by-name.mdx-2.mdx.mdx',
|
|
'vue/component-story-mdx-story-by-name.mdx-3.mdx.mdx',
|
|
'svelte/component-story-mdx-story-by-name.mdx.mdx',
|
|
'common/component-story-mdx-reference-storyid.mdx.mdx',
|
|
]}
|
|
/>
|
|
|
|
<!-- prettier-ignore-end -->
|
|
|
|
### Inline rendering
|
|
|
|
All stories are rendered in the Preview iframe for isolated development in Storybook's Canvas. With Docs, if your framework supports [inline rendering](./docs-page.md#inline-stories-vs-iframe-stories), it will be used by default for both performance and convenience. However, you can force this feature by providing the required configuration option (see tables above).
|