I have a TabContext like so:
<TabContext value={selectedTab.toString()}>
<TabList>
<Tab>Hi</Tab>
<Tab>Hi2</Tab>
</TabList>
</TabContext>
However, all the tabs are aligned to the right, I want to align them to the center. With the Tabs object, I can just pass the centered attribute, however, it doesn't work the same with the TabContext.
How can I center the TabContext like how we do with the Tabs?
From the TabList documentation => Props of the Tabs component are also available
So you can write :
<TabList centered>
<Tab>Hi</Tab>
<Tab>Hi2</Tab>
</TabList>
Related
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.
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"
/>
)}
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'm building a vertical menu bar in Semantic UI React. I have a number of Menu.Item components in my Menu. The first Menu.Item contains an Icon component with no Menu text. The issue I am having is that the Icon is overflowing into the Menu.Item below it. I can't figure out why this is? I have tried adjusting margin, padding, line-height but nothing seems to work. Any ideas? Would be greatly appreciated. Thank you.
Here is my code for the first couple Menu.Items. Adding text to Menu.Item increases the size correctly but I don't want any Menu text with the Icon.
<Menu.Item link><Icon name='x' size='large'/></Menu.Item>
<Menu.Item as={Link} to='/' onClick={this.handleSidebarHide}>
Home
</Menu.Item>
<Menu.Item as={Link} to='/about' onClick={this.handleSidebarHide}>About Us</Menu.Item>
Try This one it will help you
<Menu.Item> link style={{ display: "inline-block" }} ><Icon name='x' size='large'/></Menu.Item>
Can someone provide me with a way to create vertical tabs using React?
I experimented with various npm packages like react-web-tabs,reactstrap and react-bootstrap.The last two only had examples for horizontal tabs.React-web-tabs has a vertical tab example in their docs but it doesn't work.
import { Tabs, Tab, TabPanel, TabList } from 'react-web-tabs';
class NewNavigation extends React.Component{
render(){
return(
<Tabs defaultTab="vertical-tab-one" vertical>
<TabList>
<Tab tabFor="vertical-tab-one">Tab 1</Tab>
<Tab tabFor="vertical-tab-two">Tab 2</Tab>
<Tab tabFor="vertical-tab-three">Tab 3</Tab>
</TabList>
<TabPanel tabId="vertical-tab-one">
<p>Tab 1 content</p>
</TabPanel>
<TabPanel tabId="vertical-tab-two">
<p>Tab content</p>
</TabPanel>
<TabPanel tabId="vertical-tab-three">
<p>Tab 3 content</p>
</TabPanel>
</Tabs>
);
}
}
By now, it displays basic horizontal tabs and I want to fix this code as it displays vertical tabs.It is also highly appreciated if you recommend any other way.
By adding following CSS will do the trick for you:
.rwt__tab {
width: 100%
}
Another way is to import the CSS file in your component by adding the following line:
import 'react-web-tabs/dist/react-web-tabs.css';
Here is the example if for your reference.