使用antd UI 制作菜单
antd 主页地址:https://ant.design/docs/react/introduce
在使用过程中,不能照搬antd的组件代码,因为有些并不合适。首先,菜单并没有做跳转功能,仅仅是菜单,需要在它的基础方法中添加我们的业务代码。
/*菜单组件,所有的方法都要bind this*/ import React,{Component} from 'react';
import {render} from 'react-dom';
import {Link,browserHistory} from 'react-router'; import Menu from 'antd/lib/menu';
import Icon from 'antd/lib/icon';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup; import {user_search_path,
application_search_path,navigation_search,advertising_search} from 'config'; export default class Sidebar extends Component{
constructor(props){
super(props);
this.state = {
current: '1',
openKeys: []
}
} handleClick(e) {
/*这里要做判断,判断是点击哪个菜单,就跳转到相应的菜单内容,使用router进行跳转*/
if(e.key == "1"){
browserHistory.push(user_search_path);
}else if(e.key == '2'){
browserHistory.push(application_search_path);
}else if(e.key == '3'){
browserHistory.push(navigation_search);
}else if(e.key == '4'){
browserHistory.push(advertising_search);
} this.setState({
current: e.key,
openKeys: e.keyPath.slice(1)
});
} onToggle(info) {
console.log('onToggle', info);
this.setState({
openKeys: info.open ? info.keyPath : info.keyPath.slice(1)
});
} getKeyPath(key) {
const map = {
sub1: ['sub1'],
sub2: ['sub2'],
sub3: ['sub2', 'sub3'],
sub4: ['sub4'],
};
return map[key] || [];
} render(){ return(
<div>
<Menu
mode="inline"
openKeys={this.state.openKeys}
selectedKeys={[this.state.current]}
style={{ width: 230 }}
onOpen = {this.onToggle.bind(this)} /*打开菜单*/
onClose = {this.onToggle.bind(this)} /*关闭菜单*/
onClick={this.handleClick.bind(this)} /*触发菜单*/
>
<SubMenu key="sub1" title={<span><Icon type="user" /><span>用户服务</span></span>}>
<Menu.Item key="1">设置权限</Menu.Item>
</SubMenu>
<SubMenu key="sub2" title={<span><Icon type="setting" /><span>配置服务</span></span>}>
<Menu.Item key="2">app版本查询</Menu.Item>
<SubMenu key="sub3" title="app配置版本查询">
<Menu.Item key="3">导航配置查询</Menu.Item>
<Menu.Item key="4">广告配置查询</Menu.Item>
</SubMenu>
<Menu.Item key="5">app changeLog</Menu.Item>
</SubMenu>
<SubMenu key="sub4" title={<span><Icon type="mail" /><span>短信服务</span></span>}>
</SubMenu>
</Menu>
</div>
);
}
}
第二步,通过页面加载组件Parent.js,固定菜单与菜单内容的位置
import React,{Component} from 'react';
import {render} from 'react-dom';
import Icon from 'antd/lib/icon'; import jiChu from '../../../build/images/jichu.png'; import HeaderRight from '../login/HeaderRight.js';
import SearchUser from '../login/SearchUser.js';
import Sidebar from '../sidebar/Sidebar.js'; import style from '../../../build/css/login.css'; export default class Parent extends Component{
constructor(props){
super(props);
} render(){ const headerUserPanel = (<HeaderRight {...this.props} />);
const search = (<SearchUser {...this.props} />);
const sidebars = (<Sidebar {...this.props} />); /*菜单组件*/ return(
<div className="main-view">
<div className="main-sidebar">
<div className="sidebar-wrapper">
<div className="sidebar">
<div className="logo">
<img src={jiChu} className="logoPic" />
</div>
<div className="sidebar-nav">
{sidebars}
</div>
<div className="sidebar-footer">
<span><Icon type="double-left" /><span>收缩菜单</span></span>
</div>
</div>
</div>
</div>
<div className="main-wrapper">
<div className="main-nav-bar">
<div className="navbar">
{headerUserPanel}
</div>
<div className="main-body">
<div className="main-content">
{this.props.children} /*菜单组件对应内容*/
</div>
</div>
</div>
</div>
</div> );
}
}
最后一步,在路由中通过path将页面与路径关联,这样我们在菜单组件中的跳转就是通过这一步控制
import React from 'react';
import {render} from 'react-dom';
import { Router , Redirect, Route , IndexRoute , browserHistory } from 'react-router';
import { Provider } from 'react-redux' const store = configureStore();
render((
<Provider store={store}>
<Router history={browserHistory}>
<Route path={user_service_path} component={Parent}> <Route path={user_sidebar_bath} component={Sidebar}></Route> <Route path={application_search_path} component={AdvertisementTablePannelContainer}></Route> </Provider>
), document.getElementById('root'));
完毕!
使用antd UI 制作菜单的更多相关文章
- [UI]抽屉菜单DrawerLayout分析(一)
本文转载于:http://www.cnblogs.com/avenwu/archive/2014/04/16/3669367.html 侧拉菜单作为常见的导航交互控件,最开始在没有没有android官 ...
- Adobe Edge Animate –使用css制作菜单
Adobe Edge Animate –使用css制作菜单 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 效果图:
- [UI]抽屉菜单DrawerLayout分析(三)
在[UI]抽屉菜单DrawerLayout分析(一)和[UI]抽屉菜单DrawerLayout分析(二)中分别介绍了DrawerLayout得基本框架结构和ViewDragerHelper的作用以及手 ...
- Jquery.Treeview+Jquery UI制作Web文件预览
效果图: 前台Html: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="D ...
- React 版 V2EX 社区( react & react-router & axios & antd ui)
目录 项目简介 在线演示 截图演示 踩坑 项目简介(1/4) Github: https://github.com/bergwhite/v2ex-react 项目使用React.Reac-router ...
- Flutter实战视频-移动电商-55.购物车_底部结算栏UI制作
55.购物车_底部结算栏UI制作 主要做下面结算这一栏目 cart_bottom.dart页面 先设置下内边距 拆分成三个子元素 全选 因为有一个文本框和一个全选的text文本,所以这里也用了Row布 ...
- WPF利用radiobutton制作菜单按钮
原文:WPF利用radiobutton制作菜单按钮 版权声明:欢迎转载.转载请注明出处,谢谢 https://blog.csdn.net/wzcool273509239/article/details ...
- 学习CSS制作菜单列表,举一反三
1.普通的二三级菜单 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
- 使用antd UI组件有感
公司使用的的react.js的版本提14.7的,JS版本使用的是ES6语法,因此在使用antd过程中,有些许不愉快的记录,分享给大家,一起学习: 如果是react 14.7版本时,使用getField ...
随机推荐
- 谷歌电子市场1--BaseFragment
1.BaseFragment 共性 加载中加载失败数据为空加载成功 2.loadData调用 3.网络封装 请求网络获取数据缓存机制(写缓存和读缓存)解析数据请求网络前,先判断是否有缓存, 有的话就加 ...
- iOS9请求https问题-记录
iOS9 开始苹果将HTTP全改为HTTPS了,所以出现网络请求失败问题,解决办法: 1.改回HTTP: 在info.plist文件中添加一个Key:NSAppTransportSecurity(字典 ...
- 详解tintColor属性
tintColor属性是iOS7之后新加的一个属性,这个属性定义了一个非默认的着色颜色值,其值的设置会影响到以视图为根视图的整个视图层次结构.它主要是改变控件的颜色,以获取一些有意思的视觉效果. ti ...
- 在eclipse中把Tomcat 8删掉不能重建问题,启动Tomcat重置本地配置问题
转载:http://blog.csdn.net/caiwenfeng_for_23/article/details/45480039 PS: 今天手贱,把Eclipse里的tomcat删掉了,然后发现 ...
- AppDelegate动态加载StoryBoard
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...
- iOS -[PFPASIDataCompressor compressBytes:length:error:shouldFinish:] in PFPGZIPInvocationCompressor.o
添加动态库报错 "_deflate", referenced from: -[PFPASIDataCompressor compressBytes:length:error:sho ...
- MPMoviePlayerController属性,方法,通知整理
属性 说明 @property (nonatomic, copy) NSURL *contentURL 播放媒体URL,这个URL可以是本地路径,也可以是网络路径 @property (nonatom ...
- Shell 编程
Shell 是一门脚本语言(又称解释型语言),Shell 其实就是一个纯文本文件,通常以[#!/bin/bash]开始.脚本自上而下,从左至右分析并执行,其中[#]后面的为注释.脚本有以下几种运行方式 ...
- Symantec Backup Exec 2010 Agent For Linux安装
以前写过一篇文章介绍过Symantec Backup Exec 2012 Agent For Linux安装安装,今天介绍一下Symantec Backup Exec 2010 Agent For L ...
- JVM之ParNew收集器
新生代收集器,CMS默认搭配,Serial的多线程版本. -XX:UseParNewGC:指定使用ParNew收集器. -XX:ParalletGCThreads:指定限制垃圾收收集的线程数量. 默认 ...