Хабрахабр

[Перевод] 9 библиотек веб-компонентов

1. Material components web

image

Веб-библиотека Google Material-components — это версия веб-компонента библиотеки Material-UI. Если использовать в заголовке слово «Material», то это гарантированно даст первые места в рейтингах UI-библиотек. Эти веб-компоненты можно включить в широкий спектр контекстов и сред.

EDISON Software - web-development
Статья переведена при поддержке компании EDISON Software, которая разрабатывает электронную систему медицинского осмотра, а также занимается поддержкой программного обеспечения.

2. Polymer elements

image

Polymer elements — это организация GitHub, содержащая более 100 повторно используемых компонентов Polymer в качестве автономных репозиториев, которые можно просматривать и использовать в готовом виде. Библиотека Polymer от Google позволяет создавать инкапсулированные веб-компоненты многократного использования, которые работают как стандартные элементы HTML, так же просто, как импорт и использование любого другого элемента HTML. Пример:

<!-- Import a component -->
<script src="https://unpkg.com/@polymer/paper-checkbox@next/paper-checkbox.js?module" type="module" ></script>
<!-- Use it like any other HTML element -->
<paper-checkbox>Web Components!</paper-checkbox>

3. Vaadin web components

image

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

4. Wired elements

image

И з этих элементов можно создавать каркасы и они нарисованы так, что никакие два рендеринга не будут абсолютно одинаковыми — как две отдельные нарисованные от руки фигуры. Wired elements — это набор «нарисованных от руки» (набравший 7000 звездочек). Экспериментировать с ними можно здесь, и даже на React и на Vue.

5. Elix

image

Чтобы обеспечить стандарты высокого качества, компоненты сравниваются с контрольным списком золотого стандарта для веб-компонентов, который использует встроенные элементы HTML в качестве индикатора качества. Elix — это community-driven многократно используемый набор настраиваемых веб-компонентов для общих шаблонов пользовательского интерфейса.

6. Time elements

<local-time datetime="2014-04-01T16:30:00-08:00"> April 1, 2014 4:30pm
</local-time>
--
<local-time datetime="2014-04-01T16:30:00-08:00"> 1 Apr 2014 21:30
</local-time>

звезд). Эта довольно старая библиотека (1500 тыс. Отформатировав временную метку в виде локализованной строки или относительного текста, который автоматически обновляется в браузере пользователя, вы можете создавать собственные расширения для использования в любом месте. Является в основном компонентом, предоставляющим пользовательские подтипы стандартного HTML-элемента time.

7. UI5-webcomponents

image

image

Представляет собой набор легких, многократно используемых и независимых элементов пользовательского интерфейса. Эта библиотека, созданная SAP. Вы можете использовать поверх frameworkов и приложений. Компоненты которые не построены поверх UI5, остаются автономными элементами. Протестируйте живую игровую площадку и API. Дизайн компонентов приведен в соответствие с SAP Fiori Design Guidelines и включает дизайн Fiori 3.

8. Patternfly

image

Run demo:

git clone git@github.com:patternfly/patternfly-elements.git
cd patternfly-elements
npm install # this will take a while due to lerna bootstrap
npm run storybook

Элементы PatternFly легки по размеру и наглядны (что в значительной степени является стандартом веб-компонента), работают в React, Vue, Angular, vanilla JS, везде, где используются элементы HTML. PatternFly Elements — это коллекция из почти 20 гибких и легких веб-компонентов и инструментов для их создания.

9. Web components org

image

Я перечисляю его здесь, так как это полезный способ обновления новых веб-компонентов от команды Polymer и предоставляет некоторые полезные ресурсы для прочтения при начале работы с веб-компонентами. Это не библиотека, а поисковый портал Гугловских веб-компонентов, построенный на элементах Polymer и ​​друзьях.

Ещё ресурсы, заслуживающие внимания

Еще интересные публикации

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть