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的部分。