npm 包 @eidos/ui-kit 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

@eidos/ui-kit 是一个基于 React 的 UI 组件库，提供了一系列易用、易拓展的 UI 控件，其中包括 Button、Pagination、Table 等常用组件。本文将介绍如何使用该组件库，并提供一些示例代码帮助读者更好的理解和运用。

安装

使用 npm 进行安装：

$ npm i @eidos/ui-kit

使用

在您的 React 项目中引入需要使用的组件，并按照需要添加相应的 props 即可。

import { Button } from "@eidos/ui-kit";

function App() {
  return <Button text="Click me!" />;
}

组件列表和 props

Button

text(string): 按钮显示的文本内容
variant(string): 按钮的类型，取值为 'primary' 或 'secondary'。默认值为 'primary'
disabled(bool): 是否禁用按钮，默认为 false

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

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

Pagination

currentPage(number): 当前页数，默认为 1
onChange(function): 翻页时触发的回调函数

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

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

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

Table

headers(array): 表格标题头
data(array): 表格数据

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

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

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

总结

@eidos/ui-kit 是一个易用、易拓展的 UI 组件库，并提供了多种常用组件，可帮助开发人员快速开发项目。本文介绍了安装和使用该组件库的方法，同时也提供了一些示例代码帮助读者更好的理解和运用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/eidos-ui-kit