headerNavBar

HeaderNavBar顶部导航 组件 API

HeaderNavBar顶部导航组件

Properties	Descrition	Type	Default
title	顶部导航中间文本	String	null
show	顶部导航显示隐藏，true-显示，false-隐藏	Boll	true
left	左侧功能按键,hide-不显示，back-返回功能，notify-通知功能	String	null
leftClick	左侧功能回调函数	function	hide
right	右侧功能按键，hide-不显示，more-更多操作	String	hide
rightClick	右侧功能回调函数	function	null

使用实例

import { Component } from 'react'
import HeaderNavBar from '../../../packages/headerNavBar'
import ActionSheet from '../../../packages/actionsheet'

export default class DemoSearch extends Component {
	constructor(prop) {
		super(prop);

		this.state = {
			show: false
		}

		this.rightClick.bind(this);
	}

	rightClick(e) {
		e.preventDefault();
		this.setState({
			show: true
		})
	}

	cancelFun(e, actionSheet) {
		console.log(e);
		console.log(actionSheet);

		this.setState({
			show: false
		})
	}

	render() {
		const headrNavBar = {
			title: '库融贷',
			rightClick: this.rightClick.bind(this),
			left: 'back',
			right: 'more'
		};

		const actionMenus = [
			{
				text: '选项一',
				current: true,
				onClick:  (e, actionSheet) => {
					console.log('选项一');

					this.cancelFun(e, actionSheet)
				}
			},
			{
				text: '选项二',
				onClick:  (e, actionSheet) => {
					console.log('选项二');

					this.cancelFun(e, actionSheet)
				}
			}
		]

		return(
			<div>
				<HeaderNavBar {...headrNavBar}/>
				<ActionSheet show={this.state.show}
				             actionMenus={actionMenus}
				             cancelText="取消选项"
				             cancelFun={this.cancelFun.bind(this)}/>
			</div>
		)
	}
}

展示

https://eric124120.github.io/fmui-react/#/header