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.
Related
I want to add a to a react-tippy tooltip.
Is it possible?
I only get it to show [object Object]
Look at title bellow
<Tooltip
// title={this.renderTicks(idx, row)}
title={<div>
<h4>Hello</h4>
<span>This is a span</span>
</div>}
position="right"
trigger="click"
theme="light"
arrow="true"
arrowSize="big"
distance="3"
style={{fontSize:14}}
>
<div>Click Here</div>
</Tooltip>
I didn't use it before but reading the documentation said that you can use html props.
"Tooltip content. If you don't define html, the title will be used"
Something like this:
<Tooltip
html={(
<div>
<h4>Hello</h4>
<span>This is a span</span>
</div>
)}
>
OK seems easy enough
instead of title just use 'html'
<Tooltip
// title={this.renderTicks(idx, row)}
html={<div>
<h4>Hello</h4>
<span>This is a span</span>
</div>}
position="right"
trigger="click"
theme="light"
arrow="true"
arrowSize="big"
distance="3"
style={{fontSize:14}}
>
<div>Click Here</div>
</Tooltip>
I'm trying to dynamically add PivotItems to a Fabric UI Pivot.
return (
<div>
<PrimaryButton style={{margin:5 }} onClick={addItem}>
Add
</PrimaryButton>
<Pivot aria-label="My Items">
{items.map((item)=>{
return (
<div key={uniqueId}>
<PivotItem headerText="test">
Test
</PivotItem>
</div>)
})}
</Pivot>
</div>
)
but the items are not rendering.
When I remove all the Pivot/item-stuff and just print out some text it works fine...
ok I finally found the issue here.
Inside the map-function I used
<div key...
but this code is inside a <pivot> which allows only <PivotItem> as childs...
so I fixed it like this and it works:
return (
<div>
<PrimaryButton style={{margin:5 }} onClick={addItem}>
Add
</PrimaryButton>
<Pivot aria-label="My Items">
{items.map((item)=>{
return (
<PivotItem headerText="test" key={uniqueId}>
Test
</PivotItem>
)
})}
</Pivot>
</div>
)
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>
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>
)
}
})
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>