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
/F7Appbar
Appbar Properties
Prop | Type | Default | Description |
---|---|---|---|
<Appbar> properties | |||
inner | boolean | true | When 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 |
noShadow | boolean | false | Disable shadow rendering for MD theme |
noHairline | boolean | false | Disable appbar bottom thin border (hairline) for iOS theme |
innerClass | string | Adds additional class to appbar-inner element |
Examples
<App>
<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>
<View main>
<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>
</View>
</App>
当前内容版权归 Framework7 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Framework7 .