i have this code, what i want to do on the tab prop is add Tooltip on the icon:
<Tabs.TabPane tab={<Tooltip placement="left" title="adasd"><Icon size="1.2" name="cog" /></Tooltip>} key="map">
<MapProperties onChange={onChange} canvasRef={canvasRef} />
</Tabs.TabPane>
i was expecting for the hover to show but it's not working. is it possible to add ant design tooltip on tabs pane?
Anuj's answer isn't correct since TabPane should be direct children of Tabs component. I also had such problem and I find out that i can solve it like this:
<TabPane
key="3"
tab={(
<Tooltip title="Your hint that appears after user's mouse will be over the tab title">
<span>tab title</span>
</Tooltip>
)}
disabled={mode === PageMode.NEW}
>
tab attribute accepts any ReactNode so we can just wrap our tab name with any component. And tooltip isn't exception.
Proof that this works
It should be like
<Tooltip title="foo">
<Tabs.TabPane>....</Tabs.TabPane>
</Tooltip>
https://ant.design/components/tooltip/#header
Related
I have a common custom component (a <MenuItem /> from Material-UI) that is wrapped in React.forwardRef. I use this in many places for displaying items in <Menu /> components - sometimes a ref is passed, in other cases not.
I want this component to have a <Tooltip /> but I find that the Tooltip does not display on the first instance of the common component in a Menu (but does show on other instances).
If i remove the prop innerRef={ref} from the <MenuItem /> in my component, that does fix it - but I don't quite understand why?
I think I could resolve this by wrapping the <MenuItem /> in e.g a <span />, but I'm keen to understand what is going on here and why the Tooltip is not showing?
https://codesandbox.io/s/new-fire-fngcof?file=/src/App.tsx
There is no property named innerRef in MUI or React.
Change that to ref and everything will work as expected.
<Tooltip title={props.tooltipTitle}>
<MenuItem ref={ref}>Menu item</MenuItem>
</Tooltip>
If you are eager to know what is innerRef, see this question.
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"
/>
)}
How can I have a button triggering an ant.design Collapse component to expand all its tabs, or collapse all of them? I tried changing defaultActiveKey but I get the impression that this can only be changed when the page is rendered? If not, could someone provide a short snippet of a button collapsing multiple panels? The number of panels I have is set.
You should use component in controlled mode, that is you should supply value of panels which are open. For that you should use activeKey prop. Here is example:
let App = () => {
let [openPanels, setOpenPanels] = React.useState([]);
return (
<Collapse activeKey={openPanels} onChange={setOpenPanels}>
<Panel header="This is panel header 1" key="1">
<p>test1</p>
</Panel>
<Panel header="This is panel header 2" key="2">
<p>test2</p>
</Panel>
<Panel header="This is panel header 3" key="3">
<p>test3</p>
</Panel>
</Collapse>
);
};
Now you can easily add a button and on click set setOpenPanels([]) to collapse all of them.
ReactJS: I trying to fire mouse event clicking on evolution metrics tab but not working.How to do it.
<Tabs type="card">
<TabPane tab="evolution metrics" key="1" onClick={handleTab}>
Content of tab 1
</TabPane>
</Tab>
Might need to see more of the surrounding code, like the definition of handleTab, but sometimes what works is putting onClick={() => handleTab()}
because TabPane not support props onClick: https://ant.design/components/tabs/#Tabs.TabPane
You can use onChange on Tabs component: https://ant.design/components/tabs/#Tabs
<Tabs onChange={handleTab} />
How do I get a material UI button to left align the label? There are no props to directly change the inline-styles on the button element and the only way I can figure to do this is to add a class and write some gross css selector like thisClass > div > button.
http://www.material-ui.com/#/components/raised-button
I had a similar issue with buttons that have an icon. I fixed it by justifing the content:
<Button
startIcon={<AccountCircleIcon/>}
fullWidth={true}
style={{justifyContent: "flex-start"}}>
button text
</Button>
You can give the label absolute positioning by using the labelStyle property on the element.
This works:
<RaisedButton
label="Primary"
primary={true}
lableStyle={{position: 'absolute',top: 0,left: -10}} />
Edit: Updating my answer with better ways to do this
Using text align on the button:
<RaisedButton
style={{textAlign: 'left'}}
label="Primary"
primary={true}/>
Using float on the label:
<RaisedButton
lableStyle={{float: 'left'}}
label="Primary"
primary={true}/>