当前位置：首页 > news >正文

antd学习笔记

news 来源：原创 2024/9/28 18:24:12

antd组件库为Web应用提供了丰富的基础UI组件，antd全称为：ant-design。

antd官网：Ant Design - 一套企业级 UI 设计语言和 React 组件库

一、安装

npm install antd

或

yarn add antd

1、antd的使用例子

//在index.js文件中引入

import { 引入的组件 } from 'antd';

//在ReactDOM渲染即可

ReactDOM.render(<组件名 />,mountNode);

//记得引入css样式

import 'antd/dist/antd.css'; 或者 'antd/dist/antd.less'

css的引入是全局引入，引入一次即可

2、创建一个React项目，并导入antd组件库

1、创建React项目，并运行
create-react-app antd-learn
cd antd-learn
npm run start
2、使用VScode打开该文件夹，并下载antd组件库
code .
npm install antd
3、导入antd组件和css代码

二、antd的学习

1、Grid栅格系统（24）

24栅格系统，即一行24个单位

2、Layout布局

构建过程

1、在ant-Design上选中想要的组件样式，复制代码

注意：复制时，默认复制的是Typescript，而不是JavaScript。

选中喜欢的组件样式后，复制代码

2、新建文件，导入相应的css代码

3、效果展示

上述实例中，页面高度并不是视口高度，可通过css重写，将组件设置为视口高度。

改动如下：

找到css的选择器：

在css中进行重写：

  /* 将页面布局设置为视口高度 */.ant-layout {height: 100vh;}

效果如下：

3、下拉菜单

import { Button, Dropdown, Space } from 'antd';
import React from 'react';
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</a>),},{key: '3',label: (<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">3rd menu item</a>),},
];
const App = () => (<Space direction="vertical"><Space wrap><Dropdownmenu={{items,}}placement="bottomLeft"><Button>bottomLeft</Button></Dropdown><Dropdownmenu={{items,}}placement="bottom"><Button>bottom</Button></Dropdown><Dropdownmenu={{items,}}placement="bottomRight"><Button>bottomRight</Button></Dropdown></Space><Space wrap><Dropdownmenu={{items,}}placement="topLeft"><Button>topLeft</Button></Dropdown><Dropdownmenu={{items,}}placement="top"><Button>top</Button></Dropdown><Dropdownmenu={{items,}}placement="topRight"><Button>topRight</Button></Dropdown></Space></Space>
);
export default App;

效果如下：

4、步骤条

import { LoadingOutlined, SmileOutlined, SolutionOutlined, UserOutlined } from '@ant-design/icons';
import { Steps } from 'antd';
import React from 'react';
const App = () => (<Stepsitems={[{title: 'Login',status: 'finish',icon: <UserOutlined />,},{title: 'Verification',status: 'finish',icon: <SolutionOutlined />,},{title: 'Pay',status: 'process',icon: <LoadingOutlined />,},{title: 'Done',status: 'wait',icon: <SmileOutlined />,},]}/>
);
export default App;

效果如下：

5、轮播组件（走马灯）

import { Carousel } from 'antd';
import React from 'react';
const contentStyle = {height: '160px',color: '#fff',lineHeight: '160px',textAlign: 'center',background: '#364d79',
};
const App = () => (<Carousel autoplay><div><h3 style={contentStyle}>1</h3></div><div><h3 style={contentStyle}>2</h3></div><div><h3 style={contentStyle}>3</h3></div><div><h3 style={contentStyle}>4</h3></div></Carousel>
);
export default App;

6、表格

1、在js中引入Table标签

import { Layout, Menu, Carousel, Table } from 'antd';<Table dataSource={dataSource} columns={columns} />;

2、在js中写入静态数据

  const dataSource = [{key: '1',name: '张砚拙',age: 23,address: '西安市雁塔区',},{key: '2',name: '不知名',age: 22,address: '哈尔滨市南岗区',},];const columns = [{title: '姓名',dataIndex: 'name',key: 'name',},{title: '年龄',dataIndex: 'age',key: 'age',},{title: '住址',dataIndex: 'address',key: 'address',},];

3、运行效果