Вкладки позволяют пользователям просматривать и переключаться между группами связанного контента и добавлять дополнительный уровень навигации в приложения.

В этой статье мы узнаем, как легко создавать вкладки в пользовательском интерфейсе материалов с помощью компонентов 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 управляет отображением кнопок прокрутки. Может принимать три возможных значения:

  1. auto — кнопки прокрутки отображаются только тогда, когда видны не все элементы. Скрывает их ниже определенной ширины области просмотра.
  2. true - всегда отображает кнопки прокрутки.
  3. 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

Где нас найти:

🌐Сайт | 🌟Твиттер | 🌟Фейсбук