esl

Exadel Smart Library

Exadel Smart Library ( ESL )-это легкая и гибкая библиотека компонентов пользовательского интерфейса с открытым исходным кодом на основе веб-компонентов. Увеличьте производительность вашего сайта, создав модели UX с помощью пользовательских компонентов из нашей библиотеки. Библиотека компонентов ESL Web UI совместима с любой структурой, которая делает ESL идеальной для проектов независимо от их технического стека.

★ Проверьте нашу библиотеку компонентов пользовательского интерфейса и поддерживайте ее со звездой ★

• Обзор
• Библиотечная структура
• Руководство по установке
• Информация о разработке для участников

Обзор

Exadel Smart Library, или ESL для краткости, представляет собой бесплатную библиотеку компонентов веб -пользовательского интерфейса, которая снижает обычные задачи и позволяет эффективно создавать веб -сайты с несколькими веб -компонентами под рукой. Когда вы решаете, что является лучшей библиотекой компонентов пользовательского интерфейса для вашего сайта, имейте в виду, что она должна быть совместимой с другими библиотеками и рамками - как ESL!

Библиотека компонентов пользовательского интерфейса ESL позволяет получить доступ к инструментарию, полному многоразовым компонентам. Вы можете использовать эти веб -компоненты для дополнения проектов или создания своей инфраструктуры с нуля, используя только ESL. Наша библиотека компонентов веб-пользовательского интерфейса высококачественная, поэтому единственное, на чем вам придется сосредоточиться,-это применение стилей для удовлетворения потребностей вашего проекта.

ESL основана исключительно на функциях Web API и ECMASCRICT 6, которые позволяют библиотеке компонентов веб -интерфейса хорошо работать во всех современных браузерах, таких как Firefox, Chrome, Safari, Opera и Edge. ESL также может работать над IE11, когда будет предоставлен весь список полифиллов (см. Поддержку и полифиллы для браузера).

Библиотечная структура

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

Библиотека Ядро

Благодаря нашей библиотеке компонентов пользовательского интерфейса вы получаете гибкий синтаксис сахар, предназначенный для создания основных компонентов и контроля их жизненного цикла.

• ESL Базовый элемент

• ESL Mixin Element

• ESL Media Query

• ESL Traversing запрос

• ESL Слушатель

• ESL Utils

Компоненты

Наша библиотека компонентов HTML -интерфейса предоставляет вам все элементы, которые вам необходимы для создания UX -модулей с отличной производительностью.

• ESL A11ygroup (бета)

• ESL Alert

• ESL оживляет

• Сноски ESL (бета)

• ESL изображение

• ESL Media

• Панель ESL

• Группа панелей ESL

• ESL Popup (бета)

• Цель, связанная с ESL (бета)

• ESL Scrollbar

• ESL SELECT (бета)

• ESL Select List (бета)

• ESL Share (бета)

• Вкладка ESL и вкладки

• ESL Togglable

• ESL Trigger

---

Руководство по установке

0. Предварительные условия:

   • Убедитесь, что у вас есть все необходимые полифиллы для поддержки браузеров из списка поддержки браузеров. См. Поддержка браузера и полифиллы для деталей.
   • Используйте бундлер, чтобы создать свой проект. В настоящее время только модули ES6 доступны для потребления.

1. Установите зависимость ESL NPM:

    npm i @exadel/esl --save
   

2. Импортируйте компоненты/модули, которые вам нужны:

    import '@exadel/esl/modules/esl-component/core' ;

   • Вход модуля core модуля обычно представляет собой основную часть модуля;
   • Включите необязательные суб-функции напрямую. Смотрите документацию компонента для деталей.

    import '@exadel/esl/modules/esl-media/providers/iframe-provider' ;

   • Некоторые модули содержат кумулятивные all записи.
   • Стили распространяются в двух версиях:
     • 'Готовы к использованию' core.css или core.less
     • Mixin версия core.mixin.less для пользовательского определения Tagname

3. [Необязательно] Конфигурация среды настройки, например, пользовательские точки перерыва экрана:

    import { ESLScreenBreakpoints } from '@exadel/esl/modules/esl-media-query/core' ;
   
   // define XS screen breakpoint for up to 800px screen width
   ESLScreenBreakpoints . addCustomBreakpoint ( 'XS' , 1 , 800 ) ; 

4. Зарегистрируйте веб -компоненты через register статического вызова метода:

    ESLImage . register ( ) ;

   Вы можете передать пользовательское имя тега в функцию «зарегистрировать», но использовать эту опцию только в исключительной ситуации.

---

Информация о разработке для участников

Если вы являетесь частью команды ESL или хотите внести свой вклад в проект, вы можете найти полезную информацию о проектных процессах и соглашениях здесь:

• ? Руководство по взносу

• ? Руководство по разработке

• ? Лицензионное соглашение о участнике

---

ESL Core Team

Люди, которые архитектура, поддерживают и сохраняют идею ESL

Алексей Стефанович

Джулия Мурашко

Юлия Адамская

Dmytro Shovchko

Анна Бармина

Анастасия Лесун

Участники ESL :

Люди, которые активно вносят вклад в ESL

Анна-Мария Петрик Разработчик	Feoktyst Shovchko Разработчик	Наталлия Харшунова Разработчик	Яна Бернатская Разработчик	Натали Смирнова Разработчик
Ирина Павленко Дизайнер	АЛИАКСАНДР АУСЕЙУ Консультант	Андрей Белоус Консультант	Дзианис Манцевич Консультант	Liubou Masiuk Консультант

Exadel, Inc.