简介
@gutenye/antd-mobile 是一款基于 React 和 Ant Design Mobile 的 UI 组件库，专为移动端应用程序开发而设计。它提供了一系列高质量、易用性强的组件，包括按钮、标签、导航栏、表单、列表等等。本文将介绍该 npm 包的使用方法和相关实例。
安装
首先，你需要创建一个新的 React 项目。如果已经有项目了，可以直接开始第 2 步。
npx create-react-app my-app cd my-app
然后，安装 @gutenye/antd-mobile：
npm install @gutenye/antd-mobile --save
安装完成后，你需要导入需要使用的组件，比如 Button：
import { Button } from '@gutenye/antd-mobile';Button 组件
在 Ant Design Mobile 中，Button 组件用于添加按钮。它可以配置不同的样式、大小、图标等属性。
不同样式的 Button
可以通过配置 type 属性来设置样式，Button 组件默认提供了 default、primary、warning、ghost 和 ghost-primary 5 种不同的按钮样式。
-- -------------------- ---- -------
------ - ------ - ---- -----------------------
-------- ----- -
------ -
--
------------------------
------- -------------------------------
------- -------------------------------
------- ---------------------------
------- -------------------------------------------
---
--
-不同尺寸的 Button
可以通过配置 size 属性来设置按钮大小，Button 组件默认提供了 large、small、inline 和 mini 4 种不同的按钮大小。
-- -------------------- ---- -------
------ - ------ - ---- -----------------------
-------- ----- -
------ -
--
------- ---------------------------
------------------------
------- ---------------------------
------- -----------------------------
------- -------------------------
---
--
-带有图标的 Button
-- -------------------- ---- -------
------ - ------- ---- - ---- -----------------------
-------- ----- -
------ -
--
------- ----------- --------------------- -------- -------------
------- ----------- --------------------- --- ---------------
---- ----
---------
------- ----------- --------------------- --- -------------- -------------
---- ----
---------
---
--
-List 组件
在 Ant Design Mobile 中，List 组件用于展示列表，它提供了多种属性来设置列表项的样式、内容和行为。
最基本的 List
-- -------------------- ---- -------
------ - ---- - ---- -----------------------
-------- ----- -
------ -
------
--------------- -------------
--------------- -------------
--------------- -------------
-------
--
-带左右滑动的 List
-- -------------------- ---- -------
------ - ----- ----------- - ---- -----------------------
-------- ----- -
----- ------- - -
-
----- ---------
-------- -- -- ----------------------
------ - ---------------- ---------- ------ ------- --
--
-
----- ---------
-------- -- -- ----------------------
------ - ---------------- ---------- ------ ------- --
--
--
------ -
------
------------- ------- -- ---------- -- -- -
------------ ------- --------- ----------------
--------------- -- - --------------
--------------
---
-------
--
-NavBar 组件
在 Ant Design Mobile 中，NavBar 组件用于添加导航栏，它可以配置不同的标题、图标和行为。
带标题的 NavBar
import { NavBar } from '@gutenye/antd-mobile';
function App() {
return <NavBar>Ant Design Mobile</NavBar>;
}带左右按钮的 NavBar
-- -------------------- ---- -------
------ - ------- ---- - ---- -----------------------
-------- ----- -
------ -
-------
------------
------------------ ----------- ---
------------------- --------------- ---
-
--- ------ ------
---------
--
-最后
以上是 @gutenye/antd-mobile 的简单使用介绍，希望能够对你有所帮助。你可以在官方文档中查看更多组件的属性和使用方法，链接：https://mobile.ant.design/components/。
本文同步发布于我的个人博客：https://example.com/npm-package-antd-mobile-tutorial。
如果你有问题或建议，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/100311