mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 10:51:05 +08:00
80 lines
2.9 KiB
Plaintext
80 lines
2.9 KiB
Plaintext
---
|
||
title: 'Parameters'
|
||
sidebar:
|
||
order: 2
|
||
title: Parameters
|
||
---
|
||
|
||
<YouTubeCallout id="u32vmGVJY2U" title="Build Better Storybooks with Parameters" />
|
||
|
||
Parameters are a set of static, named metadata about a story, typically used to control the behavior of Storybook features and addons.
|
||
|
||
<Callout variant="info">
|
||
Available parameters are listed in the [parameters API reference](../api/parameters.mdx#available-parameters).
|
||
</Callout>
|
||
|
||
For example, let’s customize the backgrounds addon via a parameter. We’ll use `parameters.backgrounds` to define which backgrounds appear in the backgrounds toolbar when a story is selected.
|
||
|
||
## Story parameters
|
||
|
||
<IfRenderer renderer="svelte">
|
||
|
||
With Svelte, we can set the `parameters` property in the `Story` component to define parameters for a single story using Svelte CSF with the native templating syntax, or we can use the `parameters` key on a CSF named export:
|
||
|
||
</IfRenderer>
|
||
|
||
<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'react', 'preact', 'qwik', 'solid' ]}>
|
||
|
||
We can set a parameter for a single story with the `parameters` key on a CSF export:
|
||
|
||
</IfRenderer>
|
||
|
||
{/* prettier-ignore-start */}
|
||
|
||
<CodeSnippets path="parameters-in-story.md" />
|
||
|
||
{/* prettier-ignore-end */}
|
||
|
||
## Component parameters
|
||
|
||
<IfRenderer renderer="svelte">
|
||
|
||
To define parameters for all stories of a component, we can add the `parameters` property in the `defineMeta` function of a Svelte CSF story file, or we can use the `parameters` key on the default CSF export:
|
||
|
||
</IfRenderer>
|
||
|
||
<If notRenderer="svelte">
|
||
|
||
We can set the parameters for all stories of a component using the `parameters` key on the default CSF export:
|
||
|
||
</If>
|
||
|
||
{/* prettier-ignore-start */}
|
||
|
||
<CodeSnippets path="parameters-in-meta.md" />
|
||
|
||
{/* prettier-ignore-end */}
|
||
|
||
## Global parameters
|
||
|
||
We can also set the parameters for **all stories** via the `parameters` export of your [`.storybook/preview.js|ts`](../configure/index.mdx#configure-story-rendering) file (this is the file where you configure all stories):
|
||
|
||
{/* prettier-ignore-start */}
|
||
|
||
<CodeSnippets path="parameters-in-preview.md" />
|
||
|
||
{/* prettier-ignore-end */}
|
||
|
||
Setting a global parameter is a common way to configure addons. With backgrounds, you configure the list of backgrounds that every story can render in.
|
||
|
||
## Rules of parameter inheritance
|
||
|
||
The way the global, component and story parameters are combined is:
|
||
|
||
* More specific parameters take precedence (so a story parameter overwrites a component parameter which overwrites a global parameter).
|
||
* Parameters are **merged**, so keys are only ever overwritten and never dropped.
|
||
|
||
The merging of parameters is important. This means it is possible to override a single specific sub-parameter on a per-story basis while retaining most of the parameters defined globally.
|
||
|
||
If you are defining an API that relies on parameters (e.g., an [**addon**](../addons/index.mdx)) it is a good idea to take this behavior into account.
|