Banner
A banner displays a prominent message and related optional actions. - Material Docs
import { Banner } from 'material-bread';Component #
Banner s show important information at the top of a page, you can add an icon or other media , text, and actionItems . A simple web multiline example is shown below.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
CONTINUE
SIGN IN
TOGGLE
Live Editing
class Header extends React.Component { constructor(props) { super(props) this.state = { visible: true } } render() { return ( <View> <Banner visible={this.state.visible} actionItems={[ {name: 'Continue'}, {name: 'Sign in', onPress: () => console.log('sign in')} ]} media={ <Avatar type="icon" content="notifications" size={40} contentColor={'white'} color={'#42a5f5'} /> } message={ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' } /> <Button text={'Toggle'} type={'contained'} onPress={() => this.setState({visible: !this.state.visible})} containerStyle={{marginTop: 16}} /> </View> ); } }
Usage #
Banners are meant to be dissmissed. Changing the
visible prop will trigger the animation to show and hide the banner. Additionally, each actionItem will dismiss the banner, but you can trigger this manually by changing the visible prop. Usually banners are shown right below the appbar and can be fixed or scrollable. You can toggle this with the position prop.import React, { Component } from 'react';
import { Banner, Button } from 'material-bread';
class Header extends React.Component {
constructor(props) {
super(props)
this.state = {
visible: true
}
}
render() {
return (
<View>
<Banner
visible={this.state.visible}
position={'relative'}
actionItems={[
{name: 'Continue'},
{name: 'Sign in', onPress: () => console.log('sign in')}
]}
media={
<Avatar
type="icon"
content="notifications"
size={40}
contentColor={'white'}
color={'#42a5f5'}
/>
}
message={
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
}
/>
<Button text={'Toggle'} type={'outlined'} onPress={() => this.setState({visible: !this.state.visible})} containerStyle={{marginTop: 16}} />
</View>
);
}
}Props #
Name
Description
Type
Default
actionItems
Array of objects for displaying actions
array
media
Displays arbitrary component to the left of the text
node
message
Displays banner message
string
mobileLayout
Display mobile layout on desktop
bool
position
Position on root
string: relative, fixed, absolute
relative
singleLine
Display banner on one line
bool
visible
Whether the banner is visible
bool
style
Styles root banner element
object
Demos #
You can see even more examples in the Storybook environment.
Single Line #
The
singleLine prop forces the banner content to show in a row and aligned to the center. But it
doesn't force the text content onto one line. This is so smaller screens will handle the text more gracefully.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
SIGN IN
Live Editing
<Banner
actionItems={[
{name: 'Sign in', onPress: () => console.log('sign in')}
]}
singleLine
message={
'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
}
visible
/>
Three Line #
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
CONTINUE
SIGN IN
Live Editing
<Banner
actionItems={[
{name: 'Continue'},
{name: 'Sign in', onPress: () => console.log('sign in')}
]}
message={
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco'
}
visible
/>