Navbar

Demo

Install

import React from 'react';
import { Navbar } from 'vant-react';

Usage

Basic Usage

<Navbar title='Settings' />

LeftAndRightText

<Navbar
    title='Settings'
    leftText='Back'
    rightText='More'
/>
<Navbar
    title='Profile'
    leftIcon='arrow-left'
    leftText='Back'
    rightIcon='search'
    rightText='Search'
/>
<Navbar
    title='Home'
    leftIcon='user-o'
    rightIcon='search'
/>

Fixed

<Navbar
    fixed
    title='Profile'
    leftIcon='arrow-left'
    leftText='Back'
    rightIcon='search'
/>

BorderBottom

<Navbar
    border
    title='Profile'
    leftIcon='arrow-left'
    leftText='Back'
    rightIcon='search'
/>

ClickHandler

<Navbar
    title='Title'
    leftIcon='arrow-left'
    leftText='Back'
    rightIcon='search'
    clickLeft={(e) => alert(e.target.innerHTML + ' Left Click')}
    clickRight={(e) => alert(e.target.innerHTML + ' Right Click')}
/>

WithLongTitle

<Navbar
      title='This is a very very very very very very very very very very long text'
      leftIcon='arrow-left'
      leftText='Back'
      rightIcon='search'
/>

API

Props

Attribute	Description	Type	Default	Required
title	Title	string	-	optional
leftText	Left Text	string	-	optional
rightText	Left Text	string	-	optional
leftIcon	Left Icon, can be set to arrow-left user-o	string	-	optional
rightIcon	Left Icon, can be set to search	string	-	optional
border	Whether to show bottom border	boolean	true	optional
fixed	Whether to fixed top	boolean	true	optional
zIndex	Z-index	number	1	optional

Event

Event	Description	Arguments
clickLeft	Triggered when click left icon	event: Event
clickRight	Triggered when click right icon	event: Event