react项目实战（权限模块开发六）semantic-ui-react 加入到开发环境中

最新推荐文章于 2024-08-10 07:25:47 发布

飞天代码

最新推荐文章于 2024-08-10 07:25:47 发布

阅读量7.1k

点赞数 1

分类专栏： react项目实战文章标签： semantic-ui

本文链接：https://blog.csdn.net/weiyongliang_813/article/details/76167952

版权

react项目实战专栏收录该内容

9 篇文章 2 订阅

订阅专栏

本打算使用antd的组件来开发模块界面，但今天被semantic-ui-react提供的table组件给震撼了，实在是比antd的table好看多了，就果断决定打算用semantic-ui-react来作为基础组件，而antd作为辅助组件来进行开发。
第一步就是安装semantic-ui-react

cnpm i --save-dev semantic-ui-react

第二步自然是安装css了

cnpm install semantic-ui-css --save

第三步：写个测试界面看看效果，里面用到了semantic+antd

import React,{Component} from 'react'
import { Button, Icon,Menu,Table } from 'semantic-ui-react'
import { connect } from 'react-redux'
import 'semantic-ui-css/semantic.min.css';
import {GoPageTitle,GoPageNav} from '../../components/goingComponent'
import { Pagination } from 'antd';
import 'antd/dist/antd.css';

class Role extends Component {
  state = {};
  handleItemClick = (e, { name }) => this.setState({activeItem: name});

  render() {
    const  propsObjs =this.props;
    let pageNavList=propsObjs.userMd.userMd.pageNavList;

    const { activeItem } = this.state;
    return (
      <div>

        <div id="page-title">
          <h1 className="page-header text-overflow">角色信息管理</h1>
        </div>

        <GoPageNav pageNav={pageNavList}/>

       <div style={{paddingLeft:"10px",paddingRight:"10px"}}>
         <Menu>
           <Menu.Item
             name='editorials'
             active={activeItem === 'editorials'}
             onClick={this.handleItemClick}
           >
             <Icon disabled name='users'/>
             添加
           </Menu.Item>

           <Menu.Item
             name='reviews'
             active={activeItem === 'reviews'}
             onClick={this.handleItemClick}
           >
             <Icon disabled name='users'/>
             修改
           </Menu.Item>

           <Menu.Item
             name='upcomingEvents'
             active={activeItem === 'upcomingEvents'}
             onClick={this.handleItemClick}
           >
             删除
           </Menu.Item>
         </Menu>

         <Table celled striped>
           <Table.Header>
             <Table.Row>
               <Table.HeaderCell colSpan='1'>用户地址</Table.HeaderCell>
               <Table.HeaderCell colSpan='1'>名称</Table.HeaderCell>
               <Table.HeaderCell colSpan='1'>序号</Table.HeaderCell>
             </Table.Row>
           </Table.Header>

           <Table.Body>
             <Table.Row>
               <Table.Cell collapsing>
                 <Icon name='folder' /> 用户名称
               </Table.Cell>
               <Table.Cell>用户名称</Table.Cell>
               <Table.Cell collapsing textAlign='right'>10 hours ago</Table.Cell>
             </Table.Row>
             <Table.Row>
               <Table.Cell>
                 <Icon name='folder' /> 用户地址
               </Table.Cell>
               <Table.Cell>用户名称</Table.Cell>
               <Table.Cell textAlign='right'>10 hours ago</Table.Cell>
             </Table.Row>
             <Table.Row>
               <Table.Cell>
                 <Icon name='folder' /> build
               </Table.Cell>
               <Table.Cell>用户名称</Table.Cell>
               <Table.Cell textAlign='right'>10 hours ago</Table.Cell>
             </Table.Row>
             <Table.Row>
               <Table.Cell>
                 <Icon name='file outline' /> 用户地址
               </Table.Cell>
               <Table.Cell>用户名称</Table.Cell>
               <Table.Cell textAlign='right'>10 hours ago</Table.Cell>
             </Table.Row>
             <Table.Row>
               <Table.Cell>
                 <Icon name='file outline' /> 用户地址
               </Table.Cell>
               <Table.Cell>用户名称</Table.Cell>
               <Table.Cell textAlign='right'>10 hours ago</Table.Cell>
             </Table.Row>
           </Table.Body>
         </Table>
         <Pagination defaultCurrent={1} total={50} />
       </div>
      </div>
    )
  }
}
export default connect((userMd) => ({userMd}))(Role);