什么是 @storybook/csf
@storybook/csf 是一个 Storybook 插件，用于创建具有良好文档展示能力的组件示例，同时方便地分享这些示例。
功能
- 让编写文档变得异常轻松。
- 可以很方便地在组件的代码基础上编写文档示例。
- 能够自动抓取组件的参数信息，大大减少编写示例时的工作量。
- 可以通过一份代码，生成多个文档样例。
- 支持自定义的组件分组。
- 支持自定义的状态和组件属性描述。
- 支持全文搜索。
安装和使用
安装
使用 npm 安装 @storybook/csf：
npm install --save-dev @storybook/csf
添加 CSF 文件
CSF 文件是一个包含组件信息的 JavaScript 模块，具体格式请查看官方文档。
例如：
-- -------------------- ---- ------- ------ ------ ---- --------------------------- ------ ------- - ------ -------------------- ---------- ------- --------- - -------- - ------- ------ ------ -- ---------------- - -------- ------- -- ----- - -------- - ----- --------- -------- --------- --------- -------- - -- -- -- ----- -------- - ------ - -------- -- -- -- ----------- - ------ -- ------ ---------------------- --------- -------- --------------- ---- --- ------ ----- ------- - ------------------ ------------ - - -------- ----- ------ --------- --展开代码
在 Storybook 中，组件使用 stories 来表示，您可以在 CSF 文件中通过 export 导出示例，从而将示例加入到 Storybook 中。
启用 CSF 支持
在主 Storybook 设定文件（一般在 .storybook/main.js）中，启用 CSF 支持：
-- -------------------- ---- ------- -------------- - - --- ----- - -------- ----------- -- ------- -------------------------- -------- ---------------------------------- --- --展开代码
通过 addon-docs 插件，您的 Storybook 就可以支持 CSF 了。
配置工具栏
在您的 CSF 文件中，您可以配置工具栏（Toolbar）的各种属性，来增强您的文档示例，例如：
-- -------------------- ---- ------- ------ ------- - --- ----------- - ----- - -------------- ----- -- ------ ----- ----------------- -------------- -- ----- -- ------- - ----- ------ -- -- ----- -- -- --- --展开代码
内嵌组件
您可以在文档中直接内嵌组件。
-- -------------------- ---- ------- ------ - ------ - ---- ---------------------- ------ ----- ------------- - -- -- ------- ---------------------------------- ------------------- - - ----- ---------- ----------- - -- ------- ----- - -------------- ------ -- -- --展开代码
自定义工具栏
如果需要自定义工具栏，可以使用 docsPage 和 docsContainer 两个 API 来实现。
-- -------------------- ---- ------- -- ------- ------ - ----- ----------- ----------- - ---- ------------------------------- ------ ------- - --- ----------- - ----- - ----- -- -- - -- ------ ----------------- -- ------ ---- ------------------------- --------------- ------- -- ------ ------- -- --- ---- --------- ------- ------ ----------- ----------- -- ------- --- -- ---------- -- -------- -- -- - ---- -------- ------- -- ------ --- ---------- -- -------- ---------- --------- ---------- -------- --- ----- ---- -- ------ ------ ---- ------ -- -- -- --- --展开代码
利用上述的代码，您便可以自由定制工具栏的各种属性
总结
@storybook/csf 可以大大方便我们的组件示例文档编写，让我们可以更加方便、快捷地展示或分享自己的组件。它很容易上手，推荐使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/107458
