HowTo Компоненты – Обзор

Компоненты HowTo

«HowTo: Компоненты» — это набор веб-компонентов, реализующих общие шаблоны пользовательского интерфейса. Цель этих реализаций — стать образовательным ресурсом. Вы можете прочитать подробно прокомментированную реализацию различных компонентов и, надеюсь, поучиться на них. Обратите внимание, что они НЕ являются библиотекой пользовательского интерфейса и НЕ должны использоваться в рабочей среде.

  • <howto-checkbox> : представляет логический параметр в форме. Наиболее распространенным типом флажка является двойной тип, который позволяет пользователю переключаться между двумя вариантами выбора: отмеченным и снятым.
  • <howto-tabs> : ограничивает видимый контент, разделяя его на несколько панелей.
  • <howto-tooltip> : всплывающее окно, отображающее информацию, связанную с элементом, когда элемент получает фокус клавиатуры или наводит на него курсор мыши.

Цели

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

Доступность

Компоненты точно соответствуют правилам WAI ARIA Authoring Practices , которые представляют собой руководство по объяснению и демонстрации ARIA, стандарта доступных полнофункциональных интернет-приложений . Если вы не знакомы с ARIA, ознакомьтесь с нашим введением в WebFundamentals . Каждый компонент ссылается на соответствующий раздел «Практики авторского творчества». Хотя это и не является строго необходимым, мы рекомендуем прочитать раздел «Практика разработки», прежде чем углубляться в код.

Производительность

В веб-разработке термин «производительность» можно применять ко множеству вещей. В контексте <howto> производительность в основном относится к анимации, постоянно воспроизводимой со скоростью 60 кадров в секунду, даже на мобильных устройствах.

Визуальная гибкость

По возможности, компоненты не имеют стиля, за исключением макета или обозначения выбранного или активного состояния. Это сделано для того, чтобы реализация была визуально гибкой и целенаправленной. Не тратя время на оформление, мы ограничиваем код только тем, что абсолютно необходимо для функционирования компонента. Если для функционирования компонента требуется какой-либо стиль, стиль будет помечен комментарием, объясняющим, почему это необходимо.

Сопровождаемый код

Поскольку HowTo: Components является эталонной реализацией, мы потратили дополнительное время на написание читаемого и легко понятного кода с большим количеством комментариев.

Нецели

Быть библиотекой/фреймворком/инструментарием

Компоненты <howto> не публикуются на npm, Bower или любой другой платформе, поскольку они не предназначены для использования в производстве. Ради краткого и читаемого кода мы используем современные API-интерфейсы JavaScript и поддерживаем современные браузеры, реализующие стандарты веб-компонентов. После прочтения этих реализаций вы сможете адаптировать код под свои нужды.

Быть обратно совместимым

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

Будьте полным

В настоящее время мы не реализуем (и, вероятно, не будем) * все * компоненты, которые можно найти в методах разработки WAI ARIA. Однако повторное использование принципов, используемых в других компонентах <howto> , должно позволить читателям реализовать любые отсутствующие компоненты.