Material UI in React [ Day14 ] Navigation Tabs 选项卡

Tabs 选项卡

这个组件可以提供比较好的使用者体验，在他切换浏览页面时也有比较好的动态效果。
下面试官网文件的范例:

// 子层切换的组件
function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box p={3}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}
TabPanel.propTypes = {
  children: PropTypes.node,
  index: PropTypes.any.isRequired,
  value: PropTypes.any.isRequired,
};
// 定义产出的prop与index值绑定
function a11yProps(index) {
  return {
    id: `simple-tab-${index}`,
    'aria-controls': `simple-tabpanel-${index}`,
  };
}
const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
  },
}));
export default function SimpleTabs() {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  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>
  );
}

如果标签的名称太长需要换行的话可以下wrapped来换行:

<Tab
  label="looooooooooooooooooooooooooooooooooooooooooooooooong tag"
  wrapped
  {...a11yProps(0)}
/>

另一种也可以用 paper 封包:

export default function DisabledTabs() {
  const [value, setValue] = React.useState(2);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Paper square>
      <Tabs
        value={value}
        indicatorColor="primary"
        textColor="primary"
        onChange={handleChange}
        aria-label="disabled tabs example"
      >
        <Tab label="Active" />
        <Tab label="Disabled" disabled />
        <Tab label="Active" />
      </Tabs>
    </Paper>
  );
}

如果想要调整 tabs 的排列，可以对 variant 下参数，fullWidth 的话会称满，如果想要选项置中的话，可以直接下centered。

<Tabs
  value={value}
  onChange={handleChange}
  indicatorColor="primary"
  textColor="primary"
  centered
>
  <Tab label="Item One" />
  <Tab label="Item Two" />
  <Tab label="Item Three" />
</Tabs>

如果不想让tabs换行，可以下variant="scrollable"，他会有左右横移的效果

<Tabs
  value={value}
  onChange={handleChange}
  indicatorColor="primary"
  textColor="primary"
  variant="scrollable"
  scrollButtons="auto"
>
  <Tab label="Item One" {...a11yProps(0)} />
  <Tab label="Item Two" {...a11yProps(1)} />
  <Tab label="Item Three" {...a11yProps(2)} />
  <Tab label="Item Four" {...a11yProps(3)} />
  <Tab label="Item Five" {...a11yProps(4)} />
  <Tab label="Item Six" {...a11yProps(5)} />
  <Tab label="Item Seven" {...a11yProps(6)} />
</Tabs>

tab组件内想要塞图案按钮的话可以塞在 property:icon 下:

<Tab label="Item One" icon={<PhoneIcon />} {...a11yProps(0)} />

实际使用上通成会和 React Router 连动，那写法上需要做一些额外的调整，以下为我个人的做法提供参考:

const WithRouter = () => {
  const classes = useStyles();
  let { path, url } = useRouteMatch();
  let history = useHistory();
  const { pathId } = useParams();
  const routePaths = [
      { path: '/Data', title: '资料'},
      { path: '/services', title: '服务'},
      { path: '/rake', title: '评价'},
  ];

  return (
    <div>
      <Paper square elevation={0}>
        <Tabs
          indicatorColor="primary"
          textColor="primary"
          value={
            history.location.pathname !== url
            ? history.location.pathname : false
          }
        >
          {routePaths.map((routePath) => (
            <Tab 
              key={routePath.path}
              value={`${url}${routePath.path}`}
              component={Link}
              to={`${url}${routePath.path}`}
              label={routePath.title}
            />
          ))}
        </Tabs>
      </Paper>
      <Switch>
        <Route path={`${path}/:NewPath`} component={NewSection}/>
      </Switch>
    </div>
  )
}

export default WithRouter

希望可以帮助大家有个方向去使用这个套件，那麽今天的内容就先到这边，明天会讲解stepper的部分。