Я пытался увеличить ширину диапазона щелчков вкладок, чтобы расширить его охват и иметь возможность просматривать значки.
Я видел несколько примеров, предлагающих создать класс с разными реквизитами. Он работал с горизонтальной вкладкой, но не с вертикальной. Было бы здорово, если бы кто-нибудь мог помочь. Я также пытался искать реквизиты вертикальных вкладок, в частности, в пользовательском интерфейсе, но, к сожалению, результатов не было. Спасибо за помощь
Вот как это выглядит в настоящее время:
Код:
import React from "react";
import ReactDOM from "react-dom";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Typography from "@material-ui/core/Typography";
import { withStyles } from "@material-ui/core/styles";
import Home from './Screens/Home'
import home from './home.svg';
import Contact from './Screens/Contact'
import contact from './contact.svg';
import {Router} from 'react-router-dom'
import Chat from './Screens/Chat'
import chat from './chat.svg';
import Settings from './Screens/Settings'
import settings from './settings.svg'
import Logout from './Screens/Logout'
import logout from './logout.svg';export default class ProfileTabs
extends React.PureComponent {
state = { activeIndex: 0 };
handleChange = (_, activeIndex) => this.setState({ activeIndex });
render() {
const { activeIndex } = this.state;
return (
<nav className= "side-drawer">
<div style={{letterSpacing: 0.7, left: 70, position: "absolute", marginTop: 40}}>
<VerticalTabs value={activeIndex} onChange={this.handleChange}>
<MyTab icon ={<img className= "home" src={home} alt="home" style={{height: 45, left:-35, top:8, position: "absolute"}}/>}
label={<p style={{ textTransform:"capitalize"}}>
Home
</p>}
/>
<MyTab icon ={<img className= "process" src={process} alt="process" style={{height: 45, left:-40, top:4, position: "absolute"}}/>}
label={<p style={{textTransform:"capitalize"}}>
Contact
</p>}
/>
<MyTab icon={<img className= "design" src={design} alt="design" style={{height: 45, left:-40, top:6, position: "absolute"}}/>}
label={<p style={{textTransform:"capitalize"}}>
Chat
</p>}
/>
<MyTab icon = {<img className= "material" src={material} alt="material" style={{height: 45, left:-40, top:5, position: "absolute"}}/>}
label={<p style={{textTransform:"capitalize"}}>
Settings
</p>}
/>
<MyTab icon={
<img className= "printer" src={printer} alt="printer" style={{height: 45, left:-40, top:8, position: "absolute"}}/>}
label={<p style={{textTransform:"capitalize"}}>
Logout
</p>}
/>
</VerticalTabs>
{activeIndex === 0 && <TabContainer><Home/></TabContainer>}
{activeIndex === 1 && <TabContainer><Processes/></TabContainer>}
{activeIndex === 2 && <TabContainer><Designs/></TabContainer>}
{activeIndex === 3 && <TabContainer><Materials/></TabContainer>}
{activeIndex === 4 && <TabContainer><Printers/></TabContainer>}
</div>
</nav>
);
}
}
const VerticalTabs = withStyles(theme => ({
flexContainer: {
flexDirection: "column"
},
indicator: {
display: "none"
}
}))(Tabs);
const MyTab = withStyles(theme => ({
selected: {
color: "White",
borderRight: "none"
}
}))(Tab);
const styles = theme => ({
root: {
minWidth: 100,
},
});
function TabContainer(props) {
return (
<Typography component="div" style={{ padding: 9 * 3 }}>
{props.children}
</Typography>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<ProfileTabs />, rootElement);