Antd 将TodoList 页面美化一下

最新推荐文章于 2022-10-23 22:09:53 发布

原创最新推荐文章于 2022-10-23 22:09:53 发布 · 777 阅读

1 ·

CC 4.0 BY-SA版权

React基础内容学习记录专栏收录该内容

24 篇文章

订阅专栏

Antd 是一个比较好的前端UI框架。

官网：https://ant.design/index-cn

在React 项目中下载，使用 yarn add 命令即可。

使用也很简单。

在组件中引用它的css 样式，然后按需引入即可。

下面贴上代码。

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

const data = [
  'Racing car sprays burning fuel into crowd.',
  'Japanese princess to wed commoner.',
  'Australian walks 100km after outback crash.',
  'Man charged over missing wedding girl.',
  'Los Angeles battles huge wildfires.',
];

class BeautifulToDoList extends Component {
  render() {
    return (
      <div style={{marginTop: '10px',marginLeft: '10px'}}>
        <Input
          placeholder="todo info"
          style={{width: 300, marginRight: '10px'}}
        />
        <Button type="primary">提交</Button>
        <List
          style={{marginTop: '10px', width: '300px'}}
          bordered
          dataSource={data}
          renderItem={item => (<List.Item>{item}</List.Item>)}
        />
      </div>
    )
  }
}

export default BeautifulToDoList;

然后，轻松的美化了todolist