阅读 267

React中Ant Design的使用方法(design的用法及搭配)

什么是Ant Design?

Ant Design是蚂蚁金服体验技术部经过大量的项目实践和总结,沉淀出设计语言 ,这但并不是单纯的设计语言,设计原则、控件规范和视觉尺寸,它还配套有前端代码实现方案。也就是说采用Ant Design后,UI设计和前端界面研发可同步完成,效率大大提升。目前有多家公司例如:阿里、美团、滴滴、简书采用。

Ant Design的官网:ant.design/index-cn\

如何引用Ant Design?

1.首先拥有一个React项目

运用官网的命令创建一个react项目

react.docschina.org/tutorial/tu…

npx create-react-app my-app复制代码

使用这条命令创建一个my-app文件夹, 创建完成后会在当前目录下出现一个my-app的文件夹,进入my-app目录,运行npm run start

cd my-app
npm run start复制代码

然后你就可以在浏览器中看到默认的React的页面了
创建完成后的文件效果如下图所示:

基本目录.png

2.在项目中安装Ant Design

npm install antd --save复制代码

引入css样式库

修改 src/App.css,在文件顶部引入 antd/dist/antd.css。

import 'antd/dist/antd.css'复制代码

进行代码测试:
代码测试.png
效果:效果.png

现在我们已经完成了Ant Design的引用

如何使用Ant Design官网中的api

当我们完成综上所述的操作时,你离灵活运用Ant Design就只差最后一步:熟记Api

  1. 打开Ant Design的官网

QQ图片20211110153415.png

2.点击组件,进入组件菜单页面(这里我们以button按钮为例)
点击左侧的Button选项 点击代码演示的展开代码(如下图所示)

2.png

QQ图片20211110154306.png

现在你就可以复制代码到你自己的页面中

QQ图片20211110154445.png

QQ图片20211110154522.png

这样你就完成了Ant Design的引用与使用


作者:孑律
链接:https://juejin.cn/post/7028844531776749581


文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