Вкладки позволяют пользователям просматривать и переключаться между группами связанного контента и добавлять дополнительный уровень навигации в приложения.
В этой статье мы узнаем, как легко создавать вкладки в пользовательском интерфейсе материалов с помощью компонентов Tabs
и Tab
.
Компонент вкладок пользовательского интерфейса материалов
Мы можем использовать компонент Tabs
из Material UI для создания группы вкладок. У него есть реквизит value
, который устанавливает текущую выбранную вкладку, используя индекс, начинающийся с нуля.
Компонент Tab
создает каждую вкладку. Его реквизит label
устанавливает заголовок вкладки.
import { Box, Tab, Tabs } from '@mui/material'; import { useState } from 'react';
function App() { const [tabIndex, setTabIndex] = useState(0);
const handleTabChange = (event, newTabIndex) => { setTabIndex(newTabIndex); };
return ( <Box> <Tabs value={tabIndex} onChange={handleTabChange}> <Tab label="Tab 1" /> <Tab label="Tab 2" /> <Tab label="Tab 3" /> </Tabs> </Box> ); }
export default App;
Мы добавляем прослушиватель к реквизиту onChange
для выполнения действия, когда пользователь пытается выбрать другую вкладку. Мы можем получить доступ к индексу новой вкладки в слушателе. В приведенном выше примере мы используем состояние React, просто установив новое значение Tabs
в прослушивателе.
Мы можем отображать различный контент для каждой вкладки, используя значение Tabs
. Например:
import { Box, Tab, Tabs, Typography } from '@mui/material'; import { useState } from 'react';
function App() { const [tabIndex, setTabIndex] = useState(0);
const handleTabChange = (event, newTabIndex) => { setTabIndex(newTabIndex); };
return ( <Box> <Box> <Tabs value={tabIndex} onChange={handleTabChange}> <Tab label="Tab 1" /> <Tab label="Tab 2" /> <Tab label="Tab 3" /> </Tabs> </Box> <Box sx={{ padding: 2 }}> {tabIndex === 0 && ( <Box> <Typography>The first tab</Typography> </Box> )} {tabIndex === 1 && ( <Box> <Typography>The second tab</Typography> </Box> )} {tabIndex === 2 && ( <Box> <Typography>The third tab</Typography> </Box> )} </Box> </Box> ); }
export default App;
Цвета вкладок пользовательского интерфейса материала
Компонент Tabs
поставляется с определенными реквизитами, которые задают цвета различных частей вкладок. Свойство textColor
устанавливает цвет заголовка каждой вкладки, а свойство indicatorColor
устанавливает цвет индикатора.
<Tabs
value={tabIndex}
onChange={handleTabChange}
textColor="secondary"
indicatorColor="secondary"
>
<Tab label="Tab 1" />
<Tab label="Tab 2" />
<Tab label="Tab 3" />
</Tabs>
Пользовательские цвета вкладок
textColor
допускает только значение primary
, secondary
или inherit
. Это означает, что мы можем использовать только цвет родительского компонента Tabs
или один из основных и дополнительных цветов темы. Точно так же indicatorColor
допускает только значения primary
и secondary
. Чтобы установить собственные цвета, мы можем переопределить стили определенных классов из Material UI:
MuiTabs-indicator
: стиль индикатора вкладки.MuiTab-root
: стилизует каждую вкладку.MuiSelected
: стилизует текущую выбранную вкладку.
import { Box, Tab, Tabs } from '@mui/material'; import { blue, red } from '@mui/material/colors'; import { useState } from 'react';
function App() { const [tabIndex, setTabIndex] = useState(0);
const handleTabChange = (event, newTabIndex) => { setTabIndex(newTabIndex); };
return ( <Box> <Box> <Tabs value={tabIndex} onChange={handleTabChange} sx={{ '& .MuiTabs-indicator': { backgroundColor: red[500] }, '& .MuiTab-root': { color: blue[700] }, '& .Mui-selected': { color: red[500] }, }} > <Tab label="Tab 1" /> <Tab label="Tab 2" /> <Tab label="Tab 3" /> </Tabs> </Box> </Box> ); }
export default App;
Все сумасшедшие вещи, которые делает JavaScript
Увлекательное руководство по тонким предостережениям и менее известным частям JavaScript.
Зарегистрируйтесь и немедленно получите бесплатную копию.
Завернутые ярлыки вкладок
Мы можем установить свойство wrapped
на true
для Tab
, чтобы метка вкладки переносилась, если она слишком длинная.
<Tabs
value={tabIndex}
onChange={handleTabChange}
>
<Tab
label="Lorem ipsum, dolor sit amet consectetur adipisicing elit"
wrapped
/>
<Tab label="Tab 2" />
<Tab label="Tab 3" />
</Tabs>
Отключенные вкладки
Установка реквизита disabled
на true
на Tab
предотвращает его выбор.
<Tabs
value={tabIndex}
onChange={handleTabChange}
>
<Tab label="Active" />
<Tab
label="Disabled"
disabled
/>
<Tab label="Active" />
</Tabs>
Вкладки полной ширины в пользовательском интерфейсе материалов
Мы можем установить fullWidth
опору Tabs
на true
, чтобы tabs
занимал всю ширину области просмотра. Это полезно для небольших представлений.
<Tabs
value={tabIndex}
onChange={handleTabChange}
variant="fullWidth"
>
<Tab label="Tab 1" />
<Tab label="Tab 2" />
<Tab label="Tab 3" />
</Tabs>
Вкладки по центру
Для больших видов мы можем использовать реквизит centered
, чтобы расположить вкладки в центре.
<Tabs
value={tabIndex}
onChange={handleTabChange}
centered
>
<Tab label="Tab 1" />
<Tab label="Tab 2" />
<Tab label="Tab 3" />
</Tabs>
Прокручиваемые вкладки в пользовательском интерфейсе материалов
Свойство scrollable
позволяет пользователю прокручивать вкладки, если они переполняют свой контейнер.
<Tabs
value={tabIndex}
onChange={handleTabChange}
variant="scrollable"
scrollButtons="auto"
sx={{ width: 500 }}
>
<Tab label="Tab 1" />
<Tab label="Tab 2" />
<Tab label="Tab 3" />
<Tab label="Tab 4" />
<Tab label="Tab 5" />
<Tab label="Tab 6" />
<Tab label="Tab 7" />
<Tab label="Tab 8" />
<Tab label="Tab 9" />
<Tab label="Tab 10" />
</Tabs>
Кнопки прокрутки позволяют пользователю прокручивать вправо или влево.
Свойство scrollButtons
управляет отображением кнопок прокрутки. Может принимать три возможных значения:
auto
— кнопки прокрутки отображаются только тогда, когда видны не все элементы. Скрывает их ниже определенной ширины области просмотра.true
- всегда отображает кнопки прокрутки.false
- никогда не отображает кнопки прокрутки.
В следующем примере мы устанавливаем scrollButtons
на false
, чтобы скрыть кнопки прокрутки.
<Tabs
value={tabIndex}
onChange={handleTabChange}
variant="scrollable"
scrollButtons={false}
sx={{ width: 500 }}
>
<Tab label="Tab 1" />
<Tab label="Tab 2" />
<Tab label="Tab 3" />
<Tab label="Tab 4" />
<Tab label="Tab 5" />
<Tab label="Tab 6" />
<Tab label="Tab 7" />
<Tab label="Tab 8" />
<Tab label="Tab 9" />
<Tab label="Tab 10" />
</Tabs>
Вертикальные вкладки в пользовательском интерфейсе материалов
Чтобы отображать вертикальные вкладки, мы можем установить опору ориентации Tabs
на vertical
. По умолчанию это horizontal
.
import { Box, Tab, Tabs, Typography } from '@mui/material'; import { useState } from 'react';
function App() { const [tabIndex, setTabIndex] = useState(0);
const handleTabChange = (event, newTabIndex) => { setTabIndex(newTabIndex); };
return ( <Box> <Box sx={{ display: 'flex' }}> <Tabs value={tabIndex} onChange={handleTabChange}
orientation="vertical" > <Tab label="Tab 1" /> <Tab label="Tab 2" /> <Tab label="Tab 3" /> </Tabs> <Box sx={{ margin: 2 }}> {tabIndex === 0 && ( <Box> <Typography>The first tab</Typography> </Box> )} {tabIndex === 1 && ( <Box> <Typography>The second tab</Typography> </Box> )} {tabIndex === 2 && ( <Box> <Typography>The third tab</Typography> </Box> )} </Box> </Box> </Box> ); }
export default App;
Вкладки со значками
Мы можем использовать свойство icon
для отображения метки значка для вкладки вместо текста.
<Tabs
value={tabIndex}
onChange={handleTabChange}
>
<Tab icon={<SearchIcon />} />
<Tab icon={<StarIcon />} />
<Tab icon={<SettingsIcon />} />
</Tabs>
Мы также могли бы использовать его с реквизитом label
для отображения и значка, и текста для метки.
<Tabs
value={tabIndex}
onChange={handleTabChange}
>
<Tab
icon={<SearchIcon />}
label="Search"
/>
<Tab
icon={<StarIcon />}
label="Favorites"
/>
<Tab
icon={<SettingsIcon />}
label="Settings"
/>
</Tabs>
Положение значка вкладки
Свойство iconPosition
устанавливает положение значка в содержимом вкладки. Это может быть top
, bottom
, start
или end
.
<Tabs
value={tabIndex}
onChange={handleTabChange}
>
<Tab
icon={<AlarmIcon />}
label="top"
/>
<Tab
icon={<SearchIcon />}
iconPosition="start"
label="start"
/>
<Tab
icon={<StarIcon />}
iconPosition="end"
label="end"
/>
<Tab
icon={<FavoriteIcon />}
iconPosition="bottom"
label="bottom"
/>
</Tabs>
Заключение
Вкладки организуют группы связанного контента в отдельные представления, где одновременно может быть видно только одно представление. Мы можем использовать компоненты Tabs
и Tab
из Material UI, чтобы легко создавать и настраивать их в наших приложениях.
Обновлено на: codingbeautydev.com
Где нас найти: