npm包 @just-tomht/garage-components使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

@just-tomht/garage-components是一款基于React的组件库，主要用于前端网页开发。该组件库提供了常见的UI组件，利于开发者快速开发网页应用，提高开发效率。

安装

使用npm命令进行安装：

npm install @just-tomht/garage-components

使用示例

以Button组件为例，通过以下代码来使用该组件：

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

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

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

组件列表

@just-tomht/garage-components提供了以下常用组件：

Button
Input
Select
Checkbox
Radio
Icon
Modal
Tab
Table
Pagination

组件使用说明

Button

Button组件用于创建按钮，可以设置颜色、大小、样式等。常用属性如下：

属性	说明	类型	默认值
type	按钮类型，可选值为primary、ghost、danger、transparent	string	primary
size	按钮大小，可选值为small、normal、large	string	normal
style	按钮样式，可以覆盖默认样式	object	{}
onClick	点击事件	function

Input

Input组件用于接收用户输入。可设置类型、占位符、初始值、提示错误信息等。常用属性如下：

属性	说明	类型	默认值
type	输入框类型，可选值为text、password、number、email等	string	text
defaultValue	输入框初始值	string
placeholder	输入框占位符	string
errorMessage	输入有误时的提示信息	string
hasError	是否有输入错误	bool	false
onChange	输入内容变化时的回调函数	function

Select

Select组件用于创建下拉列表，可以设置选项、默认选中项、样式等。常用属性如下：

属性	说明	类型	默认值
options	选项数组，每项需包含label和value字段	array
defaultValue	默认选中项value值	string
style	下拉列表样式，可以覆盖默认样式	object	{}
onChange	选中项变化时的回调函数	function

Checkbox

Checkbox组件用于创建多选框，可以设置选项、默认选中项、样式等。常用属性如下：

属性	说明	类型	默认值
options	选项数组，每项需包含label和value字段	array
defaultValue	默认选中项value值，可以是数组	string or array
style	多选框样式，可以覆盖默认样式	object	{}
onChange	选中项变化时的回调函数	function

Radio

Radio组件用于创建单选框，可以设置选项、默认选中项、样式等。常用属性如下：

属性	说明	类型	默认值
options	选项数组，每项需包含label和value字段	array
defaultValue	默认选中项value值	string
style	单选框样式，可以覆盖默认样式	object	{}
onChange	选中项变化时的回调函数	function

Icon

Icon组件用于创建图标，可以设置图标类型、大小、颜色等。常用属性如下：

属性	说明	类型
type	图标类型，参见Antd的Icon组件	string
size	图标大小，单位为px	number
color	图标颜色	string

Modal

Modal组件用于创建模态框，可以设置标题、内容、按钮等。常用属性如下：

属性	说明	类型	默认值
title	模态框标题	string
content	模态框内容	node
okText	确定按钮文本	string	确定
cancelText	取消按钮文本	string	取消
onOk	确定按钮回调函数	function
onCancel	取消按钮回调函数	function

Tab

Tab组件用于创建选项卡，可以设置选项、默认选中项、样式等。常用属性如下：

属性	说明	类型	默认值
options	选项数组，每项需包含label和value字段	array
defaultValue	默认选中项value值	string
style	选项卡样式，可以覆盖默认样式	object	{}
onChange	选中项变化时的回调函数	function

Table

Table组件用于创建表格，可以设置列、数据等。常用属性如下：

属性	说明	类型	默认值
columns	列信息，每列需包含dataIndex和title字段	array
dataSource	表格数据	array

Pagination

Pagination组件用于创建分页，可以设置总页数、当前页数等。常用属性如下：

属性	说明	类型	默认值
total	数据总条数	number
pageSize	每页数据量	number	10
current	当前页码数	number	1
pageSizeOptions	分页数量配置数组	array	[10, 20, 30, 40]
showQuickJumper	是否显示跳转到指定页的操作	bool	false
showSizeChanger	是否显示选择每页数据量的操作	bool	true
onChange	页码变化时的回调函数	function
onShowSizeChange	每页数据量变化时的回调函数	function

总结

@just-tomht/garage-components提供了一系列方便易用的UI组件，开发者可以通过简单的代码调用完成复杂的网页设计。该组件库不仅提高了开发效率，也增加了网页应用的美观度和易用性。在使用该组件库时，注意阅读各组件属性的说明文档，合适的使用组件属性能够达到更好的效果。

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