react脚手架环境ui库的使用

不念不忘少年蓝@ 2021-07-24 12:02 362阅读 0赞

针对react脚手架环境设计的ui库
    	带有Icon属性的组件的使用
    
    		1、安装依赖
    			import { Button,Icon } from 'antd';
    		2、直接引入
    
    	Icon图标的使用
    		1、直接点击图标,然后复制到代码中

代码示例：

import React,{ Component} from 'react'
    import { Route,BrowserRouter,Link} from 'react-router-dom'
    import {  Button,Icon,Row, Col,Menu, Dropdown,Carousel  } from 'antd';
    import './App.css';
    
    const {  SubMenu } = Menu;
    export default class App extends Component{ 
    	  state = { 
        collapsed: false,
      };
    
      toggleCollapsed = () => { 
        this.setState({ 
          collapsed: !this.state.collapsed,
        });
      };
    	render()
    	{ 
    const menu = (
      <Menu>
        <Menu.Item>
          <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
            1st menu item
          </a>
        </Menu.Item>
        <Menu.Item>
          <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
            2nd menu item
          </a>
        </Menu.Item>
        <Menu.Item>
          <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
            3rd menu item
          </a>
        </Menu.Item>
      </Menu>
    );
     onChange(a, b, c) { 
      console.log(a, b, c);
    }
    
    		
    		return(
    			<div className="App">
    				<Button type="primary">Button</Button>
    				 <Button>Default</Button>
    				    <Button type="dashed">Dashed</Button>
    				    <Button type="danger">Danger</Button>
    				    <Button type="link">Link</Button>
    				    <Button type="primary" icon="download"  />
    				    
    				     <Button type="primary" icon="cloud" />
    				     <Icon type="caret-right" />
    
    				      <div>
    
    						    <Row>
    						      <Col span={ 6}>col-6</Col>
    						      <Col span={ 6}>col-6</Col>
    						      <Col span={ 6}>col-6</Col>
    						      <Col span={ 6}>col-6</Col>
    						    </Row>
    					</div>
    
    				 <Dropdown overlay={ menu}>
        <a className="ant-dropdown-link" href="#">
          Hover me <Icon type="down" />
        </a>
      </Dropdown>
    <div style={ {  width: 256 }}>
            <Button type="primary" onClick={ this.toggleCollapsed} style={ {  marginBottom: 16 }}>
              <Icon type={ this.state.collapsed ? 'menu-unfold' : 'menu-fold'} />
            </Button>
            <Menu
              defaultSelectedKeys={ ['1']}
              defaultOpenKeys={ ['sub1']}
              mode="inline"
              theme="dark"
              inlineCollapsed={ this.state.collapsed}
            >
              <Menu.Item key="1">
                <Icon type="pie-chart" />
                <span>Option 1</span>
              </Menu.Item>
              <Menu.Item key="2">
                <Icon type="desktop" />
                <span>Option 2</span>
              </Menu.Item>
              <Menu.Item key="3">
                <Icon type="inbox" />
                <span>Option 3</span>
              </Menu.Item>
              <SubMenu
                key="sub1"
                title={ 
                  <span>
                    <Icon type="mail" />
                    <span>Navigation One</span>
                  </span>
                }
              >
                <Menu.Item key="5">Option 5</Menu.Item>
                <Menu.Item key="6">Option 6</Menu.Item>
                <Menu.Item key="7">Option 7</Menu.Item>
                <Menu.Item key="8">Option 8</Menu.Item>
              </SubMenu>
              <SubMenu
                key="sub2"
                title={ 
                  <span>
                    <Icon type="appstore" />
                    <span>Navigation Two</span>
                  </span>
                }
              >
                <Menu.Item key="9">Option 9</Menu.Item>
                <Menu.Item key="10">Option 10</Menu.Item>
                <SubMenu key="sub3" title="Submenu">
                  <Menu.Item key="11">Option 11</Menu.Item>
                  <Menu.Item key="12">Option 12</Menu.Item>
                </SubMenu>
              </SubMenu>
            </Menu>
          </div>
          <Carousel afterChange={ onChange}>
        <div>
          <h3>1</h3>
        </div>
        <div>
          <h3>2</h3>
        </div>
        <div>
          <h3>3</h3>
        </div>
        <div>
          <h3>4</h3>
        </div>
      </Carousel>
    
    			</div>
    
    		)
    	}
    }