Question

我一直在尝试增加选项卡单击范围的宽度，以扩大其范围并能够查看图标。

我看过一些例子，建议创建一个具有不同道具的类。它使用水平制表符，但不使用垂直制表符。如果有人可以帮助，那就太好了。不幸的是，我也尝试过专门在材质UI中搜索垂直选项卡道具，但没有结果。感谢您的帮助

这是目前的样子：

代码：

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);

Answer 1

对于有兴趣的人，我已经解决了它：

增加styles.root上的minWidth 并通过在样式中添加位置“绝对”来移动图标

如何增加垂直标签的宽度以提高图标的可见性和单击范围？

1 个答案: