npm 包 @n3/ng-api-classifier-list 使用教程

阅读时长 5 分钟读完

简介

@n3/ng-api-classifier-list 是一个 Angular 的 npm 包,它为 Angular 应用程序提供了一种方便的方法来分类显示项目中的 API 列表。该包使用 Angular CDK 的 Virtual Scrolling 功能来提高性能,并允许您自定义列表行的呈现方式。

安装

要使用 @n3/ng-api-classifier-list,请输入以下命令:

安装完毕后,您需要将 @n3/ng-api-classifier-list 加入到您的 Angular 模块中:

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

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

使用

添加 @n3/ng-api-classifier-list 到您的应用程序后,您可以在组件中使用以下 HTML 模板:

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

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

其中,data 是您要显示的 API 列表数据,onApiClick 是当用户点击列表项时调用的回调函数。

apiClassifierListHeader 和 apiClassifierListItem 是可选的,它们允许您自定义呈现在列表中的分类标题和 API 列表项,而不是使用默认标题和列表项。

以下是一个样例数据:

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

运行应用程序,您将看到类似于以下的分类 API 列表:

自定义

@n3/ng-api-classifier-list 还提供了一些选项来自定义显示在列表中的内容:

headerHeight:

用于定制分类标题的高度,默认为 40 像素。

itemHeight:

用于定制 API 列表项的高度,默认为 32 像素。

grouped:

用于指示是否将 API 列表分组展示,可选值为 true 或 false,默认为 true。

将 grouped 设为 false 后,您将看到一个扁平化的 API 列表:

结束语

现在您已经知道如何使用 @n3/ng-api-classifier-list 将您的 API 列表分类显示了!希望这篇文章能够对您的前端开发工作有所帮助。如果您在使用过程中遇到了任何问题或建议,请随时在评论区留言!

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066bcd967216659e244a4e

纠错
反馈