В этой серии статей я разрабатываю и кодирую различные общие компоненты пользовательского интерфейса с помощью React и styled-components.

На этот раз мы собираемся создать компонент вкладок, который будет иметь некоторую приятную рябь из второго издания этой серии.

Дизайн

Давайте перейдем к делу и посмотрим, как будет выглядеть конечный результат:

Я хотел создать что-то визуально простое и понятное, что людям все еще кажется знакомым. Мне очень нравится стиль вкладок Android, хотя я являюсь пользователем iPhone, поэтому я решил использовать толстую нижнюю границу для обозначения активной вкладки и использовать эффект ряби, чтобы улучшить взаимодействие с пользователем и сделать вкладки более интерактивными.

Я действительно хотел попробовать анимировать границу при наведении / щелчке, но быстро понял, что редко видел, чтобы она успешно использовалась в Интернете - мне она всегда кажется немного нервной… Так что давайте забудем об этом и продолжим 🚶.

Выполнение

Вот как вы могли бы использовать компонент Tabs в методе рендеринга приложений React:

Как вы могли заметить, фактические кнопки вкладок нигде не отображаются и не определяются напрямую, а вместо этого создаются из меток статических компонентов Panel вкладок. Метка может быть любым допустимым компонентом React, поэтому вы можете, например, передать значок плюс строку в качестве метки, если это необходимо.

Но почему бы не использовать свойства кнопок и панелей в компоненте вкладок?

Разве это не было бы более явным?

Да, возможно, но использование сложных вещей в качестве реквизита, на мой взгляд, делает код менее читаемым и менее элегантным. Я обычно предпочитаю составлять сложные вещи из более мелких частей, чем собирать все в один компонент.

Недавно я обнаружил шаблон статических компонентов для улучшения компонентов с помощью частей, которые не нужно экспортировать отдельно, и мне это очень нравится.

Прежде чем мы продолжим, я хочу отметить, что появились новые тенденции под названием Функция как ребенок и Управляемый реквизит, представленные в основном Кентом С. Доддсом с этими отличные статьи:

После того, как я закончил работу с компонентом вкладок, я понял, что, вероятно, я мог бы использовать здесь эти шаблоны ... Может быть, я сделаю еще один пост в блоге, где я напишу тот же компонент вкладок с ними 🤔

Теперь давайте посмотрим на базовую версию компонента Tabs без каких-либо стилизованных компонентов, отзывчивости или доступности.

Мы используем встроенный в React сопоставитель дочерних элементов, чтобы сначала создать кнопки вкладок, а затем выбрать правильную панель вкладок на основе индекса выбранной вкладки. Мы выбираем метку из свойства метки компонентов панели, как показано ранее.

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

Хорошо, хватит отговорок, давайте посмотрим, как выглядит полноценный компонент вкладок со всеми наворотами.

Давайте разберемся.

Итак, мы добавили опору точки останова (по умолчанию 768 пикселей), которая заставляет вкладки адаптироваться к узким размерам экрана. Вот как это выглядит на телефоне:

Мы также добавили некоторые атрибуты доступности, чтобы сообщить программе чтения с экрана, какие вкладки и их подкомпоненты являются семантически (tablist, tab, tabpanel) и как следует обрабатывать фокус - если вы выберете одну из вкладок, вы можно переключаться между ними с помощью клавиши табуляции.

Наконец, мы определили все стилизованные компоненты, чтобы наши вкладки выглядели красиво и аккуратно с соответствующими стилями наведения / активности. Поскольку мы используем HOC withRipple, который создает дополнительный div-обертку для кнопок вкладок, нам пришлось немного перезаписать стиль, чтобы кнопки хорошо играли на маленьких экранах.

Готово!

И снова вот конечный результат:

Упражнения для читателя

И, как и было обещано ранее, вот список возможных улучшений, которые вы можете попробовать:

  • Добавьте необязательную опцию selectedTab, чтобы вручную изменить активную вкладку.
  • Добавьте необязательную опцию onTabChange, которая вызывается каждый раз при изменении вкладки.
  • Сделайте эффект ряби необязательным
  • Воссоздайте вкладки с паттернами «Функция как дочерний» и «Управляемый реквизит».

Если вы хотите, чтобы я взглянул на вашу версию компонента Tabs с предлагаемыми улучшениями, зайдите сюда или в Twitter.

Надеюсь, вам понравилось это читать, и, возможно, вы даже научились новым трюкам.

До следующего раза 👊

PS: Если вам интересно, как я генерировал фрагменты кода, посмотрите Carbon.

PPS: Если вы хотите получить код для компонента Tabs, его можно найти в моих сущностях. Вы также должны найти там withRipple HOC.

Мы нанимаем!

Вы хотите создавать захватывающие и интересные приложения с использованием современных веб-технологий? Ознакомьтесь с нашими открытыми вакансиями и присоединяйтесь к нам в Taito United!

Не можете найти подходящие должности? Желаете приключений? Отправьте свое резюме и открытую заявку на адрес [email protected] - мы будем более чем рады услышать вас и увидеть, что вы готовите 🍳