Question

我正在使用素材UI标签v0.20.0以表格格式显示内容。标签占全宽。我附上了预期和当前输出的截图。

预期输出

电流输出

请让我知道相同的解决方案。

提前致谢

Answer 1

您必须对标签宽度进行硬编码：

const width = 200;

const widthModifier = {
  width: `${width}px`,
};

然后应用它来更改标签宽度：

<Tab label="Item One" style={widthModifier}>

您还必须使用onActive跟踪当前活动标签，并自行计算墨条的位移。这是一个完整的工作示例：

import React, { Component } from 'react';
import {Tabs, Tab} from 'material-ui/Tabs';

const styles = {
  headline: {
    fontSize: 24,
    paddingTop: 16,
    marginBottom: 12,
    fontWeight: 400,
  },
};

const width = 200;

const widthModifier = {
  width: `${width}px`,
};

class TabWidth extends Component {
  constructor(props) {
    super(props);

    this.state = { selectedIndex: 0 };
  }

  render() {
    const { selectedIndex } = this.state;

    // Notice that I have to calculate the left position of the ink bar here for things to look right
    return (
      <Tabs inkBarStyle={ {left: `${width * selectedIndex}px`, ...widthModifier}}>
        <Tab label="Item One" style={widthModifier} onActive={() => this.setState({ selectedIndex: 0 })}>
          <div>
            <h2 style={styles.headline}>Tab One</h2>
            <p>
              You can put any sort of HTML or react component in here. It even keeps the component state!
            </p>
          </div>
        </Tab>
        <Tab label="Item Two" style={widthModifier} onActive={() => this.setState({ selectedIndex: 1 })}>
          <div>
            <h2 style={styles.headline}>Tab Two</h2>
            <p>
              This is another example tab.
            </p>
          </div>
        </Tab>
      </Tabs>
      );
    }
}

export default TabWidth;

但是，如果可能的话，你真的should be using v1。在material-ui v1中，您所需的标签行为是默认的right out of the box，并将根据屏幕尺寸进行缩放。

Answer 2

Tabs组件确实接受variant道具。可接受以下字符串值之一：

fullWidth ->这是OP的当前结果
标准->这是默认设置
可滚动->如果不是所有标签项都可见，则通过按钮添加滚动功能

现在，OP的预期结果应该是默认的道具（标准）。

官方文档：

标签指南：https://material-ui.com/components/tabs/
标签API：https://material-ui.com/api/tabs/

Answer 3

如果您想要固定宽度的制表符，则需要覆盖传递到root组件的Tab css类，在此必须覆盖minWidth和{{1} }属性。

示例：

width

Answer 4

将minWidth设置为50％即可完成

<Tabs value={value} style={{backgroundColor:"#121858",color:"#FFF"}} onChange= 
         {handleChange} aria-label="simple tabs example" >
        <Tab label="Tab One" {...a11yProps(0)} style={{minWidth:"50%"}}/>
         <Tab label="Tab Two" {...a11yProps(1)}  style={{minWidth:"50%"}}/>
 </Tabs>

Answer 5

我有这个问题。您只需将 fullWidth 添加到 Tabs 组件链接：

<Tabs variant="fullWidth" value={value} onChange={this.handleChange} aria-label="simple tabs example">
  <Tab className={classes.root} label={t('login')} />
  <Tab className={classes.root} label={t('register')} />
</Tabs>

它对我有用。

Answer 6

响应式解决方案：-

 <Tabs variant="fullWidth">  </Tabs>

如何更改材质UI中的标签宽度

6 个答案: