介绍
@pupper/pupper-react 是一个 React UI 组件库，包含多个常用的 UI 组件（如按钮、表单、菜单等）。这个组件库使用 TypeScript 编写，支持主题切换和响应式布局。如果你正在构建一个 React 应用，可以使用 @pupper/pupper-react 来加快你的开发工作。
安装
你可以使用 npm 或 yarn 安装 @pupper/pupper-react：
npm install @pupper/pupper-react
或者
yarn add @pupper/pupper-react
使用
在你的 React 项目中，你可以像下面这样引入 @pupper/pupper-react：
import { Button } from '@pupper/pupper-react';
function App() {
return <Button>Click me</Button>;
}当然，你需要先确保在你的项目中引入了 React 和 React DOM。如果你使用的是 Create React App，那么这些库已经包含在项目中了。
组件
@pupper/pupper-react 包含很多常用的 UI 组件。这里是一些组件的使用示例：
Button
-- -------------------- ---- -------
------ - ------ - ---- -----------------------
-------- ----- -
------ -
------- ----------- -- ------------- -----------
----- --
---------
--
-Input
import { Input } from '@pupper/pupper-react';
function App() {
return (
<Input placeholder="Enter your name" />
);
}Select
-- -------------------- ---- -------
------ - ------ - ---- -----------------------
-------- ----- -
------ -
------- ---------------------
------- ----------------------------
------- ------------------------------
------- ------------------------------
---------
--
-主题
@pupper/pupper-react 支持主题切换。你可以通过设置 ThemeProvider 来切换主题：
-- -------------------- ---- -------
------ - -------------- ------ - ---- -----------------------
----- ----- - -
------- -
-------- ----------
--
--
-------- ----- -
------ -
-------------- --------------
------------- -----------
----------------
--
-@pupper/pupper-react 内置了两个主题：lightTheme 和 darkTheme。你可以轻松地使用它们：
-- -------------------- ---- -------
------ - -------------- ------- ----------- --------- - ---- -----------------------
-------- ----- -
------ -
-------------- -------------------
------------- --------------
-------------- ------------------
------------ --------------
----------------
----------------
--
-响应式布局
@pupper/pupper-react 支持响应式布局。你可以使用 Grid 和 Col 组件来创建响应式的布局：
-- -------------------- ---- -------
------ - ----- --- - ---- -----------------------
-------- ----- -
------ -
------
---- ------ -------
---
------
---- ------ -------
---
------
---- ------- -------
-----
------
-------
--
-在上面的例子中，我们创建了一个包含三列的响应式布局。在小屏幕上，每列占据整个屏幕的一半；在中等屏幕和大屏幕上，每列占据整个屏幕的四分之一。
结论
@pupper/pupper-react 是一个功能强大、易于使用的 React UI 组件库。在你的下一个项目中，使用 @pupper/pupper-react 来减少开发时间并创建出令人惊叹的用户界面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005731b81e8991b448e94fc