I'm trying have fixed Tabs component at the bottom of the screen. I have tried
<Tabs
contentContainerStyle={{position: "fixed"}}
>
</Tabs>
and even style={{position:"fixed"}}
How do I fix the Tabs at the bottom?
This work for me
<div style={{position: "fixed", bottom:"0", width:"100%"}}>
<Tabs>
<Tab icon={<ActionFlightTakeoff />} />
<Tab icon={<ActionFlightTakeoff />} />
<Tab icon={<ActionFlightTakeoff />} />
</Tabs>
</div>
I use the tabItemContainerStyle like this:
<code>
<Tabs tabItemContainerStyle={{position: "fixed", bottom:"0"}}>
</Tabs>
</code>
Related
Still relatively new to Material UI and ReactJS.
But I'm trying to have a set of tabs at the top of the page, but I also want a Logout link to the right side of the tabs.
Here's what I have
<AppBar position="static">
<Tabs
value={value}
onChange={handleChange}
aria-label="simple tabs example"
style={{flex:1}}
>
<Tab label="Approvals" />
<Tab label="Members" />
</Tabs>
Logout
</AppBar>
But the logout link isn't aligned to the right and is on a new line underneath the Tabs.
How would I go about having it sit at the end of the tabs?
I think it can help you. Add between and Logout button.
<AppBar position="static">
<Toolbar>
<Tabs
value={value}
onChange={handleChange}
aria-label="simple tabs example"
>
<Tab label="Approvals" />
<Tab label="Members" />
</Tabs>
<Box flexGrow={1} />
<Button>Logout</Button>
</Toolbar>
</AppBar>
The React-Bootstrap code that I have used for ListGroups has a Component named "Sonnet" which perhaps has not been exported in the React-Bootstrap, due to which I am facing the 'Sonnet' is not exported from 'react-bootstrap' issue regardless of my attempts to even import it manually or import the complete React-bootstrap package with "*". I have not found a single thread or a blog which even lists "Sonnet" errors or anything for that matter. Need you guys to help me understand!
My attempts have been:
reinstalling bootstrap/
import {Sonnet} from 'react-bootstrap';/
import * as ReactBootstrap from 'react-bootstrap';
None seem to work
The sample for ref:
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
//import './Assets/css/default.min.css';
//import * as ReactBootstrap from 'react-bootstrap';
import {Card,ListGroup,Tab,Row,Col,Sonnet} from 'react-bootstrap';
class Data extends React.Component {
render(){
return (
<data>
<div className="data">
<Tab.Container id="list-group-tabs-example" defaultActiveKey="#link1">
<Row>
<Col sm={4}>
<ListGroup>
<ListGroup.Item> Online Devices
</ListGroup.Item>
<ListGroup.Item action href="#link1">
Soil Sensor
</ListGroup.Item>
<ListGroup.Item action href="#link2">
Level Sensor
</ListGroup.Item>
</ListGroup>
</Col>
<Col sm={8}>
<Tab.Content>
<Tab.Pane eventKey="#link1">
<Sonnet/>
Soil sensor
</Tab.Pane>
<Tab.Pane eventKey="#link2">
<Sonnet/>
Level Sensor
</Tab.Pane>
</Tab.Content>
</Col>
</Row>
</Tab.Container>
</div>
</data>
);
}
}
export default Data;
I understand 'Sonnet' as just placeholder. Consider it as a dummy class. Instead of 'Sonnet', replace it with your own class. I will show you how I did.
This is original template from react-bootstrap document.
<Tab eventKey="home" title="Home">
<Sonnet />
</Tab>
<Tab eventKey="profile" title="Profile">
<Sonnet />
</Tab>
<Tab eventKey="contact" title="Contact" disabled>
<Sonnet />
</Tab>
If I apply this into my own project...
<Tab eventKey="home" title="Home">
<SignUp />
{/* <Sonnet /> */}
</Tab>
<Tab eventKey="profile" title="Profile">
<SignIn />
{/* <Sonnet /> */}
</Tab>
<Tab eventKey="contact" title="Contact" disabled>
{/* <Sonnet /> */}
</Tab>
</Tabs>
'SignUp' and 'SignIn' is my own react component.
You must replace "<Sonnet />" with your own class, that you want to render.
Yup, replace <Sonnet /> with your own class, that you want to render.
<Tabs defaultActiveKey="home" id="uncontrolled-tab-example">
<Tab eventKey="home" title="Home">
<TabContent />
{/* <Sonnet /> */}
</Tab>
<Tab eventKey="profile" title="Profile">
<TabContent />
{/* <Sonnet /> */}
</Tab>
<Tab eventKey="contact" title="Contact" disabled>
<TabContent />
{/* <Sonnet /> */}
</Tab>
</Tabs>
I noticed there is no documentation on MaterialUI's website in regard to changing the underline color of their Tabs component...
http://www.material-ui.com/#/components/tabs
Use TabIndicatorProps property to change the underline color.
<Tabs TabIndicatorProps={{style: {backgroundColor: "white"}}}>
<Tab label='Tab 1'/>
<Tab label='Tab 2'/>
</Tabs>
This property can be changed with the inkBarStyle props:
<Tabs inkBarStyle={{backgroundColor: '#e77600'}}>
<Tab label='Tab 1'/>
<Tab label='Tab 2'/>
</Tabs>
<Tabs indicatorColor="white">
<Tab label="Tab 1"/>
<Tab label="Tab 2"/>
</Tabs>
Indicator Color can take any color e.g white, red, green e.t.c
In the latest material ui version v4.9.11, you need to use indicator props to apply underline color
<Tabs indicator={{backgroundColor: '#e77600'}}>
<Tab label='Tab 1'/>
<Tab label='Tab 2'/>
</Tabs>
I've implemented the material-ui react tabs as follows
<Tabs onChange={(value) => props.changeTabListener(value)} value={props.currentTab} style={styles.tabs}>
<Tab label="Tab 1" value={props.candidatesTab}>
<div style={props.currentTab == 0 ? {display:'inline'} : {display:'none'}}>
<WorksheetTableContainer/>
<div style={fabStyle}>
<FloatingActionButton style={iconPadding}>
<ContentClear/>
</FloatingActionButton>
<FloatingActionButton style={iconPadding}>
<ModeEdit/>
</FloatingActionButton>
<FloatingActionButton style={iconPadding}>
<ContentSave />
</FloatingActionButton>
<FloatingActionButton >
<ArrowForward />
</FloatingActionButton>
</div>
</div>
</Tab>
<Tab label="Tab 2" value={props.savedTakesTab}>
<div style={props.currentTab == 1 ? {display:'inline'} : {display:'none'}}>
<WorksheetTableContainer/>
<div style={fabStyle}>
<FloatingActionButton >
<ArrowForward />
</FloatingActionButton>
</div>
</div>
</Tab>
</Tabs>
Which works for material-ui components. However, the WorksheetTableComponent stacks itself on the first tab. Ie:
How can I have the content be on two separate tabs?
Thanks
The error is occurring since Tab isn't programmed to handle children like that. Fortunately, the Tab label property accepts a node, so you could even pass the desired child that way:
<Tab
value={props.savedTakesTab}
label={
<div style={props.currentTab == 1 ? {display:'inline'} : {display:'none'}}>
<WorksheetTableContainer/>
<div style={fabStyle}>
<FloatingActionButton >
<ArrowForward />
</FloatingActionButton>
</div>
</div>
}
/>
If you still wanted the Tab2 label, you can simply set it within the child node. Hope that helps.
So I am new in using Material UI Tabs and I want the labels to disappear when the screen is resized. for example when the screen is in 500px or smaller, the logo will only retain and the label will disappear.
below is the sample code of my material ui Tabs
<Tabs onChange={this.handleChange.bind(this)} value={this.state.status}>
<Tab icon={<FontIcon className="fa fa-cogs" />} label="Process" value='orderProcessing' />
<Tab icon={<FontIcon className="fa fa-money" />} label="Paid" value='orderConfirmed' />
<Tab icon={<FontIcon className="fa fa-industry" />} label="Production" value='onProduction' />
<Tab icon={<FontIcon className="fa fa-shopping-cart" />} label="Qc and Packaging" value={3} />
<Tab icon={<FontIcon className="fa fa-cart-arrow-down" />} label="Sold" value='sold' />
<Tab icon={<FontIcon className="fa fa-ban" />} label="Cancelled" value='cancelled' />
<Tab icon={<FontIcon className="fa fa-globe" />} label="All Transactions" value='' />
</Tabs>
You can accomplish this by using this.isDeviceSize(). Here is an example:
Updated to show one tab with only a label and the other with only the icon when the screen is small. Previously both tabs removed the icons and the question was actually asking how to remove the labels. Now the example below shows how to do either.
import React from 'react'
import {Mixins, Tabs, Tab} from 'material-ui'
const {StylePropable, StyleResizable} = Mixins
import {MapsDirectionsRun} from 'material-ui/lib/svg-icons'
export default React.createClass({
propTypes: {
onChangeMuiTheme: React.PropTypes.func,
},
contextTypes: {
muiTheme: React.PropTypes.object,
},
mixins: [StylePropable, StyleResizable],
render() {
return (
<Tabs>
<Tab
label="Tab 1"
icon={this.isDeviceSize(StyleResizable.statics.Sizes.MEDIUM) ? (<MapsDirectionsRun />) : null}>
Tab 1 content
</Tab>
<Tab
label={this.isDeviceSize(StyleResizable.statics.Sizes.MEDIUM) ? "Tab 2" : null}
icon={<MapsDirectionsRun />}>
Tab 2 content
</Tab>
</Tabs>
)
}
})