本文介绍如何使用 npm 包 @tangential/ui-admin-console 来快速搭建一个基于 React 的后台管理系统。
什么是 @tangential/ui-admin-console
@tangential/ui-admin-console 是一个基于 React 的后台管理系统 UI 组件库，提供了包括表格、表单、弹窗、菜单、导航等在内的众多组件，可以帮助开发者快速构建后台管理系统界面。
安装
可以使用 npm 或 yarn 来安装 @tangential/ui-admin-console 包。
npm:
npm install @tangential/ui-admin-console
yarn:
yarn add @tangential/ui-admin-console
使用
首先，需要在项目中导入 @tangential/ui-admin-console 包:
import { Table, Form, Modal } from "@tangential/ui-admin-console";接下来就可以直接使用组件了。例如，使用 Table 组件来渲染表格：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- -------------------------------
----- ---------- - -
- ---- ---- ----- ----- ------- ---- --- -------- ---- ---- --- - ---- ------ --
- ---- ---- ----- ---- ------- ---- --- -------- ------- --- - ---- ------ --
- ---- ---- ----- ---- ------- ---- --- -------- ------- --- - ---- ------ --
--
----- ------- - -
- ------ ------- ---------- ------- ---- ------- --
- ------ ------ ---------- ------ ---- ------ --
- ------ ---------- ---------- ---------- ---- ---------- --
--
----- --- - -- -- -
-----
------ ----------------------- ----------------- --
------
--
------ ------- ----这样就能展现一个带有数据的表格。
示例代码
下面通过一个完整的示例来演示如何使用 @tangential/ui-admin-console 搭建一个后台管理系统。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ----- ------ ---- - ---- -------------------------------
----- ---------- - -
- ---- ---- ----- ----- ------- ---- --- -------- ---- ---- --- - ---- ------ --
- ---- ---- ----- ---- ------- ---- --- -------- ------- --- - ---- ------ --
- ---- ---- ----- ---- ------- ---- --- -------- ------- --- - ---- ------ --
--
----- ------- - -
- ------ ------- ---------- ------- ---- ------- --
- ------ ------ ---------- ------ ---- ------ --
- ------ ---------- ---------- ---------- ---- ---------- --
--
----- --- - -- -- -
-----
------
---------- -------------------------
---------- -------------------------
---------- -------------------------
-------
---- -------- ----------- ------- ---
------ ----------------------- ----------------- --
---- -------- ---------- ------ ---
----- --------------------
---------- ------------
------ ----------- -------------------- --
------------
---------- -----------
------ --------------- ------------------- --
------------
-------
------
---- -------- ---------- ------ ---
------ --------------- --------------
------------
--------
------
------
------
--
------ ------- ----这个示例演示了如何使用 @tangential/ui-admin-console 提供的三个组件：Menu、Table 和 Modal。
总结
@tangential/ui-admin-console 是一个基于 React 的后台管理系统 UI 组件库，提供了众多常用组件，可以帮助开发者快速搭建后台管理系统界面。在使用时，只需要简单地导入组件，即可使用。此外，本文还介绍了如何使用示例代码来演示如何使用这些组件，供读者参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005581d81e8991b448d5475