Tabs 顧名思義拿來切換頁面用選項,如IT邦幫忙的上方Tab
我們可以很方便的選中想要的畫面
首先 管理狀態
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
可以很簡單的發現只有關於設定哪個頁面的狀態
基本上就是從0開始的異世界生活!
切換value確認在哪一頁
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
<Tab label="技術問答" {...a11yProps(0)} />
<Tab label="技術文章" {...a11yProps(1)} />
<Tab label="聊天室" {...a11yProps(2)} />
</Tabs>
</Box>
<TabPanel value={value} index={0}>
技術問答
</TabPanel>
<TabPanel value={value} index={1}>
技術文章
</TabPanel>
<TabPanel value={value} index={2}>
聊天室
</TabPanel>
</Box>