主题: 导航栏和一级菜单面包屑
导航栏和面包屑.gif
导航栏
导航栏作为通用组件,把它放在conponets文件夹下
并新起一个文件夹main,添加 header.js作为导航栏组件
//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 · 学习平台</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;
}
把全局样式统一放在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';
导航栏组件完成
面包屑
注:这里暂时只介绍一级菜单面包屑
面包板作为通用组件,还是放在conponents文件夹中
//app/public/src/conponents
$ mkdir breadcrumb
$ cd breadcrumb
$ touch breadcrumbNameMap.js index.js
breadcrumbNameMap.js用于定义面包屑, 将路由的名称一一对应
//app/public/src/conponents/breadcrumb/breadcrumbNameMap.js
/**
* 用于定义面包屑
* 将路由的名称一一对应
*/
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 为浏览器默认的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;
注:这里的前端路由主要通过,浏览器默认的api location获取到的
在浏览器控制台输入下location就能👀到
最后在路由配置文件router.js引入breadcrumb组件
点击导航栏即可看到效果
最后在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)
(完 待续...)
