简介
stately-ui 是一个基于 React 的 UI 组件库，致力于为 React 开发者提供高可用、易用、美观的 UI 组件，同时也支持 SSR。此外，stately-ui 还支持 typescript，大大减少了类型错误的可能性。
安装
npm 安装方式：
npm install stately-ui --save
使用
我们以 Button 组件为例：
import { Button } from 'stately-ui';
function MyButton() {
return <Button size="large" onClick={() => alert('hello world!')}>Click Me!</Button>;
}通过引入组件，以 JSX 的方式使用。
主要组件
Button
Button 组件是一个常用的按钮组件，支持三种类型：primary、danger、default，以及三种尺寸：small、medium、large，你可以通过传递不同的 props 来定制按钮。
-- -------------------- ---- -------
------ - ------ - ---- -------------
-------- --------------- -
------ -
-----
--------------- ---------------
------- ---------------------- ---------------
------- -------------------- ---------------
------- ------------------ ---------------
------- -------------------- ---------------
------- ------------------ ---------------
------
--
-Input
Input 组件用于输入框，支持 placeholder、disabled、defaultValue 等 props，同时也支持带前后缀的输入框。
-- -------------------- ---- -------
------ - ----- - ---- -------------
-------- -------------- -
------ -
-----
------ -------------------- --
------ ------------------- --------------- --
------ ------------------ -------- --
------ --------------- --------------------- --
------ ----------------- --------------------- --
------
--
-Modal
Modal 组件是一个对话框组件，可以用来展示一些重要信息或者交互。
-- -------------------- ---- -------
------ - ------ ------ - ---- -------------
------ - -------- - ---- --------
-------- -------------- -
----- --------- ----------- - ----------------
----- --------- - -- -- -
-----------------
--
----- --------- - -- -- -
------------------
--
------ -
--
------- ---------------------- --------------
------ ----------------- ---------------------
-------- ----------
-------------
------- -------------------------------
--------
---
-
-Table
Table 组件用于展示数据，支持表头、固定列、排序、分页等功能。
-- -------------------- ---- -------
------ - ----- - ---- -------------
----- ---------- - -
-
---- ----
----- ----- -------
---- ---
-------- ---- ---- --- - ---- ------
--
-
---- ----
----- ---- -------
---- ---
-------- ------- --- - ---- ------
--
-
---- ----
----- ---- -------
---- ---
-------- ------- --- - ---- ------
--
--
----- ------- - -
-
------ -----
---------- -------
---- -------
--
-
------ -----
---------- ------
---- ------
--
-
------ -----
---------- ----------
---- ----------
--
--
-------- -------------- -
------ -
------ ----------------------- ----------------- --
--
-自定义主题
stately-ui 提供了一些默认主题，但是你也可以通过覆盖一些 CSS 变量或者样式来自定义主题。
:root {
--primary-color: #1890ff;
}
.my-button {
background-color: var(--primary-color);
color: #fff;
}总结
通过本篇教程，我们学习了 stately-ui 的使用，同时也了解了一些常用的 UI 组件的使用方法。通过学习，我们可以更加高效、方便、优雅地开发 React 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055abd81e8991b448d8578