Appbar React Component

Appbar React component represents Appbar element.

It is the main app bar with actions on top of the whole app. It is designed to be used in desktop apps with Aurora theme.

Appbar Components

There are following components included:

  • Appbar

Appbar Properties

PropTypeDefaultDescription
<Appbar> properties
innerbooleantrueWhen enabled (by default), it will put all the content within internal appbar-inner element. Disable it only in case you want to put totally custom layout inside
noShadowbooleanfalseDisable shadow rendering for MD theme
noHairlinebooleanfalseDisable appbar bottom thin border (hairline) for iOS theme
innerClassstringAdds additional class to appbar-inner element
innerClassNamestringAlias for innerClass prop

Examples

import React from 'react';
import { App, Appbar, Button, Searchbar, Panel, Block, View, Page, Navbar } from 'framework7-react';

export default () => (
  
    <Appbar>
      <div className="left">
        <Button small panelToggle="left" className="display-flex" iconF7="bars" />
        <Button small className="display-flex margin-left-half" iconF7="square_list" />
        <Button
          small
          className="display-flex margin-left-half"
          iconF7="arrowshape_turn_up_left_fill"
        />
      </div>
      <div className="right">
        <Searchbar inline customSearch disableButton={false} />
      </div>
    </Appbar>
    <Panel left>
      <Block>
        <p>Panel left content</p>
      </Block>
    </Panel>
    
  <Page>
    <Navbar title="Appbar" />
    <Block strong>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed sagittis dui.
        Fusce nulla massa, scelerisque vitae auctor in, luctus in ipsum. Sed eu lectus vel magna
        malesuada lacinia. Ut at vestibulum sem. In semper, arcu pulvinar volutpat fermentum,
        felis magna fringilla felis, nec volutpat nisi nunc quis ante. Fusce elementum egestas
        tortor ut porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
        posuere cubilia Curae; Duis id commodo elit. Sed massa dui, laoreet a orci sed, egestas
        vehicula tellus. Nulla pulvinar ornare justo sed finibus. Aliquam hendrerit dui at nulla
        eleifend, quis feugiat enim aliquam. Nulla facilisi. Orci varius natoque penatibus et
        magnis dis parturient montes, nascetur ridiculus mus.
      </p>
    </Block>
  </Page>
    
  
);