Компоненты 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>
, должно позволить читателям реализовать любые отсутствующие компоненты.