react-ui框架(antd)

ui框架(antd)

1.安装antd

cnpm i antd --save

2.使用图标,需要安装图标库

cnpm i @ant-design/icons --save

3.使用

index.js
// 引入antd样式
import 'antd/dist/antd.css';

import React, { Component } from 'react'
import Banner from '../components/Banner'
import { Button,Divider,Space } from 'antd';
import {StepForwardOutlined} from '@ant-design/icons'
export default class Index extends Component {
    constructor(){
        super()
        this.state = {
            imgs:[
                '/slider/01.jpg',
                '/slider/02.jpg',
                '/slider/03.jpg',
            ]
        }
    }
    render() {
        return (
            <div>
                <Space>
                    <Button type="primary">Primary Button</Button>
                    <Button>Default Button</Button>
                    <Button type="dashed">Dashed Button</Button>
                    <br />
                    <Button type="text">Text Button</Button>
                    <Button type="link">Link Button</Button>
                </Space>
                
                <Divider  />
                <StepForwardOutlined />
                <Banner imgs={this.state.imgs} />
            </div>
        )
    }
}