Как создать индикатор вкладки прямоугольника для покрытия метки с помощью пользовательского интерфейса материала? - PullRequest
Новая
       6

Как создать индикатор вкладки прямоугольника для покрытия метки с помощью пользовательского интерфейса материала?

0 голосов
/ 27 мая 2019

Я пытаюсь создать полную обложку, которая покрывает размер вкладки на моей вкладке, используя MUI.Точно так же, как показано ниже, но с отображаемым текстом и возможностью повторного щелчка по нему с показанным эффектом ряби (без изменения непрозрачности).Спасибо 

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

const styles = theme => ({
  bigIndicator: {
    height: 50,

  },
});

class BasicTabs extends React.Component {
  state = { value: 0 }

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

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

    return [
      <AppBar position="static" key="appbar">
        <Tabs 
          classes={{ indicator: classes.bigIndicator }} 
          value={value}
          onChange={this.handleChange}
        >
          <Tab label="Item One" />
          <Tab label="Item Two" />
          <Tab label="Item Three" />
        </Tabs>
      </AppBar>,
      <div key="tab-content">
        {value === 0 && <Typography>Item One</Typography>}
        {value === 1 && <Typography>Item Two</Typography>}
        {value === 2 && <Typography>Item Three</Typography>}
      </div>
    ]
  }
}

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

export default withStyles(styles)(BasicTabs);
...