主題: 導(dǎo)航欄和一級菜單面包屑

導(dǎo)航欄和面包屑.gif

導(dǎo)航欄

導(dǎo)航欄作為通用組件,把它放在conponets文件夾下
并新起一個文件夾main,添加 header.js作為導(dǎo)航欄組件

//app/public/src/conponents

$ mkdir main
$ touch header.js style.css

編輯header及樣式

//app/public/src/conponents/main/header.js

/**
 * Created by ocean on 18/3/1.
 */
import React from 'react';
import { Icon } from 'antd';
import { Link } from 'react-router-dom';
import './style.css';

export default () => {
  return (
    <div className="navbar">
      <ul mode="horizontal" className="barstyle">
        <li className="logostyle" key="logo">
          <Icon className="Iconstyle" type="api" />
          <a rel="noopener noreferrer" target="_blank">react · 學(xué)習(xí)平臺</a>
        </li>
        <li key="全部">
          <Link to="/datasource?pageNum=1&pageSize=10">全部</Link>
        </li>
        <li key="精華">
          <Link to="/datasource?pageNum=1&pageSize=10">精華</Link>
        </li>
        <li key="分享">
          <Link to="/datasource?pageNum=1&pageSize=10">分享</Link>
        </li>
        <li key="問答">
          <Link to="/datasource?pageNum=1&pageSize=10">問答</Link>
        </li>
      </ul>
    </div>
  );
};

//app/public/src/conponents/main/style.css

/*header*/

.navbar {
  font-size: 14px;
  width: 100%; // height: 66px;
  background: #0f0f0f url(https://p1.pstatp.com/large/66be00066eb639694007) no-repeat center top;
}

.navbar li {
    display: inline-block;
    line-height: 48px;
}

.navbar ul li{
  margin: 0 20px;
}

.navbar ul li a{
    color: rgba(255, 255, 255, 0.7);
    position: relative;
    letter-spacing: .1rem;
}


.navbar ul li a:hover {
  color: rgba(255, 255, 255, 1);
}

.navbar ul li a:focus {
  text-decoration: none;
}

.navbar ul li:nth-child(2) img{
  vertical-align: middle;
}

.navbar ul li:nth-child(2) img a{
  font-size: 16px;
}

.barstyle {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  background: transparent;
}
.logostyle {
  line-height: 66px;
  font-size: 18px;
}
.logostyle .Iconstyle {
  color: white;
  font-size: 32px!important;
  font-weight: 100;
  opacity: 0.7;
  vertical-align: middle;
  margin-right: 10px;
  transform: rotate(180deg);
}


.header-active{
  color:#fff;
}

在路由配置文件router.js中,引入常駐組件header
并修改布局及全局樣式

//app/public/src/router.js

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

+ // 常駐組件
+ import Header from './components/main/header';
+ 
// 子組件
import Welcome from './pages/welcome';



 export default () => (
   <Router>
     <div>
-        <Switch>
-          {/* welcome */}
-          <Route exact path="/" component={Welcome} />
-        </Switch>
+      <Header/>
+      <div
+        className='main-contains'
+        style={{
+          minHeight: document.body.clientHeight,
+        }}
+      >
+          <Switch>
+            {/* welcome */}
+            <Route exact path="/" component={Welcome} />
+          </Switch>
+      </div>
     </div>
   </Router>
 );

全局樣式

//app/public/src/index.css


@import '~antd/dist/antd.css';

/**
 * 全局樣式
 */

 *{
   margin: 0;padding: 0;
   font-family: "Hiragino Sans GB","Microsoft YaHei","\9ED1\4F53",Helvetica,Arial,Tahoma,sans-serif;
 }

.main-contains{
  min-height:600px;
  margin:0 auto;
}

.main-contains .content-inner{
  margin: 10px 25px 25px 25px;
  min-height: 600px;
}


.breadcrumb-content .ant-breadcrumb {
  padding: 10px 0 10px 0;
  border-bottom: 1px solid #eee;
  margin: 15px 25px 15px 25px;
  font-size:13px;
}

.ant-table-pagination.ant-pagination {
  margin: 16px 15px;
}

把全局樣式統(tǒng)一放在style文件下,便于管理

//app/public/src/index.css

$ mv index.css style

修改index.js引入全局樣式的路徑

 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import './style/index.css';
 import Router from './router';
 import registerServiceWorker from './registerServiceWorker';

導(dǎo)航欄組件完成

面包屑

注:這里暫時只介紹一級菜單面包屑

面包板作為通用組件,還是放在conponents文件夾中

//app/public/src/conponents

$ mkdir breadcrumb
$ cd breadcrumb
$ touch breadcrumbNameMap.js index.js

breadcrumbNameMap.js用于定義面包屑, 將路由的名稱一一對應(yīng)

//app/public/src/conponents/breadcrumb/breadcrumbNameMap.js

/**
 * 用于定義面包屑
 * 將路由的名稱一一對應(yīng)
 */

const breadcrumbNameMap = {
  '/all': '全部',
  '/good': '精華',
  '/share': '分享',
  '/ask': '問答',
};

module.exports = breadcrumbNameMap;

編輯面包屑組件

//app/public/src/conponents/breadcrumb/index.js

/**
 * 一級菜單面包屑
 */

import React from 'react';
import { Link, withRouter } from 'react-router-dom';
import { Breadcrumb, Icon} from 'antd';

import BreadcrumbNameMap from './breadcrumbNameMap';

const Bread = withRouter((props) => {
  //location 為瀏覽器默認(rèn)的api
  const { location } = props;
  const breadcrumbNameMap = BreadcrumbNameMap;

  const url = location.pathname

  let isIndex = false;
  if ( url === '/') {
    isIndex = true;
  }

  const nameItem = breadcrumbNameMap[url]

  const breadcrumbItems = [(
    <Breadcrumb.Item key="home">
            <Link to=""><Icon type="home" /></Link>
        </Breadcrumb.Item>
    ),(<Breadcrumb.Item key={url}>
    <Link to={url}>
      {nameItem}
    </Link>
  </Breadcrumb.Item>)]

  return (
        isIndex ? null :
            <div className="breadcrumb-content">
                <Breadcrumb>
                    {breadcrumbItems}
                </Breadcrumb>
            </div>
  );
});

export default Bread;

注:這里的前端路由主要通過,瀏覽器默認(rèn)的api location獲取到的
在瀏覽器控制臺輸入下location就能??到

最后在路由配置文件router.js引入breadcrumb組件
點擊導(dǎo)航欄即可看到效果
最后在router.js引入面包屑組件即可

// 常駐組件
import Header from './components/main/header';
+import Breadcrumb from './components/breadcrumb';


// 子組件
import Welcome from './pages/welcome';

          minHeight: document.body.clientHeight,
        }}
      >
+         <Breadcrumb/>
          <Switch>
            {/* welcome */}
            <Route exact path="/" component={Welcome} />

資料參考:
https://ant.design/components/breadcrumb-cn/
http://www.ruanyifeng.com/blog/2015/03/react.html (demo3)

(完 待續(xù)...)