NPM 包 @storybook/addon-notes 使用教程

@storybook/addon-notes 是一个 Storybook 的插件，可以用来在组件文档中加入笔记。本文将详细介绍该插件的使用方法和配置选项。

安装

使用 npm 进行安装：

npm install --save-dev @storybook/addon-notes

配置

1. 在 .storybook/addons.js 文件中添加以下代码：

import '@storybook/addon-notes/register';

1. 在 .storybook/main.js 文件中添加以下代码：

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

使用

使用 @storybook/addon-notes 插件，需要在文本文件中添加注释。当添加了注释后，Storybook 将根据这些注释生成笔记。以下是示例代码：

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -----------

------ ------- -
  ------ ---------
--

------ ----- ---- - -- -- ------------- ----------------

---------- - -
  ----------- -
    ------ ----- -- - ------ ------ ------------
  --
--

说明：

• text.story 中的 parameters 对象包含 notes 字段，notes 字段包含了我们想要添加的笔记内容。
• 在 Storybook 中浏览 Button 组件，将会显示添加的笔记内容。

可选项

@storybook/addon-notes 插件有一些可选项，可以在 main.js 文件中进行配置。

以下是可选项的说明：

1. panelPosition: 指定笔记面板相对于组件文档的位置。默认值为 right。

可选值：

• bottom：在底部显示笔记页面。
• right：在右侧显示笔记页面。

示例代码：

module.exports = {
  addons: [
    {
      name: '@storybook/addon-notes',
      options: { panelPosition: 'bottom' },
    },
  ],
};

1. notesSorter: 定义数组的排序方式。默认值为 undefined。

示例代码：

module.exports = {
  addons: [
    {
      name: '@storybook/addon-notes',
      options: { notesSorter: (a, b) => a - b },
    },
  ],
};

结论

@storybook/addon-notes 插件是一个很好用的插件，可以增强 Storybook 在开发时的体验，快速为组件添加笔记并能够灵活选择位置和排序方式。希望以上内容可以对你的开发工作有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/128014