I'm using UI Kitten <Tab/> in my React Native app, and it's difficult to click. It seems as though only a tiny fraction of the tab at the bottom is actually clickable. My code is:
import { Layout, Tab, TabView } from '#ui-kitten/components';
...
<TabView>
<Tab title="Title">
...
</Tab>
<Tab title="Title">
...
</Tab>
</TabView>
I found that if I added <Tab title="Title" style={{height: '100%'}}> it does make it easier to press, but it's then much taller than I want.
Does anyone know how I can approach this?
SOLUTION:
It was an error elsewhere in my code. I had a component with opacity 0 sitting in front of the tabs.
Related
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} />
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
I'm creatting web app with React Leaflet. How I can transfer marker popup to react-leaflet-sideatabs
Local machine with react (windows 10)
<Sidebar
id="sidebar"
position="right"
collapsed={this.state.collapsed}
closeIcon={<FontAwesomeIcon icon={faAngleRight} />}
selected={this.state.selected}
onOpen={this.onOpen.bind(this)}
onClose={this.onClose.bind(this)}
>
<Tab
id="markerinfo"
header="Information"
icon={<FontAwesomeIcon icon={faInfoCircle} />}
>
// I need to transfer marker information here
</Tab>
</Sidebar>
Not sure if I understand the question. But I think the answer is simply React state. Say you have a marker and only the title is kept in state, you can take it anywhere for that matter.
See this sandbox example.
https://codesandbox.io/s/react-sidebar-marker-wknsp
Note: the example from that sidebar GitHub page was not working with my styling/etc on code sandbox.io so slightly adapted.
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
I have an issue related with styling in React / Material UI. I think is an issue related with TouchRipple from Material-UI
<div key={indexP}>
<Link className={classes.link} to={parent.link}>
<ListItem button selected={this.state.treeParentOpen[indexP] === true} onClick={this.handleClick(indexP)}>
<ListItemIcon>
<ParentIcon />
</ListItemIcon>
<ListItemText primary={parent.title} />
</ListItem>
</Link>
<Divider />
</div>
I have the above code inside a Drawer component (this is a small extract just to exemplify), for a Sidebar menu.
The issue i am having is related with the styling interaction of the ListItem and Link Components.
If i take the Link out of the code i have a normal ListItemripple behaviour (onclick and offclick), everything is pretty and in grey shades.
When i had the Link to the code (as is), the ripple behaviour of the ListItem changes and onClick is Blue and offClick purple. How should i address the styling of the ripple effect associated with buttonBase used in ListItem.
Thanks!