@ canonical/ 故事本- addon- utils
调试和布局用于故事本的效用 。 添加用于网格包围、颜色方案、基线网格覆盖和元素大纲的工具栏控制.
安装
bun add -D @canonical/storybook-addon-utils
设置
将加词在您的 .storybook/main.ts数字 :
const config: StorybookConfig = {
addons: [
"@canonical/storybook-addon-utils",
],
};
export default config;
工具栏控件
| 控制权 | 快捷键 | 数值 | 说明 |
|---|---|---|---|
| 网格模式 | G | * 无 * 内在 * 反应 * 展示 | 将故事卷入 .grid 集装箱(showcase = 被夹住,以高高的画布为中心柱) |
| 颜色方案 | S | 没有(系统) ——光 ——暗 | 切换 .light编号 :.dark 身体课 |
| 基线网格 | B | 打开/关闭 | 显示基线网格覆盖 |
| 大纲 | O | 打开/关闭 | 显示元素大纲覆盖 |
故事参数
故事和metas可以通过 parameters。工具栏覆盖总是优先.
const meta = {
parameters: {
grid: "intrinsic", // "none" | "intrinsic" | "responsive" | "showcase"
scheme: "none", // "none" | "light" | "dark"
debug: {
baseline: true, // boolean
outlines: false, // boolean
},
},
} satisfies Meta;
// Story-level override
export const DarkMode: Story = {
parameters: {
scheme: "dark",
},
};
CSS 自定义属性
在您的预览样式中覆盖这些来自定义覆盖 :
| 财产 | 默认 | 说明 |
|---|---|---|
--baseline-grid-color | rgba(255, 0, 0, 0.2) | 基线网格线颜色 |
--baseline-height | 0.5rem | 基线网格间隔 |
--debug-outline-color | light-dark(rgba(0,128,80,0.25), rgba(80,220,140,0.25)) | 元素大纲颜色 |
所需资源
ES模块. 节点20+. 故事书10.3+.