简介
DinaKit 是一个基于 React 和 TypeScript 的前端 UI 组件库，可以帮助开发者快速搭建界面和实现交互逻辑。它提供了一系列常用的 UI 组件，如按钮、表单、弹窗等，同时支持多种主题风格和自定义样式。
本文将详细介绍如何使用 DinaKit，包括安装、导入、使用和扩展等方面。
安装
要使用 DinaKit，需要先安装 Node.js 和 npm。然后，在命令行中执行以下语句即可安装 DinaKit：
--- ------- ------- ------
导入
在项目中使用 DinaKit，需要先导入所需的组件。可以使用以下方式导入整个库：
------ - -- ------- ---- ----------
也可以按需导入单个组件：
------ - ------ - ---- ----------
使用
导入组件后，就可以在 JSX 中使用它们了。例如，要创建一个按钮，可以这样写：
------- ----------- -- ------------- --------------- -----------
可以给按钮指定各种属性来控制它的外观和行为，比如 disabled、style、className 等。
除了预定义的组件，DinaKit 还支持自定义组件。可以通过 createComponent 函数来创建一个自定义组件：
------ - --------------- - ---- ---------- ----- ----------- - ------------------ -- - -- -------- --- ------------ -------------- -------------- ---
扩展
DinaKit 提供了丰富的样式变量和函数，方便开发者根据需求自定义主题和样式。可以使用 ThemeProvider 组件将这些样式传递给整个应用程序：
------ - ------------- - ---- ---------- ----- ----- - - -- ---- -- -------------- -------------- ---- -- ----------------
同时，也可以使用 withStyles 高阶组件将样式直接应用到组件上：
------ - ---------- - ---- ---------- ----- ------ - - -- ---- -- ----- ----------- - -- ------- -- -- - ---- ------------------------------- ------------ -- ------ ------- --------------------------------
示例代码
下面是一个简单的示例，演示如何使用 DinaKit 创建一个带有样式和交互的表单：
------ ------ - -------- - ---- --------
------ -
-------
-----
------
--------------
----------------
-----------
- ---- ----------
----- --------- - ------------------ -- --
----- -
-------- -------
----------- ---------
--------------- ---------
---------- --------
---------------- ------------------------
--
----- -
------ --------
---------------- ---------------------
-------- -------
--
------ -
------------- -------
--
------- -
------ -------
---------- -------
--
----
----- -------- - ----------------------- -- -
------- ---------- ------------------------------ --
---
----- --- - -- -- -
----- ------ -------- - -------------
----- ---------- ------------ - -------------
----- ------- - ------------
----- ------------ - ------- -- -
-----------------------
------------ ------------------ --------------
--
------ -
--------------
--------
------- -
----------- ----------
-------- ----------
-------- ----------
---------- ----------
--
--
-
---- -------------------------
----- ------------------------ ------------------------
------
-------------------------
------------
------------
----------------
----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------