Page Title Info

@aligov/components-page-title

如面包屑、标题等页面顶部信息

API

import PageTitle, { PageBreadcrumb } from '@aligov/components-page-title';

PageTitle 是一个容器，包含来基础的样式设置。内部可以放置如 PageBreadcrumb 等任意内容。

PageBreadcrumb 是基于 Fusion Breadcrumb 封装的面包屑，但用法做了简化，简化为只传入 dataSource 来自动生成，其中 dataSource 是一个数组，数组元素可以是字符串或 { label: any, link?: string, router?: boolean } 的对象。

如果是字符串或没有 link 属性，那么是无链接，否则用 umi/link 来做跳转。

如果设置了 router: false，那么将采用原声链接来跳转，而不使用 router。这是为了在基于 umi qiankun 的微前端应用中使用的场景。

所以 PageBreadcrumb 的链接是基于 umi 路由来做跳转的链接。

DEMO 列表

简单使用

需要在 react-router 的环境中使用

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PageTitle, { PageBreadcrumb } from '@aligov/components-page-title';
import { HashRouter as Router } from 'react-router-dom';

const dataSource = [
  { label: '首页', link: '/' },
  { label: '二级页', link: '/sub' },
  { label: '三级目录' },
  '叶子节点'
];

class App extends Component {
  render() {
    return (
      <Router>
        <p>需要搭配 react-router 来使用，所以这里示例代码特意放在了 Router 里，实际项目中可如果已经在 Router 里，那不需要手动包一层</p>

        <div>
          <PageTitle>
           <PageBreadcrumb dataSource={dataSource} />
          </PageTitle>
       	</div>
     </Router>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);