npm包 @descco/admin-builder 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

@descco/admin-builder是一个快速构建后台管理系统的npm包。它提供了一组可重用的UI组件，对布局、图表、数据表格等进行了深度优化，减少了开发人员的工作量，并提供高定制化能力，完全可以满足各种复杂场景需求。

安装

要使用@descco/admin-builder，你需要先安装Node.js，然后使用npm安装该包。在命令行输入以下命令：

npm install @descco/admin-builder --save

使用

在需要使用@descco/admin-builder的项目中，只需要在代码中导入所需的组件，然后按照API进行使用即可。

例如，要使用UI组件中的Button组件，可以使用以下方式进行导入和使用：

import { Button } from '@descco/admin-builder';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <Button>点击我</Button>,
    document.getElementById('root')
);

API

@descco/admin-builder提供了多种UI组件，涵盖了表单、布局、图表、数据表格等功能。每个组件均具有可选参数，可根据不同业务需求进行自定义配置。

表单

Input

Input组件用于文本输入，支持多种类型的输入。

基本用法

import { Input } from '@descco/admin-builder';

<Input placeholder="请输入内容" />

Properties

Property	Description	Type	Default
value	组件的值	string	-
type	输入类型	string	'text'
placeholder	提示信息	string	-
disabled	是否禁用	boolean	false
onChange	输入内容变化时触发	function	-

Select

Select组件用于下拉选择，支持单选和多选两种模式。

基本用法

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

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

Properties

Property	Description	Type	Default
value	组件的值	array/string	-
options	选择项列表	array	-
mode	选择模式（单选或多选）	string	'single'
placeholder	提示信息	string	-
disabled	是否禁用	boolean	false
onChange	选择内容变化时触发	function	-

布局

Layout

Layout组件提供了常用的Flex、Grid等布局方式，可快速完成复杂布局需求。它包含两个子组件：Row和Col。

Flex

Flex布局基于Flexbox，支持水平和垂直居中等操作。

import { Layout } from '@descco/admin-builder';

<Layout.Flex justifyContent="center" alignItems="center">
    <div>这是Flex布局的内容</div>
</Layout.Flex>

Properties

Property	Description	Type	Default
justifyContent	水平对齐方式	string	'flex-start'
alignItems	垂直对齐方式	string	'flex-start'

Grid

Grid布局提供了类似于Bootstrap中的栅格布局，可快速对页面进行响应式设计。

import { Layout } from '@descco/admin-builder';

<Layout.Grid>
    <Layout.Col span={6}>第一列</Layout.Col>
    <Layout.Col span={12}>第二列</Layout.Col>
    <Layout.Col span={6}>第三列</Layout.Col>
</Layout.Grid>

Properties

Property	Description	Type	Default
gutter	列之间的间距	number	0

Panel

Panel组件用于展示内容的容器，支持标题、操作按钮等功能。

import { Panel } from '@descco/admin-builder';

<Panel title="我的面板">
    这是面板的内容。
</Panel>

Properties

Property	Description	Type	Default
title	面板标题	string	-
actions	面板操作按钮	ReactNode	-

图表

LineChart

LineChart组件用于展示折线图，支持X轴和Y轴的坐标轴、数据轴配置等。

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

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

Properties

Property	Description	Type	Default
xAxis	X轴坐标轴	array	-
yAxis	Y轴坐标轴	array	-
series	数据系列	array	-

PieChart

PieChart组件用于展示饼图，支持数据系列配置，可直接通过series属性进行传递。

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

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

Properties

Property	Description	Type	Default
series	数据系列	array	-

数据表格

Table

Table组件提供了对数据表格的多种操作，包括数据排序、分页、自定义列、操作列等。

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

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

Properties

Property	Description	Type	Default
columns	表格列配置	array	-
dataSource	表格数据源	array	-
pagination	是否分页	boolean/object	false
rowKey	行键名	string	'id'
scroll	是否滚动	object	{}
loading	是否加载中	boolean/object	false
bordered	是否显示边框	boolean	false
showHeader	是否显示表头	boolean	true

结语

@descco/admin-builder是一个功能强大、易于使用的后台管理系统构建工具。无论你是初学者还是有经验的开发人员，都可以通过该包快速搭建出高质量的后台系统。希望本文能够帮助到大家，也希望大家能够多多使用和贡献npm包，让我们的开发生态更加繁荣。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055b8981e8991b448d9290