npm 包 react-epa-scc 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

react-epa-scc 是一款基于 React 的样式组件库，提供了众多常用的 UI 组件，能减少前端开发的时间，提高开发效率。

本文将会详细介绍 react-epa-scc 的使用方法及常用的组件，以及如何定制个性化组件。

安装

使用 npm 安装 react-epa-scc

npm install react-epa-scc --save

或使用 yarn 安装

yarn add react-epa-scc

快速开始

在 React 项目中使用 react-epa-scc，先 import 样式：

import 'react-epa-scc/dist/index.css'

然后就可以使用组件了，以 Button 为例：

import { Button } from 'react-epa-scc'

function App() {
  return (
    <Button>Click me</Button>
  )
}

常用组件

Button

Button 组件是一款常用的 UI 组件，可以用于各种交互场景中。它具有以下属性：

属性	描述	类型	默认值
type	按钮类型，可选值：`default`, `primary`, `danger`, `link`	string	`default`
size	按钮大小，可选值：`small`, `default`, `large`	string	`default`
disabled	禁用状态，若为 `true`，则按钮不可点击	boolean	`false`
onClick	点击事件	function	无

示例代码：

<Button type="primary" size="large" onClick={() => console.log('click')}>Click me</Button>

Input

Input 组件是一款输入框组件，可以用于表单验证、搜索等场景中。它具有以下属性：

属性	描述	类型	默认值
type	输入框类型，可选值：`text`, `password`, `number`, `email`, `url`	string	`text`
placeholder	输入框提示	string	无
disabled	禁用状态，若为 `true`，则输入框不可编辑	boolean	`false`
onChange	输入事件	function	无
value	输入框的值	string	无

示例代码：

<Input type="text" placeholder="Please enter your name" onChange={handleInputChange} value={inputValue} />

Modal

Modal 组件是一款弹窗组件，可以用于展示弹窗信息。它具有以下属性：

属性	描述	类型	默认值
title	弹窗标题	string	无
visible	弹窗显隐状态，若为 `true`，则弹窗可见	boolean	`false`
onClose	关闭事件，点击遮罩层或者按 ESC 键触发	function	无
onOk	确认事件，点击确认按钮触发	function	无
onCancel	取消事件，点击取消按钮触发	function	无

示例代码：

<Modal title="Hello World" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
  <p>Welcome to my website</p>
</Modal>

定制组件

react-epa-scc 提供了一些基础的样式组件，但是我们往往也需要自定义一些个性化的组件。

以 Button 为例，我们可以自定义一个具有背景色和圆角的按钮组件。

先创建一个新的 CustomButton 组件，继承 Button 组件，并自定义样式。

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

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

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

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

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

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

然后在 CustomButton 组件的样式文件 CustomButton.css 中添加自定义样式：

.custom-button {
  background-color: #f00;
  border-radius: 10px;
}

最后在项目中使用 CustomButton 即可：

import CustomButton from './CustomButton'

function App() {
  return (
    <CustomButton>Click me</CustomButton>
  )
}

结语

react-epa-scc 提供了许多常用的 UI 组件，可以大大提高前端开发的效率。并且支持个性化定制，可以满足从颜值控到功能控的各种需求。希望本文对大家有所帮助！

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