npm 包 @jsonforms/material-renderers 使用教程

前言

在现代 web 前端应用中，数据渲染是十分重要的部分。而对于复杂的数据结构，我们需要使用一些工具来简化数据的处理和渲染，以提高开发效率。@jsonforms/material-renderers 就是其中之一，它可以帮助我们快速生成可定制的 UI 组件。

介绍

@jsonforms/material-renderers 是一个基于 JSON Schema 的表单渲染器，它提供了一系列基于 Angular Material 的 UI 组件。这些组件可以自动解析 JSON Schema 中的数据结构，并生成出相应的表单 UI。同时，@jsonforms/material-renderers 也提供了丰富的配置选项，我们可以通过配置来调整表单的 UI 样式、布局以及表单项的渲染方式。

安装

在使用 @jsonforms/material-renderers 前，需要先安装相应的依赖：

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

这里同时需要安装 @jsonforms/angular-v8 模块，因为 @jsonforms/material-renderers 是基于该模块构建的。

使用

假设我们已经有了一个 JSON Schema 数据，它长这样：

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

我们可以通过 @jsonforms/material-renderers 来快速生成一个表单 UI：

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

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

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

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

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

在上面的示例中，我们通过定义 schema 和 form 变量来指定表单的 JSON Schema 和表单项的配置。接下来，我们在构造函数中实例化 JsonFormsService，并调用 setConfig 方法来指定 JSON Forms 的配置。最后，我们通过 getFormGroup 方法来获得互动表单的表单组。

配置选项

我们可以通过调整 JSON Forms 的配置来控制所生成的表单 UI 的各个方面。下面是一些常用配置选项：

  • layout: 设置表单项的布局方式，包括 horizontal、vertical 和 vertical compact 等；
  • theme: 设置表单 UI 的颜色和样式；
  • fields: 允许我们自定义表单项的 UI 组件；
  • uischema: 用于指定表单项与 UI 组件之间的映射关系；

自定义表单项

当使用 @jsonforms/material-renderers 时，我们可以自定义表单项的 UI 组件，以满足一些定制化需求。

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

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

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

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

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

在上面的示例中，我们通过 ButtonRenderer 和 ButtonRendererTester 来自定义了一个按钮的表单项。tester 用于确定当前表单项应该使用哪个组件渲染器，而 renderer 则用于指定应该使用的 renderer component。

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

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

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

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

在 ButtonRenderer 类中，我们声明一个 render 方法，它用于呈现按钮表单项的 UI。在 ButtonRendererTester 中，我们声明了一个测试器，该测试器用于检查所渲染的表单项是否为按钮类型的表单项。

结语

@jsonforms/material-renderers 给前端工程师在处理表单数据方面提供了一个优秀的工具。通过它，我们可以快速、简便地生成高度定制的表单 UI，并且还能扩展组件库以满足需求。我们可以通过调整 JSON Forms 的配置及自定义组件调整表单 UI，以创建更好的用户体验。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/jsonforms-material-renderers

阅读全文

