Bottom Navigation (Нижняя панель навигации)
Нижние панели навигации позволяют перемещаться между основными пунктами назначения в приложении.
Нижняя панель навигации отображает от трех до пяти элементов перехода внизу экрана. Каждый элемент перехода представлен значком и необязательной текстовой меткой. При нажатии на нижний значок навигации пользователь попадает на страницу, связанную с этим значком.
Bottom Navigation (Нижняя панель навигации)
Если есть только три действия, стоит всегда отображать и значки и текстовые метки.
<BottomNavigation
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
showLabels
className={classes.root}
>
<BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
<BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
<BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
</BottomNavigation>Нижняя навигация без текста
Если существует четыре или пять действий, стоит отображать неактивные элементы только в виде значков.
<BottomNavigation value={value} onChange={handleChange} className={classes.root}>
<BottomNavigationAction label="Recents" value="recents" icon={<RestoreIcon />} />
<BottomNavigationAction label="Favorites" value="favorites" icon={<FavoriteIcon />} />
<BottomNavigationAction label="Nearby" value="nearby" icon={<LocationOnIcon />} />
<BottomNavigationAction label="Folder" value="folder" icon={<FolderIcon />} />
</BottomNavigation>