@alisowski/故事书-addon-notes

注:故事书对这个插件进行了贬值,赞成 addon-docs。 。 。 . 虽然这个插件有用, 但是这个插件可以解决不同的问题 .

Storybook Addon Notes 允许您在 故事书。 。 。 .

框架支助

开始

yarn add -D @alisowski/storybook-addon-notes

在内部 .storybook/main.js数字 :

module.exports = {
  addons: ["@alisowski/storybook-addon-notes/register"],
};

或者将附加的注录入面板。 只选择一个,而不是两个.

module.exports = {
  addons: ["@alisowski/storybook-addon-notes/register-panel"],
};

现在,你可以使用 notes 参数可以添加每个故事的注释.

import Component from "./Component";

export default {
  title: "Component",
  parameters: {
    notes: "some documentation here",
  },
};

升级到 CSF 格式

添加 notes 页:1 parameters 对象 :

export default {
  parameters: {
    notes: "My notes",
  },
};

使用马克下

使用您笔记中的 Markdown 支持, Storybook 将默认加载 Markdown 作为原始 .

import Component from "./Component";
import markdown from "./someMarkdownText.md";

export default {
  title: "Component",
};

export const withMarkdown = () => <Component />;
withmarkdown.story = {
  parameters: {
    notes: { markdown },
  },
};

多笔记节

如果您需要为您的故事本的不同消费者(如设计,开发者)显示不同的注释,可以配置多个注释页. 以下将制作一个标签, 上面有两个独有的注释 Introduction 财务报告和审定财务报表 Design。 。 。 .

import { storiesOf } from "@storybook/react";
import Component from "./Component";

import intro from "./intro.md";
import design from "./design.md";

export default {
  title: "Component",
  parameters: {
    notes: { Introduction: intro, "Design Notes": design },
  },
};