P04:Redux基础-用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='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非常感兴趣，你可以去官方网站阅读文档。

以上关于P04:Redux基础-用Ant Design制作UI界面的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。