如何使用material-ui在工具栏内使用全高选项卡? [英] How can I have full-height Tabs inside of a Toolbar using material-ui?

问题描述

我正在尝试有一个固定的标题，在右边应该是制表符. <Toolbar />组件负责块的响应，但不允许如此轻松地拉伸 标签.

I am trying to have a fixed header where on the right side should be tabs. The <Toolbar /> component is responsible for the responsiveness of the block but doesn't allow for stretched tabs so easily.

https://codesandbox.io/s/jv8v6vwqpv

推荐答案

问题是工具栏会相应地更改其高度，并标签和

The problem is that the Toolbar responsively changes its height and the Tabs and Tab component do not (Tabs sets a min-height of 48px in its root class, Tab sets a height in its root class).

幸运的是，主题混入中提供了Toolbar使用的行为，因此您可以创建也使用此逻辑的类:

Fortunately, the behavior Toolbar uses is available in a theme mixin, so you can create classes that also use this logic:

const styles = theme => ({
  fullHeight: {
    ...theme.mixins.toolbar,
  },
});

这将创建一个类，该类具有与Toolbar组件中使用的响应高度逻辑相同的类.使用 withStyles ，您可以使此类可用于您的组件:

This will create a class that has the same responsive height logic used in the Toolbar component. Using withStyles, you can make this class accessible to your component:

import { withStyles } from "material-ui/styles";

// ...

export default withStyles(styles)(Header);

这将添加一个classes属性，该属性是一个对象，其中包含为提供给withStyles的对象中定义的每个类的字符串属性.您可以通过Tabs组件和每个Tab组件. >覆盖其 root 类，以确保它们填充AppBar:

This will add a classes prop, which is an object containing a string attribute for each class defined in the object provided to withStyles. You can apply this to the Tabs component and each Tab component by overriding their root classes to ensure that they fill the AppBar:

  render() {
    const { classes } = this.props;
    return (
      <AppBar>
        <Toolbar>
          <Grid container alignItems="center" justify="space-between">
            <Grid item>
              <Typography color="inherit" variant="title">
                BackTube
              </Typography>
            </Grid>
            <Grid item>
              <Tabs classes={{ root: classes.fullHeight }} onChange={this.changeTab} value={this.state.currentTab}>
                <Tab classes={{ root: classes.fullHeight }} icon={<Magnify />} value="search" />
                <Tab classes={{ root: classes.fullHeight }} icon={<FormatListBulleted />} value="lists" />
                <Tab classes={{ root: classes.fullHeight }} icon={<Settings />} value="settings" />
              </Tabs>
            </Grid>
          </Grid>
        </Toolbar>
      </AppBar>
    );

这是您的 codesandbox 的修改版本.

这篇关于如何使用material-ui在工具栏内使用全高选项卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！