React后台管理系统-顶部NavTop组件设计

利用了bootstrap制作导航栏

  1. <div className="navbar navbar-default top-navbar">
  2.                <div className="navbar-header">
  3.                    <Link className="navbar-brand" to="/"><b>HAPPY</b>MMALL</Link>
  4.                </div>
  5.  
  6.                <ul className="nav navbar-top-links navbar-right">
  7.                    <li className="dropdown">
  8.                        <a className="dropdown-toggle" href="javascript:;">
  9.                            <i className="fa fa-user fa-fw"></i>
  10.                            {
  11.                                this.state.username
  12.                                ? <span>欢迎,{this.state.username}</span>
  13.                                : <span>欢迎您</span>
  14.                            }
  15.                            <i className="fa fa-caret-down"></i>
  16.                        </a>
  17.                        <ul className="dropdown-menu dropdown-user">
  18.                            <li>
  19.                                <a onClick={() => {this.onLogout()}}>
  20.                                    <i className="fa fa-sign-out fa-fw"></i>
  21.                                    <span>退出登录</span>
  22.                                </a>
  23.                            </li>
  24.                        </ul>
  25.                    </li>
  26.                </ul>
  27.            </div>

猜你喜欢

转载自www.cnblogs.com/wangyawei/p/9229110.html