React MUI BottomNavigation API

React MUI是一个UI库，提供了经过完全加载的组件，将我们自己的设计系统带到了我们的成熟组件中。MUI是一个用户界面库，为快速和轻松的Web开发提供预定义和可自定义的React组件，这些Material-UI组件基于Google的Material Design。

在本文中，我们将讨论React MUI BottomNavigation API。底部导航组件允许用户在应用程序中在主要目标之间移动。

导入BottomNavigation API：

import BottomNavigation from '@mui/material/BottomNavigation';
// or
import { BottomNavigation } from '@mui/material';

属性列表：

children： 用于表示卡片的内容。
classes： 用于覆盖或扩展应用于组件的样式。
component： 用于渲染根元素的组件。
onChange： 活动选项卡更改时触发的回调函数。
showLabels： 控制是否显示选项卡标签的布尔值。
sx： 用于向卡片添加自定义CSS样式。

CSS规则：

root （MuiBottomNavigation-root）： 应用于根元素的样式。

创建React项目：

步骤1： 通过npm命令安装react模块来创建react应用程序。

npm create-react-app project name

步骤2： 创建好你的React项目后，进入文件夹执行不同的操作。

cd project name

步骤3： 创建ReactJS应用程序后，使用以下命令安装所需的模块：

npm install @mui/material @emotion/react @emotion/styled

项目结构：

React MUI BottomNavigation API

运行应用程序的步骤：

打开终端并输入以下命令。

npm start

示例1： 下面的示例演示了React MUI BottomNavigation API。在这个示例中，BottomNavigation组件将使用 showLabels 属性来显示其标签。

import { Add, Home, Info } from "@mui/icons-material"; 
import { 
    BottomNavigation, BottomNavigationAction, 
} from "@mui/material"; 
import React, { useState } from "react"; 
  
function App() { 
  
    const [value, setValue] = useState(0); 
  
    return ( 
        <center> 
            <div> 
                <h1 style={{ color: "green" }}>GeeksforGeeks</h1> 
                <h2>React MUI BottomNavigation API</h2> 
            </div> 
            <div style={{ width: "50%" }}> 
                <BottomNavigation 
                    showLabels 
                    value={value} 
                    onChange={(event, newValue) => { 
                        setValue(newValue); 
                    }} 
                    sx={{ backgroundColor: '#FCFBFA' }} 
                > 
                    <BottomNavigationAction label="Home" 
                        icon={<Home />} /> 
                    <BottomNavigationAction label="Create" 
                        icon={<Add />} /> 
                    <BottomNavigationAction label="About"
                        icon={<Info />} /> 
                </BottomNavigation> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出：

React MUI BottomNavigation API

示例2: 下面的示例演示了React MUI BottomNavigation API。在该示例中，BottomNavigation组件将不显示其标签。

import { Add, Home, Info } from "@mui/icons-material"; 
import { 
    BottomNavigation, BottomNavigationAction, 
} from "@mui/material"; 
import React, { useState } from "react"; 
  
function App() { 
  
    const [value, setValue] = useState(0); 
    return ( 
        <center> 
            <div> 
                <h1 style={{ color: "green" }}> 
                    GeeksforGeeks 
                </h1> 
                <h2>React MUI BottomNavigation API</h2> 
            </div> 
            <div style={{ width: "50%" }}> 
                <BottomNavigation 
                    value={value} 
                    onChange={(event, newValue) => { 
                        setValue(newValue); 
                    }} 
                    sx={{ backgroundColor: '#FCFBFA' }} 
                > 
                    <BottomNavigationAction label="Home" 
                        icon={<Home />} /> 
                    <BottomNavigationAction label="Create" 
                        icon={<Add />} /> 
                    <BottomNavigationAction label="About" 
                        icon={<Info />} /> 
                </BottomNavigation> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出：

React MUI BottomNavigation API