zoukankan      html  css  js  c++  java
  • Breadcrumb面包屑

    Breadcrumb.Item的属性:
    参数参数类型默认值版本
    href 链接的目的地 string - 3.17.0
    overlay 下拉菜单的内容 Menu | () => Menu - 3.17.0
    onClick 单击事件 (e:MouseEvent)=>void - 3.17.0
    使用:
    <Breadcrumb.Item href="/">
          <Icon type="user" />
          <span>Application List</span>
    </Breadcrumb.Item>

    Breadcrumb 的属性:
    参数说明类型默认值版本
    itemRender 自定义链接函数,和 react-router 配置使用 (route, params, routes, paths) => ReactNode - 3.17.0
    params 路由的参数 object - 3.17.0
    routes router 的路由栈信息 routes[] - 3.17.0
    separator 分隔符自定义 string|ReactNode '/' 3.17.0
    separator:作为面包屑的元素的间隔
    itemRender使用:
    //重写单个面包屑元素
    function itemRender(route, params, routes, paths) {
      const last = routes.indexOf(route) === routes.length - 1;
      return last ? (
        <span>{route.breadcrumbName}</span>
      ) : (
        <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
      );
    }
    

      



    routes,元素可以有显示内容(breadcrumbName),有跳转链接(path),有自己子菜单(children)使用:
    const routes = [
        {
          path: '/',
          breadcrumbName: '首页',
        },
        {
          path: '',
          breadcrumbName: '课程管理',
          children: [ //作为课程管理--下拉列表
            {
              path: '/courseMange/liveManage',
              breadcrumbName: '直播课程',
            },
            {
              path: '/courseMange/liveScheduleManage',
              breadcrumbName: '直播排课',
            },
          ],
        },
        {
          path: '',
          breadcrumbName: '基础配置',
          children: [//作为课程管理--下拉列表
            {
              path: '/baseConfig/categoryConfig',
              breadcrumbName: '项目配置',
            },
            {
              path: '/baseConfig/subjectConfig',
              breadcrumbName: '科目配置',
            },
          ],
        },
      ]
    
    //separator作为面包屑的元素的间隔
    <Breadcrumb separator="" routes={routes} />
  • 相关阅读:
    在线学习git操作
    logstash使用ruby 修改事件戳时间
    mysql磁盘问题记录
    mkdir --help
    php过滤前端post提交过滤html标签
    【摸鱼范式】【一】UVM入门教程【文字版】
    第一次运行svlib
    svlib文档翻译(第五章)
    svlib文档翻译(第一至四章)
    【三】基于Montgomery算法的高速、可配置RSA密码IP核硬件设计系列
  • 原文地址:https://www.cnblogs.com/baixinL/p/14919089.html
Copyright © 2011-2022 走看看