猜你喜欢

  • npm 包 @beisen-cmps/italent-feed-8 的使用教程

    前言 @beisen-cmps/italent-feed-8 是领英中国公司出品的一款前端组件库，其所包含的 italent-feed-8 组件主要用于显示人才推荐、招聘职位等内容。

    4 年前
  • npm 包 @beisen-cmps/italent-feed-7 使用教程

    @beisen-cmps/italent-feed-7 是一款前端开发中非常实用的 npm 包，旨在为用户提供一种方便、快捷的方式获取人才库中的相关信息。本文将介绍该 npm 包的使用教程，包括安装、...

    4 年前
  • npm 包 @beisen-cmps/italent-feed-4 使用教程

    前言 随着前端技术的发展和普及，我们已经不再限制于使用常规的 jQuery 和 JavaScript，而是可以使用各种优秀的 npm 包来解决我们的前端需求。 其中，@beisen-cmps/ital...

    4 年前
  • npm 包 ux-m-platform-modal 使用教程

    在前端开发中，模态框是一个非常常见的 UI 组件，可以用来展示弹出的信息、与用户进行交互等。为了方便开发者快速构建高质量的模态框组件，ux-m-platform-modal 这个 npm 包应运而生。

    4 年前
  • npm 包 rc-cropping 使用教程

    在前端开发中，处理图片是一个非常常见的需求。而一款实用的图片裁剪工具，可以提高我们的工作效率和用户体验。npm 包 rc-cropping 就是这样一款非常实用的图片裁剪工具。

    4 年前
  • npm 包 @beisen-platform/target-pop 使用教程

    @beisen-platform/target-pop 是一款前端 UI 组件，通过在页面上动态生成弹框，实现弹框提示功能。它提供了多种类型的弹框样式，并支持弹框内容自定义。

    4 年前
  • npm 包 shineout 使用教程

    什么是 shineout？ shineout 是一个基于 React 的 UI 组件库，提供了一系列高质量的组件，包括按钮、表单、表格等等。它提供了丰富的主题配置，可以根据不同的项目需求，选择不同的主...

    4 年前
  • npm 包 italent-subordinate-tree 使用教程

    前言 italent-subordinate-tree 是一款 NPM 包，它提供了一种将员工关系树形化的解决方案。使用该包可以将员工之间的主管下属关系转化为树形结构进行展示，方便用户快速了解团队内部...

    4 年前
  • NPM 包 italent-share-box 使用教程

    什么是 italent-share-box？ italent-share-box 是一个基于 React 的社交分享组件库。它提供了包括微信、QQ、微博、Facebook、Twitter 在内的多种社...

    4 年前
  • npm包@reacted/use-ajax-upload使用教程

    @reacted/use-ajax-upload 是一个 React Hooks 插件，可以轻松实现 AJAX 文件上传的功能。此插件使用简单，可以使用无需获取过多的 AJAX 细节，最适合初学者。

    4 年前
  • npm包@beisen/um-rich-editor使用教程

    前言 在前端开发中，富文本编辑器是大家经常使用的一个工具，它既方便了用户输入，又能让网页内容更加生动有趣。今天，我们来介绍一款基于UMEDITOR的富文本编辑器插件@beisen/um-rich-ed...

    4 年前
  • npm 包 @beisen/timeline-wrapper 使用教程

    前言 @beisen/timeline-wrapper 是一个以 Ant Design Timeline 为基础组件封装的，适用于非静态简单时间线的 React 组件。

    4 年前
  • npm 包 @beisen/ocean-tree 使用教程

    前言 在前端开发中，树形控件是非常常见的 UI 组件，可以用于展示层级关系、目录结构等。在实现树形控件时，我们通常需要考虑如何组织数据、如何渲染节点等问题。这时，npm 包 @beisen/ocean...

    4 年前
  • npm 包 @beisen/day-picker 使用教程

    什么是 @beisen/day-picker @beisen/day-picker 是一个基于 React 的日期选择组件，提供了丰富的日期选择功能。这个组件帮助开发者快速、方便地选择日期，同时也能够...

    4 年前
  • npm 包 @beisen-cmps/italent-feedlist-wrapper 使用教程

    在前端开发中，开发者需要使用不同的工具和技术来完成任务。其中，使用 npm 包是一种常见的方式，可以加快开发速度并提高开发效率。本文将介绍 npm 包 @beisen-cmps/italent-fee...

    4 年前
  • npm 包 @beisen-cmps/italent-feed-container 使用教程

    前言 在前端开发中，我们经常需要展示数据列表，而一个好的列表容器能够让我们的开发效率更高，让我们的前端页面看起来更加美观，在这篇文章中，我们将会讲解如何使用 npm 包 @beisen-cmps/it...

    4 年前
  • npm 包 react-scrollbar 使用教程

    简介 React Scrollbar 是一个基于 React 的滚动条组件，使用方便，具有高度的自定义性和可扩展性。在本文中，我们将学习如何使用 React Scrollbar 包，包括安装、配置和使...

    4 年前
  • npm 包 italent-icon 使用教程

    前言 在前端开发中，我们经常需要使用各种图标来设计网站或应用程序。为了便于使用，有很多现代化的方式来获取图标。其中，一种流行的方式是使用 npm 包。 在本文中，我们将介绍如何使用 npm 包 ita...

    4 年前
  • npm 包 @beisen/talentjs-ui 使用教程

    在前端开发中，我们经常使用各种第三方库来提高开发效率和代码质量。@beisen/talentjs-ui 是一个针对人才招聘领域开发的 UI 组件库，提供了丰富的组件和样式，能够方便快捷地构建招聘网站的...

    4 年前
  • npm 包 @beisen/user-selector 使用教程

    在前端开发过程中，用户选择器是很常用的一个组件。@beisen/user-selector 是一款方便易用的用户选择器组件，支持多选/单选，提供搜索功能，同时还支持自定义页面。

    4 年前

相关推荐

    暂无文章