一、理解 UI 组件库
- 封装了一些通用的界面功能效果的组件, 简化开发编码
- 流行的React UI 组件库
- 国内:
Ant Designhttps://ant-design.antgroup.com/index-cn - 国外:
Material UIhttps://www.mdui.org/design/
- 国内:
二、antd 基本使用
2.1 下载antd
yarn add antd / npm i antd
yarn add @ant-design/icons # 后面下载一下, 增加提示功能
2.2 使用antd
- index.ts
import 'antd/dist/reset.css' // 引入antd的css样式
- App.tsx
import { Button } from 'antd'
export default function App() {
return (
<div style={{ margin: 30 }}>
<p>button按钮</p>
<Button type="primary">点我</Button>
</div>
);
}
2.3 自定义主题
问题:
antd默认的主体颜色是蓝色, 而我们的可以自定义任意的颜色解决:
使用ConfigProvider来解决
在index.tsx文件中导入
import { ConfigProvider } from 'antd';
添加配置
root.render(
<ConfigProvider
theme={{
token: {
colorPrimary: '#00b96b',
},
}}
>
<App />
</ConfigProvider>
);
三、antd 中常用组件
3.1 按钮
import React from 'react';
import { Button } from 'antd'
import { SearchOutlined } from '@ant-design/icons';
function App() {
return (
<div style={{ margin: 50 }}>
<Button type='primary' className='ml'>点我</Button>
<Button type="primary" className='ml' icon={<SearchOutlined />}>
搜索
</Button>
<Button type="primary" disabled className='ml'>
不可用按钮
</Button>
<Button type="primary" danger className='mb'>
我是红色按钮
</Button>
</div>
);
}
export default App;
3.2 表单
import React from 'react';
import { Button, Form, Input, Checkbox } from 'antd'
function App() {
return (
<div style={{ margin: 50 }}>
<Form
name="basic"
labelCol={{ span: 3 }}
wrapperCol={{ span: 8 }}
initialValues={{ remember: true, username: 'admin' }}
autoComplete="off"
>
<Form.Item
label="用户名"
name="username"
rules={[{ required: true, message: '请输入用户名' }]}
>
<Input />
</Form.Item>
<Form.Item
label="密码"
name="password"
rules={[{ required: true, message: '请输入密码' }]}
>
<Input.Password />
</Form.Item>
<Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 3 }}>
<Checkbox>Remember me</Checkbox>
</Form.Item>
<Form.Item wrapperCol={{ offset: 3 }}>
<Button type="primary" htmlType="submit">
获取
</Button>
</Form.Item>
</Form>
</div>
);
}
export default App;
获取表单数据的值文章来源：https://www.toymoban.com/news/detail-542767.html
const [form] = Form.useForm();
let finish = () => {
let value = form.getFieldsValue();
console.log(value)
}
<Form form={form} ...>
3.3 表格
import React from 'react';
import { Table } from 'antd'
function App() {
const dataSource = [
{
name: '胡彦斌1',
age: 32,
address: '西湖区湖底公园1号',
},
{
name: '胡彦祖2',
age: 42,
address: '西湖区湖底公园1号',
},
{
name: '胡彦祖3',
age: 42,
address: '西湖区湖底公园1号',
},
{
name: '胡彦祖4',
age: 42,
address: '西湖区湖底公园1号',
},
{
name: '胡彦祖5',
age: 42,
address: '西湖区湖底公园1号',
},
{
name: '胡彦祖6',
age: 42,
address: '西湖区湖底公园1号',
},
{
name: '胡彦祖7',
age: 42,
address: '西湖区湖底公园1号',
},
{
name: '胡彦祖8',
age: 42,
address: '西湖区湖底公园1号',
},
{
name: '胡彦祖9',
age: 42,
address: '西湖区湖底公园1号',
},
{
name: '胡彦祖10',
age: 42,
address: '西湖区湖底公园1号',
},
];
const columns = [
{
title: '姓名',
//dataIndex需要和实际数据列名称对应，否则将不显示
dataIndex: 'name',
},
{
title: '年龄',
dataIndex: 'age',
},
{
title: '住址',
dataIndex: 'address',
},
];
return (
<div style={{ margin: 50 }}>
<Table columns={columns} dataSource={dataSource} rowKey='name' bordered
pagination={{
current: 1,
pageSize: 5,
total: 100,
showQuickJumper: true,
pageSizeOptions: [2, 5, 10, 20],
showTotal: (total) => {
return `总数${total}条`
}
}}
/>
</div>
);
}
export default App;
案例：图书管理界面文章来源地址https://www.toymoban.com/news/detail-542767.html
import React from 'react';
import { Table } from 'antd'
import axios from 'axios'
import { useEffect } from 'react';
import { useState } from 'react';
function App() {
let [booklist, setBooklist] = useState([]);
useEffect(() => {
async function main() {
let { data } = await axios.get('/api/books');
setBooklist(data);
}
main();
}, [])
const columns = [
{
title: '编号',
//dataIndex需要和实际数据列名称对应，否则将不显示
dataIndex: 'id',
},
{
title: '书名',
dataIndex: 'name',
},
{
title: '作者',
dataIndex: 'autor',
},
{
title: '图片',
dataIndex: 'img',
render: (pic: string) => {
return <img src={'/image/' + pic} style={{ width: 100, height: 100 }} />
}
},
];
return (
<div style={{ margin: 50 }}>
<Table columns={columns} dataSource={booklist} rowKey='name' bordered
pagination={{
current: 1,
pageSize: 5,
total: 10,
showQuickJumper: true,
pageSizeOptions: [2, 5, 10, 20],
showTotal: (total) => {
return `总数${total}条`
}
}}
/>
</div>
);
}
export default App;
四、antd在axios请求中添加ts类型约束
4.1 创建接口文件
export interface BookItem {
id: number,
name: string,
infro: string,
img: string,
autor: string
}
export type BookList = BookItem[];
4.2 修改组件
import React from 'react';
import { Table } from 'antd'
import axios from 'axios'
import { useEffect } from 'react';
import { useState } from 'react';
import type { BookList } from './book'
function App() {
let [booklist, setBooklist] = useState<BookList>([]);
useEffect(() => {
async function main() {
let { data } = await axios.get<BookList>('/api/books');
setBooklist(data);
}
main();
}, [])
const columns = [
{
title: '编号',
//dataIndex需要和实际数据列名称对应，否则将不显示
dataIndex: 'id',
},
{
title: '书名',
dataIndex: 'name',
},
{
title: '作者',
dataIndex: 'autor',
},
{
title: '图片',
dataIndex: 'img',
render: (pic: string) => {
return <img src={'/image/' + pic} style={{ width: 100, height: 100 }} />
}
},
];
return (
<div style={{ margin: 50 }}>
<Table columns={columns} dataSource={booklist} rowKey='name' bordered
pagination={{
current: 1,
pageSize: 5,
total: 10,
showQuickJumper: true,
pageSizeOptions: [2, 5, 10, 20],
showTotal: (total) => {
return `总数${total}条`
}
}}
/>
</div>
);
}
export default App;
到了这里，关于react-antd的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
