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

Компоненты HowTo

"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 любого элемента, если будет найдена лучшая реализация. Это живой ресурс, где мы можем делиться, исследовать и обсуждать лучшие практики создания веб-UI.

Будьте полны

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