如果要在 中水平显示多个项目AppBar
,请将它们放在 a中Toolbar
,它会很好地显示。请在此处查看此答案以了解原因。
如果要将导航栏推到右侧Box
,flexGrow
请1
在Tabs
. 这将创建一个空div
元素。它之所以有效,是因为Toobar
容器使用弹性布局。
<AppBar position="static">
<Toolbar>
<IconButton size="large" edge="start" color="inherit" sx={{ mr: 2 }}>
<MenuIcon />
</IconButton>
<Box flexGrow={1} />
<Tabs textColor="inherit">
<Tab label="One" />
<Tab label="Two" />
<Tab label="Three" />
</Tabs>
</Toolbar>
</AppBar>
完整示例
export default function Demo() {
const [value, setValue] = React.useState(0);
const handleChange = (_, newValue) => setValue(newValue);
return (
<>
<AppBar position="static">
<Toolbar>
<IconButton size="large" edge="start" color="inherit" sx={{ mr: 2 }}>
<MenuIcon />
</IconButton>
<Typography
variant="h6"
noWrap
component="div"
sx={{ display: { xs: "none", sm: "block" } }}
>
MUI
</Typography>
<Box flexGrow={1} />
<Tabs value={value} onChange={handleChange} textColor="inherit">
<Tab label="One" />
<Tab label="Two" />
<Tab label="Three" />
</Tabs>
</Toolbar>
</AppBar>
<div index={value} onChangeIndex={setValue}>
<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>
</>
);
}
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<div role="tabpanel" hidden={value !== index} {...other}>
{value === index && (
<Box sx={{ p: 3 }}>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}
现场演示
