参数
参数是用于配置 Storybook 中的故事和插件的静态元数据。它们在故事、元数据（组件）和项目（全局）级别指定。
故事参数
ℹ️ 在故事级别指定的参数将覆盖在项目级别和元数据（组件）级别指定的参数。
在故事级别指定的参数仅适用于该故事。它们定义在故事（命名导出）的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文件中元数据配置中指定的参数适用于该文件中所有故事。它们定义在meta（默认导出）的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 中的所有故事。它们定义在.storybook/preview.js|ts文件中默认导出的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;可用参数
Storybook 只直接接受几个参数。
layout
类型：'centered' | 'fullscreen' | 'padded'
默认值：'padded'
指定画布应如何布局故事。
- 居中：将故事居中于画布中
- 填充：（默认）为故事添加填充
- 全屏：按原样显示故事，不带填充
options
类型
{
storySort?: StorySortConfig | StorySortFn;
}options参数只能在项目级别应用。