antd
antd是AntDesign的简称,它是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。
国外镜像:https://ant.design/docs/react/introduce-cn
国内镜像:https://ant-design.gitee.io/docs/react/introduce-cn
国内的反应会更快些。
对于我们前端开发者来说,需要了解antd得到组件部分,还有它如何使用到React组件中的部分。
React中使用antd
1.首先需要安装antd,进入我们的项目文件打开终端输入。
yarn add antd
当然也可以使用npm命令,但比较推荐使用yarn,为什么呢?因为yarn更好用。
2.紧接着就是引入样式,只需引入一次即可。
在跟文件index.js文件里加上
import 'antd/dist/reset.css';
或是在App.css里加上
@import '~antd/dist/antd.css';
3.下面我们可以开始使用组件了,这里我们选择了下拉菜单,我们选择第一个,看见下方的<>可以点击一下然后选择你需要的代码(ts/js),在这里我们选择了JavaScript
下面变色复制代码了
import React from 'react';
import { DownOutlined, SmileOutlined } from '@ant-design/icons';
import { Dropdown, Space } from 'antd';
function Home() {
const items = [
{
key: '1',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
1st menu item
</a>
),
},
{
key: '2',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
2nd menu item (disabled)
</a>
),
icon: <SmileOutlined />,
disabled: true,
},
{
key: '3',
label: (
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
3rd menu item (disabled)
</a>
),
disabled: true,
},
{
key: '4',
danger: true,
label: 'a danger item',
},
];
return (
<div className="Home">
<Dropdown
menu={{
items,
}}
>
<a onClick={(e) => e.preventDefault()}>
<Space>
Hover me
<DownOutlined />
</Space>
</a>
</Dropdown>
</div>
);
}
export default Home;
运行代码
yarn start
这样便出来antd中的样子了
andt技巧
快速查找你想要的组件功能
还以下拉菜单为例,右侧有组件的功能介绍,点击便可滑到组件的位置
如果某个组件里只用你想要的部分功能,向下滑动参考API里面有组件封装好的属性参数,都有其介绍供你使用。