在前端开发中，我们经常需要使用各种 UI 组件来构建用户界面。antd 是一个流行的 React UI 库，它提供了丰富的组件和样式，可以帮助我们快速搭建高质量的用户界面。本文将介绍如何安装和使用 antd，并提供一些示例代码。
安装 antd
要使用 antd，首先需要安装它。我们可以通过 npm 来安装 antd：
npm install antd --save
这将会在我们的项目中安装 antd 包，并将其添加到 package.json 文件的依赖列表中。
引入 antd 组件
在你的 React 组件中引入 antd 组件很简单。只需要从 antd 包中导入所需的组件即可。例如，如果我们想使用 Button 组件，可以按照以下方式进行导入：
import { Button } from 'antd';然后就可以在组件中像使用普通的 HTML 元素一样使用 Button 了：
<Button type="primary">Click me</Button>
常用组件
antd 提供了大量的组件，以下是其中一些最常用的组件以及如何使用它们：
Button
import { Button } from 'antd';
<Button type="primary" danger>Primary</Button>
<Button type="ghost" size="large">Large Ghost</Button>
<Button type="dashed" disabled>Dashed Disabled</Button>Input
import { Input } from 'antd';
<Input placeholder="Basic usage" />
<Input.TextArea placeholder="TextArea usage" />
<Input.Search placeholder="Search input" enterButton />Modal
-- -------------------- ---- -------
------ - ------ ------ - ---- -------
----- ------------ - -- -------- --------- ------------ -- -- -
------ -
------
------------ ------
-----------------
---------------
-----------------------
-
------- ---------------
--------
--
--
----- ----------- - -- -- -
----- --------- ----------- - ----------------
----- --------- - -- -- -
-----------------
--
----- -------- - -- -- -
------------------
--
----- ------------ - -- -- -
------------------
--
------ -
--
------- -------------- --------------------
---- -----
---------
------------- ----------------- ------------------- --------------------------- --
---
--
--深入学习
总结
本文介绍了如何安装和使用 antd，以及一些常用的组件。antd 是一个强大而灵活的 React UI 库，可以帮助我们快速构建高质量的用户界面。如果你想深入学习 antd，请查看官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32241