什么是 @storybook/csf
@storybook/csf 是一个 Storybook 插件，用于创建具有良好文档展示能力的组件示例，同时方便地分享这些示例。
功能
- 让编写文档变得异常轻松。
- 可以很方便地在组件的代码基础上编写文档示例。
- 能够自动抓取组件的参数信息，大大减少编写示例时的工作量。
- 可以通过一份代码，生成多个文档样例。
- 支持自定义的组件分组。
- 支持自定义的状态和组件属性描述。
- 支持全文搜索。
安装和使用
安装
使用 npm 安装 @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