Question

我使用Material-Ui标签。我想使其不显示在选项卡下，而是显示在上方。我无法在Material-Ui网站上找到有关它的任何信息。 Tabs React组件的API文档是否可以为我提供帮助？

 return (
    <div className={classes.root}>
      <AppBar position="static">
        <Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
          <Tab label="Item One" {...a11yProps(0)} />
          <Tab label="Item Two" {...a11yProps(1)} />
          <Tab label="Item Three" {...a11yProps(2)} />
        </Tabs>
      </AppBar>
      <TabPanel value={value} index={0}>
        Item One
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
      </TabPanel>
      <TabPanel value={value} index={2}>
        Item Three
      </TabPanel>
    </div>
  );
}

Answer 1

您好，使用Footer.js这种方法

export default ({ onSelect, category }) => {
  const index = category ? menus.findIndex(group => group === category) : 0;

  const onIndexSelect = (e, index) => {
    onSelect(index === 0 ? "LIGHTS" : menus[index]);
  };

  function TabPanel(props) {
    const { children, value, index, ...other } = props;

    return (
      <Typography
        component="div"
        role="tabpanel"
        hidden={value !== index}
        id={`scrollable-force-tabpanel-${index}`}
        aria-labelledby={`scrollable-force-tab-${index}`}
        {...other}
      >
        <Box p={3}>{children}</Box>
      </Typography>
    );
  }

  return (
    <Router>
      <Paper position="static">
        <Tabs
          value={index}
          onChange={onIndexSelect}
          variant="fullWidth"
          indicatorColor="primary"
          textColor="primary"
          aria-label="icon label tabs example"
        >
          <Tab
            icon={<LightsIcon />}
            label="LIGHTS"
            component={Link}
            to="/Lights"
          />
          <Tab
            icon={<AnimationsIcon />}
            label="ANIMATIONS"
            component={Link}
            to="/"
          />
          <Tab
            icon={<SettingsIcon />}
            label="SETTINGS"
            component={Link}
            to="/Settings"
          />
        </Tabs>
      </Paper>
      <TabPanel value={index} index={0}>
        Item One
      </TabPanel>
      <TabPanel value={index} index={1}>
        Item Two
      </TabPanel>
    </Router>
  );
};

如何使内容显示在标签上方？

1 个答案: