参数
观看视频教程
参数是一组关于故事的静态命名元数据,通常用于控制 Storybook 功能和插件的行为。
可用的参数在 参数 API 参考 中列出。
例如,让我们通过参数自定义背景插件。我们将使用 parameters.backgrounds
来定义当选择故事时,背景工具栏中显示哪些背景。
故事参数
我们可以使用 CSF 导出上的 parameters
键为单个故事设置参数
Button.stories.ts|tsx
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { Meta, StoryObj } from '@storybook/your-framework';
import { Button } from './Button';
const meta: Meta<typeof Button> = {
component: Button,
};
export default meta;
type Story = StoryObj<typeof Button>;
export const OnDark: Story = {
// 👇 Story-level parameters
parameters: {
backgrounds: {
default: 'dark',
},
},
};
组件参数
我们可以使用默认 CSF 导出上的 parameters
键为一个组件的所有故事设置参数
Button.stories.ts|tsx
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { Meta, StoryObj } from '@storybook/your-framework';
import { Button } from './Button';
const meta: Meta<typeof Button> = {
component: Button,
// 👇 Meta-level parameters
parameters: {
backgrounds: {
default: 'dark',
},
},
};
export default meta;
type Story = StoryObj<typeof Button>;
export const Basic: Story = {};
全局参数
我们还可以通过 .storybook/preview.js
文件(这是你配置所有故事的文件)的 parameters
导出为**所有故事**设置参数
.storybook/preview.ts
// Replace your-renderer with the renderer you are using (e.g., react, vue3)
import { Preview } from '@storybook/your-renderer';
const preview: Preview = {
parameters: {
backgrounds: {
values: [
{ name: 'light', value: '#fff' },
{ name: 'dark', value: '#333' },
],
},
},
};
export default preview;
设置全局参数是配置插件的常用方法。对于背景,你可以配置每个故事可以渲染的背景列表。
参数继承规则
全局、组件和故事参数的组合方式是
- 更具体的参数优先级更高(因此故事参数会覆盖组件参数,而组件参数会覆盖全局参数)。
- 参数是**合并**的,所以键只会被覆盖,不会被丢弃。
参数的合并非常重要。这意味着可以根据每个故事的基础来覆盖单个特定子参数,但仍然保留全局定义的大多数参数。
如果你正在定义一个依赖于参数的 API(例如一个 插件),最好将此行为考虑在内。