简介
oke 是一个基于 React 和 Ant Design 的 UI 组件库，提供了多种实用的组件，包含表单、弹窗、菜单、表格等等，可以直接在 React 项目中使用。本文将详细介绍如何使用 oke。
安装
使用 npm 安装 oke：
npm install oke
安装完成后，可以在项目中引入组件：
import { Input } from 'oke';可以根据需要引入所需的组件。
使用
表单
Input
Input 组件可以用来输入文字，支持在输入框内显示清除按钮、搜索按钮、密码可见按钮等等。下面是一个简单的展示 Input 的例子：
-- -------------------- ---- -------
------ - ----- - ---- ------
-------- ------------- -
----- ------- --------- - -------------
------ -
-----
------ ------------- ----------- -- ------------------------- --
--------------------
------
--
-Select
Select 组件可以用来选择一个选项，下面是一个简单的展示 Select 的例子：
-- -------------------- ---- -------
------ - ------ - ---- ------
----- ------- - -
- ------ -------- ------ ---- --
- ------ ------- ------ ---- --
- ------ --------- ------ ---- --
--
-------- ------------- -
----- ------- --------- - ---------------
------ -
-----
------- ------------- ----------- -- ------------ ----------------- --
---------------------------
------
--
-Radio
Radio 组件可以用来选择一个选项（单选），下面是一个简单的展示 Radio 的例子：
-- -------------------- ---- -------
------ - ----- - ---- ------
----- ------- - -
- ------ -------- ------ ---- --
- ------ ------- ------ ---- --
- ------ --------- ------ ---- --
--
-------- ------------- -
----- ------- --------- - ---------------
------ -
-----
------------ ------------- ----------- -- ------------------------- ----------------- --
---------------------------
------
--
-Checkbox
Checkbox 组件可以用来选择多个选项（多选），下面是一个简单的展示 Checkbox 的例子：
-- -------------------- ---- -------
------ - -------- - ---- ------
----- ------- - -
- ------ -------- ------ ---- --
- ------ ------- ------ ---- --
- ------ --------- ------ ---- --
--
-------- ------------- -
----- ------- --------- - -------------
------ -
-----
--------------- ------------- ----------- -- ------------ ----------------- --
----------------------- -------
------
--
-弹窗
Modal
Modal 组件可以展示一个弹窗，有确定和取消按钮，可以用来做确认提示等等。下面是一个简单的展示 Modal 的例子：
-- -------------------- ---- -------
------ - ------ ------ - ---- ------
-------- ------------- -
----- --------- ----------- - ----------------
----- -------- - -- -- -
---------------------
------------------
--
----- ------------ - -- -- -
---------------------
------------------
--
------ -
-----
------- ----------- -- -------------------------------
------ ----------------- --------------- ----------------------- ---------------
---------------
--------
------
--
-菜单
Menu
Menu 组件可以展示一个菜单，可以用来做导航等等。下面是一个简单的展示 Menu 的例子：
-- -------------------- ---- -------
------ - ---- - ---- ------
-------- ------------- -
----- -------------- ---------------- - -------------------
----- ------------ - -- --- -- -- -
-----------------------
--
------ -
----- --------------------------- ----------------------- ------------------
---------- -------------------------
---------- ----------------------------
---------- ------------------------------
-------
--
-表格
Table
Table 组件可以展示一个表格，可以用来展示数据等等。下面是一个简单的展示 Table 的例子：
-- -------------------- ---- -------
------ - ----- - ---- ------
----- ---------- - -
- --- -- ----- ----- ---- -- --
- --- -- ----- ----- ---- -- --
- --- -- ----- ----- ---- -- --
--
----- ------- - -
- ------ ----- ---------- ---- --
- ------ ----- ---------- ------ --
- ------ ----- ---------- ----- --
--
-------- ------------- -
------ -
------ ----------------------- ----------------- ----------- --
--
-总结
本文介绍了 oke 的基本用法，包含了表单、弹窗、菜单、表格，大家可以根据需要引入所需的组件。oke 提供了丰富的 API，可以满足多种需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066fac3d1de16d83a671e5