HowTo: Components – это набор веб-компонентов, реализующих распространенные шаблоны интерфейса. Эти реализации предназначены для использования в качестве учебного ресурса. Вы можете ознакомиться с реализацией различных компонентов, снабженной подробными комментариями, и, надеемся, научиться на их примере. Обратите внимание, что это НЕ библиотека пользовательского интерфейса и ее НЕЛЬЗЯ использовать в рабочей среде.
Компоненты
<howto-checkbox>– логический параметр в форме. Наиболее распространенным типом флажка является двойной тип, который позволяет пользователю переключаться между двумя вариантами: отмеченным и неотмеченным.<howto-tabs>– ограничивает видимый контент, разделяя его на несколько панелей.<howto-tooltip>– всплывающее окно с информацией об элементе, которое появляется, когда на элемент наводят указатель мыши или фокус клавиатуры.
Цели
Наша цель – продемонстрировать лучшие практики написания надежных компонентов, которые являются доступными, производительными, поддерживаемыми и легко стилизуемыми. Каждый компонент полностью автономен, поэтому его можно использовать в качестве эталонной реализации.
Специальные возможности
Компоненты тесно связаны с WAI ARIA Authoring Practices – руководством, в котором объясняется и демонстрируется ARIA, стандарт Accessible Rich Internet Application. Если вы не знакомы с ARIA, прочитайте наше введение на WebFundamentals. Каждый компонент ссылается на соответствующий раздел руководства Authoring Practices. Хотя это и не обязательно, мы рекомендуем прочитать раздел Authoring Practices, прежде чем погружаться в код.
Эффективность
В веб-разработке термин «производительность» может применяться ко многим вещам. В контексте <howto> производительность в основном относится к анимации, которая должна работать со скоростью 60 кадров/с даже на мобильных устройствах.
Гибкость визуального оформления
По возможности компоненты не стилизуются, за исключением макета или для указания выбранного или активного состояния. Это позволяет сделать реализацию визуально гибкой и целенаправленной. Не тратя время на оформление, мы ограничиваем код только тем, что абсолютно необходимо для работы компонента. Если для работы компонента требуется какой-либо стиль, он будет помечен комментарием с объяснением.
Поддерживаемый код
Поскольку HowTo: Components является эталонной реализацией, мы потратили дополнительное время на написание читаемого и легко понятного кода, который плотно прокомментирован.
Что не является целью
быть библиотекой, фреймворком или набором инструментов;
Компоненты <howto> не публикуются на npm, bower или других платформах, поскольку они не предназначены для использования в рабочей среде. Чтобы код был кратким и понятным, мы используем современные API JavaScript и поддерживаем современные браузеры, в которых реализованы стандарты веб-компонентов. Вы сможете адаптировать код под свои потребности.
Обеспечьте обратную совместимость.
Не полагайтесь на код напрямую. Мы можем и, скорее всего, будем радикально менять реализацию и API любого элемента, если найдем более эффективное решение. Это живой ресурс, на котором мы можем делиться, исследовать и обсуждать лучшие практики создания веб-интерфейсов.
Полнота
Мы не реализовали (и, скорее всего, не реализуем) *все *компоненты, которые можно найти в WAI ARIA Authoring Practices. Однако, используя принципы, применяемые в других компонентах <howto>, читатели смогут реализовать любые недостающие компоненты.