Итак, я написал эту коллекцию элементов. Встроенные веб-элементы являются частью спецификаций «веб-компонентов». Они позволяют нам расширять стандартные компоненты HTML и дать им новые сверхдержавы. Я написал их так, что мне не нужно повторять общие элементы пользовательского интерфейса. Я сосредоточился на поведении элементов, сохраняя минималистичный подход:
Почти нет стиля (стиль, ориентированное на поведение), позволяя вам свободно добавлять свою визуальную идентичность.
Элементы единого целей Анкет Каждый элемент должен делать только одно. Обычно он заключает в себе сложное поведение.
Простота Анкет Код очень прост. Самый большой источник компонента имеет 100 строк кода. Не существует сложного многоцелевого в значительной степени настраиваемого элемента.
Агностик Анкет Это означает, что платформы не требуются. Вы можете использовать их где угодно, просто добавьте
is = "El-name"Атрибут, чтобы дать новые полномочия стандартному элементу HTML.
Как сказал MDN: «Веб -компоненты – это набор различных технологий, позволяющий вам создавать многократные пользовательские элементы – с их функциональностью, инкапсулированными вдали от остальной части вашего кода – и использовать их в ваших веб -приложениях».
Документация и использование
Я приложил некоторые усилия для документирования коллекции и каждого элемента отдельно. Элементы действительно просты в использовании. Вы загружаете файлы CSS и JS, а затем используете атрибут «IS», чтобы указать, какое поведение вы хотите дать своему тегу.
Например
Im an accordion that shows this message when expanded
Вы можете проверить живые примеры и документы здесь: https://felippe-regazio.github.io/web-elements
И здесь: https://github.com/felippe-regazio/web-elements
Все элементы имеют богатый API с событиями и методами. Мне все еще нужно добавить доступность (нужна помощь здесь).
Список элементов
- ⚡ Аккордеон
Расширяет элемент Div, давая ему аккордеонную структуру и поведение.
- ⚡ Открытка
Расширяет элемент Div, придавая ему структуру и поведение карты.
- ⚡ Заголовок
Распространяет элемент заголовка, придавая ему набор функций, как фиксированные сверху и автоматическую скрытую на свитке.
- ⚡ Изображение просмотр
Распространяет элемент IMG, придавая ему полноэкранный представление, изображение будет отображаться на Lightbox при нажатии.
- ⚡ Lazy Load Img
Расширяет элемент IMG, давая ему ленивое поведение нагрузки. Изображения будут загружены только при видении.
- ⚡ Лайтбокса
Расширяет элемент Div, придавая ему поведение Lightbox.
- ⚡ Усы шаблон div
Расширяет элемент Div, давая ему возможность шаблона двигателя. Div будет способен анализировать JSON, чтобы заполнить свой контент.
- ⚡ Читать далее
Расширяет элемент Div, дающий контент внутри функции Read Dite.
- ⚡ Боковая панель
Расширяет элемент Div, придавая ему структуру и поведение боковой панели.
- ⚡ Спиннер
Расширяет элемент DIV, давая ему различные конфигурации, чтобы действовать как загрузочный спиннер.
Взносы, критики, встречи, подсказки … очень приветствуются!
🙂
Оригинал: “https://dev.to/felipperegazio/my-vanilla-javascript-built-in-web-elements-collection-3moo”