首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何在material UI中为每个选项卡创建多个标签的自定义选项卡?

如何在material UI中为每个选项卡创建多个标签的自定义选项卡?
EN

Stack Overflow用户
提问于 2019-05-15 02:25:52
回答 1查看 5.4K关注 0票数 3

我使用的是这样的材料UI,material-ui/Tabs代码示例...

代码语言:javascript
复制
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: 5,
  },
});

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="T1 Label 1" />
          <Tab label="T2 Label 1" />
          <Tab label="T3 Label 1" />
        </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);

但我想在每个选项卡中添加标签2,这样看起来就像这样……

这是我的示例代码和https://codesandbox.io/s/xjj5j6284

提前谢谢。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-15 03:37:09

标签可以像您需要的那样复杂。例如:

代码语言:javascript
复制
          <Tab
            label={
              <React.Fragment>
                T1 Label 1<br />
                <span style={{ fontSize: "smaller" }}>T1 Label2</span>
              </React.Fragment>
            }
          />

需要注意的是,我想确保您知道您使用的是一个非常旧的Material-UI版本。当前版本的导入以"@material-ui/core“开头,而不是以"material-ui”开头。

因此,不是

代码语言:javascript
复制
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";

你应该有

代码语言:javascript
复制
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";
票数 10
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56136435

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档