极客笔记如何在Material UI中使用AppBar组件
Material UI是一个包含各种具有不同样式和响应式设计的组件的库。例如，Material UI包含一个AppBar组件，我们可以直接将其导入到React组件中，并将其用作其他组件的子组件。
此外，Material UI库还包含不同的组件，如按钮、链接、选项卡栏、分页等。此外，我们可以通过在使用组件时传递属性来操纵每个组件。例如，我们可以通过传递相应的属性使AppBar响应式。
本教程将教我们如何在Material UI中使用AppBar组件。
用户在应用程序中使用之前应安装Material UI库。打开终端，进入项目目录，并输入以下命令以在React应用程序中安装Material UI。
npm install @mui/material @mui/icons-material
语法
用户可以按照下面的语法使用 Material UI 库来创建一个时尚的 AppBar 组件。
<Box sx = {{ flexGrow: 1 }}>
<AppBar position = "static">
<Toolbar>
{/* Add the content for toolbar */}
</Toolbar>
</AppBar>
</Box>
在上面的语法中，我们使用了AppBar组件并将position作为prop传递了进去。此外，我们还将AppBar组件包装在Box组件中，并将Toolbar组件作为AppBar组件的子组件添加进去。
示例
在下面的示例中，我们使用了Material UI库中的AppBar组件，并创建了简单的顶部导航栏。
在AppBar组件中，我们还传递了一些带有props的子组件。在TypoGraphy组件中，我们将’sx={{ flexGrow: 1}}’作为prop传递了进去，这使得我们可以在AppBar组件的右上角设置其他内容。
此外，我们还在导航栏的右上角添加了“注册”和“登录”按钮。
import React from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import Toolbar from "@mui/material/Toolbar";
export default function App() {
return (
<Box>
<AppBar position="static">
<Toolbar>
{/* sx = {flexGrow: 1} allows us to set all content at right except typography */}
<Typography variant = "h4" sx = {{ flexGrow: 1 }}>
AppBar
</Typography>
<Button color = "inherit"> Sign Up </Button>
<Button color = "inherit"> Sign In </Button>
</Toolbar>
</AppBar>
</Box>
);
}
输出
示例
在下面的示例中，我们使用Material UI库的AppBar组件创建了响应式的导航栏。
对于笔记本电脑尺寸的设备，用户可以在行中看到菜单项，并且对于平板电脑和移动设备，用户可以通过工具提示看到菜单项。此外，用户可以在页面数组中更改菜单选项。同时，开发人员可以观察我们如何使用map()方法来创建每个菜单项。
import * as React from "react";
import Container from "@mui/material/Container";
import Toolbar from "@mui/material/Toolbar";
import Button from "@mui/material/Button";
import MenuItem from "@mui/material/MenuItem";
import IconButton from "@mui/material/IconButton";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import AppBar from "@mui/material/AppBar";
import Menu from "@mui/material/Menu";
import MenuIcon from "@mui/icons-material/Menu";
export default function App() {
const pages = ["Page 1", "Page 2", "Page 3"];
const [menuItems, setmenuItems] = React.useState(null);
// function to close and open the tooltip menu
const openMenuToolTip = (event) => {
setmenuItems(event.currentTarget);
};
const closeMenuToolTip = () => {
setmenuItems(null);
};
return (
<AppBar position = "static">
<Container maxWidth = "xxl">
{/* adding the toolbar */}
<Toolbar disableGutters>
{/* adding the logo icon */}
<Typography
Variant = "h4"
sx = {{
letterSpacing: "5px",
color: "white",
textDecoration: "none",
}}
>
LOGOIcon
</Typography>
{/* menu icon for mobile and tablet devices */}
<Box sx = {{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
<IconButton onClick = {openMenuToolTip} color = "inherit">
<MenuIcon />
</IconButton>
{/* tooptip options */}
<Menu
anchorEl = {menuItems}
open = {Boolean(menuItems)}
onClose = {closeMenuToolTip}
>
{pages.map((page) => (
<MenuItem key = {page} onClick = {closeMenuToolTip}>
<Typography textAlign = "center"> {page} </Typography>
</MenuItem>
))}
</Menu>
</Box>
{/* menu items for laptop devices */}
<Box sx = {{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
{pages.map((page) => (
<Button
key = {page}
onClick = {closeMenuToolTip}
sx = {{ color: "white", display: "block" }}
>
{page}
</Button>
))}
</Box>
</Toolbar>
</Container>
</AppBar>
);
}
输出
示例
在下面的示例中，我们使用AppBar组件在导航栏中添加了搜索栏。我们为搜索栏创建了自定义样式。
在输出中，用户可以观察到我们将搜索栏添加到了AppBar组件的右上角。
import * as React from "react";
import { styled } from "@mui/material/styles";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import InputBase from "@mui/material/InputBase";
import Toolbar from "@mui/material/Toolbar";
import SearchIcon from "@mui/icons-material/Search";
import Typography from "@mui/material/Typography";
// different styles for the search bar
// style for search div
const Search = styled("div")(({ theme }) => ({
position: "relative",
width: "100%",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(1),
width: "auto",
},
}));
// style for a search icon
const SearchIconWrapper = styled("div")(({ theme }) => ({
display: "flex",
alignItems: "center",
padding: theme.spacing(0, 2),
height: "100%",
position: "absolute",
}));
// style for input in the search
const StyledInputBase = styled(InputBase)(({ theme }) => ({
color: "inherit",
"& .MuiInputBase-input": {
padding: theme.spacing(1, 1, 1, 0),
paddingLeft: `3.5rem`,
width: "100%",
},
}));
export default function App() {
return (
<Box sx = {{ flexGrow: 1 }}>
<AppBar position = "static">
<Toolbar>
<Typography sx = {{ flexGrow: 1 }}>Text</Typography>
{/* adding the search to AppBar component */}
<Search>
<SearchIconWrapper>
<SearchIcon />
</SearchIconWrapper>
<StyledInputBase placeholder="Search texts" />
</Search>
</Toolbar>
</AppBar>
</Box>
);
}
输出
