npm包sparky-ui使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是sparky-ui?

sparky-ui是一个基于React框架开发的UI组件库，它包含了各类常用的UI组件和工具函数。

它的优点在于简单易用，且易于定制。你可以根据自己的需要来定制化拓展，方便快捷。不仅如此，sparky-ui还支持Typescript，保证代码的类型安全。

安装使用

安装

通过npm进行安装：

npm install sparky-ui

引入

在你的React项目中进行引入：

import Button from 'sparky-ui/Button';

其余组件如此类推。

使用

接下来，在你的应用中就可以直接通过组件名使用组件了，比如Button。

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'sparky-ui';

ReactDOM.render(
  <Button>hello world</Button>, 
  document.getElementById('root')
);

组件列表及使用示例

Button

属性

名称	类型	默认值
children	ReactNode	-
className	string	-
disabled	boolean	false
onClick	(e: MouseEvent) => void	-
type	'primary' / 'secondary' / 'success' / 'warning' / 'danger' / 'link'	'primary'

使用示例

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

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

Card

属性

名称	类型	默认值
children	ReactNode	-
className	string	-

使用示例

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

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

Input

属性

名称	类型	默认值
className	string	-
disabled	boolean	false
id	string	-
maxLength	number	-
onChange	(e: ChangeEvent<htmlinputelement>) => void	-
placeholder	string	-
type	'text' / 'password' / 'email' / 'number' / 'search' / 'tel' / 'url'	'text'
value	string	-

使用示例

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

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

Modal

属性

名称	类型	默认值
children	ReactNode	-
className	string	-
title	string	-
visible	boolean	false
onCancel	() => void	-
onOk	() => void	-
maskClosable	boolean	true

使用示例

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

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

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

总结

以上就是sparky-ui的使用教程。它的组件库涵盖了丰富的UI组件和工具函数，易于使用和扩展，并且支持Typescript，保证了代码的类型安全，我们可以根据自己的需要来选择。希望这篇文章对大家有所帮助。

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