Floating Action Button
A floating action button (FAB) represents the primary action of a screen. - Material Docs
import { Fab } from 'material-bread';Component #
Fab s usually display icons in the middle, you can pass a string for the name of the icon or pass an icon node to the icon prop. You can also replace it entirely with children.
Live Editing
<View style={{flexDirection: 'row', flexWrap: 'wrap'}}> <Fab icon={'add'}/> <Fab backgroundColor={'#E91E63'} icon={'archive'} /> <Fab backgroundColor={'#F44336'} icon={'delete'} /> <Fab backgroundColor={'#009688'} icon={'edit'} /> <Fab backgroundColor={'black'} icon={'attach-money'} /> <Fab disabled backgroundColor={'#009688'} icon={'delete'} /> </View>
Usage #
import React, { Component } from 'react';
import { View } from 'react-native';
import { Fab} from 'material-bread';
class FabPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<View>
<Fab />
</View>
);
}
}Props #
Name
Description
Type
Default
animated
Whether to animate when changing visible prop
bool
backgroundColor
Background color for fab circle
object
containerStyle
Styles wrapping element
object
disabled
Whether fab is disabled
bool
false
icon
Name of icon to show or an icon node
string || node
label
String to show as extended fab
string
mini
Toggles mini variant
bool
onPress
Call back on button
func
rippleColor
Color for ripple
string
shadow
Shadow on fab
number
10
style
Styles root element
object
visible
Toggles visibility
bool
Demos #
You can see even more examples in the Storybook environment.
Extended #
Add
Archive
Delete
Edit
Buy
Disabled
Live Editing
<View style={{flexDirection: 'row', flexWrap: 'wrap'}}> <Fab icon={'add'} label={'Add'} /> <Fab backgroundColor={'#E91E63'} icon={'archive'} label={'Archive'} /> <Fab backgroundColor={'#F44336'} icon={'delete'} label={'Delete'} /> <Fab backgroundColor={'#009688'} icon={'edit'} label={'Edit'} /> <Fab backgroundColor={'black'} icon={'attach-money'} label={'Buy'} /> <Fab disabled icon={'delete'} label={'Disabled'} /> </View>
Mini #
Live Editing
<View style={{flexDirection: 'row', flexWrap: 'wrap'}}> <Fab mini icon={'add'} /> <Fab mini backgroundColor={'#E91E63'} icon={'archive'} /> <Fab mini backgroundColor={'#F44336'} icon={'delete'} /> <Fab mini backgroundColor={'#009688'} icon={'edit'} /> <Fab mini backgroundColor={'black'} icon={'attach-money'} /> <Fab mini disabled backgroundColor={'#009688'} icon={'delete'} /> </View>
Animated #
TOGGLE VISIBILITY
Live Editing
class Page extends React.Component { constructor(props) { super(props) this.state = { visible: true, } } render() { return ( <View> <View style={{flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap'}}> <Fab animated visible={this.state.visible} icon={'add'} /> <Fab animated visible={this.state.visible} backgroundColor={'#E91E63'} icon={'archive'} /> <Fab animated visible={this.state.visible} backgroundColor={'#F44336'} icon={'delete'} /> <Fab animated visible={this.state.visible} mini backgroundColor={'#009688'} icon={'edit'} /> <Fab animated visible={this.state.visible} mini backgroundColor={'black'} icon={'attach-money'} /> <Fab animated disabled visible={this.state.visible} mini backgroundColor={'#009688'} icon={'delete'} /> </View> <Button text={'Toggle visibility'} onPress={() => this.setState({ visible: !this.state.visible })} /> </View> ); } }