I need a condition for the below code, when we go through the address id, it will show only the upgrade page tab and will go through bricks, it will show only the new purchase page tab only.
Now it is showing both tabs. I need one tab for conditonally. Please help with this.
If I understand your question correctly, you can use the selectActive tab to hide / display the tab of your choice like this:
<Row className="mt-3">
<Col>
<Tabs onSelect={selectTab} defaultActiveKey={selectActive()} id="uncontrolled-tab-example" style={{ backgroundColor: 'rgb(237 245 240 / 38%)' }}>
{selectActive() === "newPurchase" && (
<Tab eventKey="newPurchase" title="New Webshop">
<NewPurchase/>
</Tab>
)}
{selectActive() === "upgrade" && (
<Tab eventKey="upgrade" title="Existing Webshop">
<Upgrade/>
</Tab>
)}
</Tabs>
</Col>
</Row>
It will show / hide the tab depending upon the value returned from the function. By the way, your question needs more clarity
Related
I need to do two things:
Need to increase default icon arrow size
Need to change icon to a different one when the panel is expanded.
I managed to do that this way:
<Collapse
expandIconPosition='right'
className='collapse-container'
// this works fine
expandIcon={({isActive}) => isActive
? <img src={closeCollapseIcon} />
: <img src={openCollapseIcon} />}
>
<Panel header='Question...' key='3'>
<p className='help-panel-text'>Some text</p>
</Panel>
</Collapse>
My question is:
Is there a way to do the same but in a more elegant way? My solution seems to be too straightforward.
You dont need to render two img tags, you can achieve the same thing with one tag. A more appropriate way would be using the Icon component provided by ant design
expandIcon={({ isActive }) => (
<Icon
component={isActive ? closeCollapseIcon : openCollapseIcon}
width="2em"
height="2em"
/>
)}
I'm working with React.js and Carbon as Design System. I have a Tabs component with multiple Tab and I need to disable one of them if a condition is not satisfied.
I have tried to disable using the carbon class
className="bx--tabs__nav-item--disabled"
and also with prop disabled={true}but none of them works
There is some different way to disable the Tab element?? I know that avoid the onclick event works, but is no the prettiest way.
This is the code of the Tabs component.
<Tabs
tabContentClassName="tab-content"
className="tabs element-header__tabs"
>
<Tab
onClick={(e) =>
onclickHandler(e)
}
label="tab 1"
/>
<Tab
onClick={(e) =>
onclickHandler(e)
)
}
label="tab 2"
/>
<Tab
disabled={true}
onClick={(e) =>
onclickHandler(e)
)
}
label="tab 3"
/>
</Tabs>
For anyone else who stumbles across this...
disable={true}
Now works in the current version of Carbon Tabs. I'm not sure if it didn't work before but it does now...
https://www.carbondesignsystem.com/components/tabs/code
Using material-ui I'm attempting to iterate an array and render a item value as a tab. I'd like to have the tabs grow on load as per this example https://material-ui.com/utils/transitions/#grow.
I'm able to effectively do the iteration and show the tabs as follows;
<Tabs fullWidth value={value} onChange={this.handleChange} scrollable>
{this.props.myArray.map((p, i) =>
<Tab value={p.value} label={`${p.value}`}/>)}
</Tabs>
The logical approach would be;
<Tabs fullWidth value={value} onChange={this.handleChange} scrollable>
{this.props.myArray.map((p, i) =>
<Grow in={true} timeout={500}
<Tab value={p.value} label={`${p.value}`}/>
</Grow>)}
</Tabs>
But this does not work, "p" becomes inaccessible and it does not apply the Grow effect.
Is my best option to use the Tab source and create my own component that implements a transition as outlined here https://reactcommunity.org/react-transition-group/transition?
I'm happy to do this, but would obviously prefer the above method if there is a simple solution.
Thanks!
Using Semantic ui React's Reveal with two different Cards. The visible one and then the hidden one. But the hidden one has a form and button that I need to interact with. Is there an easy way to make the form accessible? Or is the really only way to do so find the item with JS and then remove the attribute to interact with? Please someone give me some advice. Here is my current code for the Reveal.And yes I know code is sloppy right now. It's temporary.
<Reveal animated='fade' instant key={i}>
<Reveal.Content visible>
<Card
centered={true}
key={i}
raised={true}
style={{'backgroundColor':'blue', color:'white'}}
>
<Card.Header textAlign='center' as='h1'>
{Object.keys(each).toString()}
</Card.Header>
<Card.Header textAlign='center' as='h3'>
No peeking on other players wagers!
</Card.Header>
<Card.Header as='h1'></Card.Header>
<Card.Header as='h1'></Card.Header>
<Card.Header as='h2'></Card.Header>
</Card>
</Reveal.Content>
<Reveal.Content hidden>
<Card
centered={true}
key={i}
raised={true}
>
<Card.Header textAlign='center' as='h1'>
{Object.keys(each).toString()}
</Card.Header>
<Card.Header textAlign='center' as='h3'>
Please make your wager!
</Card.Header>
<Card.Content>
<Form
as='form'
>
<Form.Field>
<Label>Place your Wager</Label>
<Input icon='money' iconPosition='right' focus placeholder='Wager' />
</Form.Field>
<Button
type='submit'
size='large'
color='blue'
>
Submit
</Button>
</Form>
</Card.Content>
</Card>
</Reveal.Content>
</Reveal>
Technically your top content in your Reveal is covering the form below. Only the opacity is changing. It's still in the DOM with a higher z-index.
There are a number of ways you could solve this.
1) When the animation ends, set a display: none on the top "visible" Reveal. That means you'd have to listen to the animation end. And when the mouse leaves you would need to add display: block back so you can see the animation. Probably more work than you need.
2) Change the z-index to a lower value when the animation ends. Same issue as above.
3) Set pointer-events: none on the top "visible" reveal. This effectively makes the user's click events pass through the transparent Reveal and hit the form below instead. This is important to know, in case you intend to use the Reveal at some point to actually block the form. <Reveal.Content visible style={{pointerEvents: 'none'}}>
So I'm building a web app that contains a static header at the top that is always there on every page. I'm currently trying to find a function/method that could refresh the page I'm on without re-rendering the header.
Basically, I want to click the "Home" button and it refreshes the page Home but only the bottom part not the header. I've tried location.reload but it refreshes my entire page. Is there a way to only refresh the bottom part of my page?
The button that would refresh is in my header*
Here's my code for the main that renders my Header dumbed down:
Main.js
render(){
return(
<div className ="TextFont">
<Header {...this.props}/>
<div className="MarginTop">
<Grid>
<LastVisit />
<Row className="show-grid MarginTop">
<ButtonGroup vertical >
<NewRequest {...this.props}/>
<RequestInProgress {...this.props}/>
<Grid>
<Row className="show-grid">
<Col sm={6} md={12}>{this.props.actions[0].showRequest && <RequestGrid {...this.props}/> }</Col>
</Row>
</Grid>
</ButtonGroup>
</Row>
</Grid>
</div>
</div>
)
}
}
};
In Header, I want to call a method using a button to re-render the bottom part (so after < Header...>.
Thank you