最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

P04:Redux基础-用Ant Design制作UI界面

已经完成了基本开发环境和AntDesign的安装。这节课用Ant Design制作一下TodoList的界面。本文不会对Ant Design深入讲解,只是为了让课程的界面好看一点,如果你对它有强烈的学习需要或愿望,可以看一下Ant Design官方文档,文档都是中文,没有什么难度。先看一下实现的效果图。

P04:Redux基础-用Ant Design制作UI界面

引入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='mybj' 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>

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

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

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

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

总结

这节课主要用Ant Design制作了todoList的界面,使用了<Input><Button><List>组件,因为这个教程是讲Redux的,所以这些组件的使用方法并没有展开讲,主要是制作一个UI界面,为以后的课程作铺垫。如果你对Ant Design非常感兴趣,你可以去官方网站阅读文档。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P04:Redux基础-用Ant Design制作UI界面

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发