P04:用Ant Design制作UI界面

阐述

已经完成了基本开发环境和AntDesign的安装。

这节课用Ant Design制作一下TodoList的界面。

本文不会对Ant Design深入讲解,只是为了让课程的界面好看一点,如果你对它有强烈的学习需要或愿望,可以看一下Ant Design官方文档,文档都是中文,没有什么难度。先看一下实现的效果图。

在这里插入图片描述

引入CSS样式

在使用Ant Design时,第一件事就是先引入CSS样式,有了样式才可以让UI组件显示正常。

可以直接在 /src/TodoList.js 文件中直接用 import 引入。

import 'antd/dist/antd.css'

编写Input框

引入CSS样式之后,可以快乐的使用 antd 里的 <input> 框了,在使用的时候,你需要先引入Input组件。

全部代码如下:

import React, { Component } from 'react';
import 'antd/dist/antd.css'
import { Input } from 'antd'

class TodoList extends Component {
    render() { 
        return ( 
            <div>
                <div>
                    <Input placeholder='willem' style={{ width:'250px'}}/>
                </div>
            </div>
         );
    }
}
export default TodoList;

在Input组件里,我们设置了style,注意设置这个时不带单引号或者双引号的。

写完后就可以简单的看一下效果了。

在这里插入图片描述

编写Button按钮

Ant Design 也提供了丰富好看的按钮组件,直接使用最简单的 Primary 按钮。使用按钮组件前也需要先引入,为了让组件更好看,还加入了一些 Margin 样式,代码如下:

import React, { Component } from 'react';
import 'antd/dist/antd.css'
import { Input , Button } from 'antd'

class TodoList extends Component {
    render() { 
        return ( 
            <div style={{margin:'10px'}}>
                <div>
                    <Input placeholder='Write something' style={{ width:'250px', marginRight:'10px'}}/>
                    <Button type="primary">增加</Button>
                </div>
            </div>
         );
    }
}
export default TodoList;

在这里插入图片描述

List组件制作列表

同样用 Ant Desgin 制作 todoList 的列表,在制作前,我们先在 class 外部声明一个 data 数组,数组内容可以随便写。

const data=[
    '早8点开晨会,分配今天的开发工作',
    '早9点和项目经理作开发需求讨论会',
    '晚5:30对今日代码进行沟通会'
]

然后引入 List 组件,代码如下:

import { Input , Button , List } from 'antd'

最后就是使用这个 List 组件了。

<div style={{margin:'10px',width:'300px'}}>
    <List
        bordered
        dataSource={data}
        renderItem={item=>(<List.Item>{item}</List.Item>)}
    />    
</div>

在这里插入图片描述

为了方便学习,我给出了全部代码,如果你作起来有难度,可以直接复制下面的代码。

TodoList.js

import React, { Component } from 'react';
import 'antd/dist/antd.css'
import { Input , Button , List } from 'antd'

const data=[
    '早8点开晨会,分配今天的开发工作',
    '早9点和项目经理作开发需求讨论会',
    '晚5:30对今日代码进行沟通会'
]

class TodoList extends Component {
    render() { 
        return ( 
            <div style={{margin:'10px',width:'300px'}}>
                <List
                    bordered
                    dataSource={data}
                    renderItem={item=>(<List.Item>{item}</List.Item>)}
                />    
            </div>
         );
    }
}
export default TodoList;

总结

这节课主要用Ant Design制作了todoList的界面,使用了 <Input>,<Button><List>组件,因为这个教程是讲Redux的,所以这些组件的使用方法并没有展开讲,主要是制作一个UI界面,为以后的课程作铺垫。

如果你对Ant Design非常感兴趣,你可以去官方网站阅读文档。

demo

在这里插入图片描述

TodoList.js

import React, { Component } from 'react';
import 'antd/dist/antd.css'
import { Input , Button , List } from 'antd'

const data=[
    '早8点开晨会,分配今天的开发工作',
    '早9点和项目经理作开发需求讨论会',
    '晚5:30对今日代码进行沟通会'
]

class TodoList extends Component {
    render() { 
        return (
            <div style={{margin:'10px',width:'300px'}}>
                <div style={{margin:'10px'}}>
                    <div>
                        <Input placeholder='Write something' style={{ width:'150px', marginRight:'10px'}}/>
                        <Button type="primary">增加</Button>
                    </div>
                </div>
                <List
                    bordered
                    dataSource={data}
                    renderItem={item=>(<List.Item>{item}</List.Item>)}
                />    
            </div>
         );
    }
}
export default TodoList;

index.js

import React from 'react';
import ReactDOM from 'react-dom'
import TodoList from './TodoList'

ReactDOM.render(<TodoList/>,document.getElementById('root'))

红色字体部分:
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

知其黑、受其白

喝个咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值