zoukankan      html  css  js  c++  java
  • react antd layout sider

    import React from 'react';
    import {Link, withRouter} from 'react-router-dom';
    import {Layout, Menu, Icon} from 'antd';
    const {SubMenu} = Menu;
    const {Sider} = Layout;
    
    class SideBar extends React.Component {
        constructor(props) {
            super(props);
            this.state =  {
                collapsed: false,
                currentPath : this.props.history.location || '/user'
            }
        }
    
        toggleCollapsed() {
            this.setState({
                collapsed: !this.state.collapsed
            });
        }
        render() {
            return (
                <Sider
                    width={250}
                    collapsible
                    onCollapse={() => this.toggleCollapsed()}
                    collapsed={this.state.collapsed}
                    style={{background: '#fff'}}>
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={['0']}
                        //defaultOpenKeys={['sub1']}
                        style={{height: '100%'}}>
    
                        <Menu.Item key="0">
                            <Link to="/">
                                <Icon type="home" />首页
                            </Link>
                        </Menu.Item>
    
                        <SubMenu key="sub1" title={<span><Icon type="laptop"/>主导航</span>}>
                            <Menu.Item key="1">
                                <Link to="/antForm">多组表单form处理</Link>
                            </Menu.Item>
                            <Menu.Item key="2">
                                <Link to="/antTable">表格table</Link>
                            </Menu.Item>
                            <Menu.Item key="3">
                                <Link to="/login">首页</Link>
                            </Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub2" title={<span><Icon type="save"/>商品</span>}>
                            <Menu.Item key="6">
                                <Link to="/product">商品管理</Link>
                            </Menu.Item>
                            <Menu.Item key="10">
                                <Link to="/product/add">商品添加</Link>
                            </Menu.Item>
                            <Menu.Item key="7">
                                <Link to="/product.category">品类管理</Link>
                            </Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub3" title={<span><Icon type="shopping-cart"/>订单</span>}>
                            <Menu.Item key="8">
                                <Link to="/order">订单管理</Link>
                            </Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub4" title={<span><Icon type="user"/>用户</span>}>
                            <Menu.Item key="9">
                                <Link to="/user">用户管理</Link>
                            </Menu.Item>
                        </SubMenu>
    
                    </Menu>
                </Sider>
            );
        };
    }
    export default withRouter(SideBar);
  • 相关阅读:
    openssl 生成pfx
    webpack 编译时,提示 Unexpected token: keyword «const»
    .net core 使用 Serilog 作为日志提供者
    k近邻算法
    vscode 无法自动补全第三方库
    centos 7 安装 RabbitMQ
    .net core 发布程序命令(自带运行环境)
    安装node-sass
    .net core 拦截socket
    SDN第三次作业
  • 原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/8717990.html
Copyright © 2011-2022 走看看