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

目录
文章目录隐藏
  1. 引入 CSS 样式
  2. 编写 Input 框
  3. 编写 Button 按钮
  4. List 组件制作列表
  5. 总结

已经完成了基本开发环境和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非常感兴趣,你可以去官方网站阅读文档。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P04:Redux基础-用Ant Design制作UI界面

发表回复