Question

看看这个例子：

https://material-ui.com/demos/tabs/#scrollable-tabs

如果没有箭头，如何删除此多余的空间：

谢谢。

Answer 1

您可以通过使用本示例中的样式为Tab组件提供填充来实现。

`<Tabs value={value} onChange={this.handleChange}>
    <Tab style={{paddingLeft: 0, paddingRight: 0}} label="Item One" />
    <Tab label="Item Two" />
    <Tab label="Item Three" />
</Tabs>`

Answer 2

这是可滚动箭头的空间。您可以使用不带

的简单选项卡版本

scrollable

属性和空白将被删除。

或者，您可以使用组件的当前样式（如绝对定位等）替换当前的可滚动箭头，例如：

        <Tabs> 
          ScrollButtonComponent={() => {
            return (
              <a style={
               { height: "10px", position: "absolute" }}>
                scroll
              </a>
            );
         </Tabs>

Answer 3

这应该删除空格，可滚动表示如果导航栏无法容纳在其视口中，则可以滚动导航栏，默认情况下，这会在文本之间添加一个空格以说明箭头。

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';

function TabContainer(props) {
  return (
    <Typography component="div" style={{ padding: 8 * 3 }}>
      {props.children}
    </Typography>
  );
}

TabContainer.propTypes = {
  children: PropTypes.node.isRequired,
};

const styles = theme => ({
  root: {
    flexGrow: 1,
    width: '100%',
    backgroundColor: theme.palette.background.paper,
  },
});

class ScrollableTabsButtonAuto extends React.Component {
  state = {
    value: 0,
  };

  handleChange = (event, value) => {
    this.setState({ value });
  };

  render() {
    const { classes } = this.props;
    const { value } = this.state;

    return (
      <div className={classes.root}>
        <AppBar position="static" color="default">
          <Tabs
            value={value}
            onChange={this.handleChange}
            indicatorColor="primary"
            textColor="primary"
            scrollButtons="auto"
          >
            <Tab label="Item One" />
            <Tab label="Item Two" />
            <Tab label="Item Three" />
            <Tab label="Item Four" />
            <Tab label="Item Five" />
            <Tab label="Item Six" />
            <Tab label="Item Seven" />
          </Tabs>
        </AppBar>
        {value === 0 && <TabContainer>Item One</TabContainer>}
        {value === 1 && <TabContainer>Item Two</TabContainer>}
        {value === 2 && <TabContainer>Item Three</TabContainer>}
        {value === 3 && <TabContainer>Item Four</TabContainer>}
        {value === 4 && <TabContainer>Item Five</TabContainer>}
        {value === 5 && <TabContainer>Item Six</TabContainer>}
        {value === 6 && <TabContainer>Item Seven</TabContainer>}
      </div>
    );
  }
}

ScrollableTabsButtonAuto.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ScrollableTabsButtonAuto);

希望这会有所帮助：）

Answer 4

我使用CSS解决了这个问题

.parentDiv div[class*="MuiTabs-scrollButtonsAuto"] {
    display: none;
}

;其中.parentDiv是父div的类名称。

2个空框之一将包含MuiTabs-scrollButtonsAuto- nnn 类，反之亦然。

注意事项：这可能不适用于生产版本，因为MUI类将缩短为类似jss的类名，即.jss3001（不熟悉在构建过程中缩小的插件）。我在生产版本上遇到此问题。

更新：这是针对生成版本的变通方法，在这些版本中，类名会缩小或转换为简写类名。基本上，选项卡夹在2个滚动箭头之间，其中的一个在激活时是类型按钮。此解决方案将那些div定位为第一个和第三个子代。可能并不灵活，但是无论如何您将使用1 MUI Tab版本。这适用于开发和生产版本。

.parentDiv > div:nth-child(2) > div:nth-child(1):not([type="button"]) {
    display: none;
}
.parentDiv > div:nth-child(2) > div:nth-child(3):not([type="button"]) {
    display: none;
}

Answer 5

TabScrollButton 组件负责显示箭头。您可以对其应用自定义样式。如果仅隐藏箭头，则整个选项卡菜单都会跳转。我建议只减小箭头的宽度，以使间隙不那么宽。但是，如果您坚持要完全隐藏它们，我们可以进行一些过渡，并将不活动箭头的宽度减小为0。

import TabScrollButton from '@material-ui/core/TabScrollButton';
import { withStyles} from '@material-ui/core/styles';

const MyTabScrollButton = withStyles(theme => ({
  root: {
    width: 28,
    overflow: 'hidden',
    transition: 'width 0.5s',
    '&.Mui-disabled': {
      width: 0,
    },
  },
}))(TabScrollButton);

<Tabs 
  ScrollButtonComponent={MyTabScrollButton}
  variant="scrollable"
  scrollButtons="auto"
>

如何删除material-ui的可滚动选项卡中的多余空间？

5 个答案: