esl

Biblioteca inteligente exadel

Exadel Smart Library ( ESL ) es una biblioteca de componentes de interfaz de usuario ligera y flexible de código abierto basada en componentes web. Aumente el rendimiento de su sitio construyendo modelos UX con componentes personalizados de nuestra biblioteca. La biblioteca de componentes de la interfaz de usuario de ESL es compatible con cualquier marco, lo que hace que ESL sea ideal para proyectos, independientemente de su pila tecnológica.

★ Echa un vistazo a nuestra biblioteca de componentes de la interfaz de usuario y adiéntala con una estrella ★

• Descripción general
• Estructura de biblioteca
• Guía de instalación
• Información de desarrollo para contribuyentes

Descripción general

Exadel Smart Library, o ESL para abreviar, es una biblioteca gratuita de componentes web de interfaz de usuario que reduce las tareas de rutina y le permite crear eficientemente sitios web con múltiples componentes web a mano. Cuando decida cuál es la mejor biblioteca de componentes de interfaz de usuario para su sitio, tenga en cuenta que debe ser compatible con otras bibliotecas y marcos, ¡como ESL es!

La biblioteca de componentes de UI de ESL le permite acceder a un kit de herramientas lleno de componentes reutilizables. Puede utilizar estos componentes web para complementar proyectos o construir su infraestructura desde cero utilizando ESL solo. Nuestra biblioteca de componentes de interfaz de usuario web es de alta calidad, por lo que lo único en lo que tendrá que concentrarse es aplicar estilos para satisfacer las necesidades de su proyecto.

ESL se basa únicamente en las funciones de Web API y Ecmascript 6, que permiten que nuestra biblioteca de componentes de interfaz de usuario web funcione bien en todos los navegadores modernos, como Firefox, Chrome, Safari, Opera y Edge. ESL también puede funcionar en IE11 cuando se proporciona toda la lista de polyfills (consulte el soporte y los polyfills del navegador para obtener más detalles).

Estructura de biblioteca

Al construir la biblioteca de componentes de la interfaz de usuario, incluimos componentes, componentes de formulario y utilidades que resuelven problemas de arquitectura de proyectos complejos y cumplen con el principio seco. Vea el resumen de los componentes web y lea las especificaciones.

Núcleo de biblioteca

Con nuestra biblioteca de componentes de la interfaz de usuario, obtiene azúcar de sintaxis flexible destinada a construirse sobre los componentes básicos y controlar su ciclo de vida.

• Elemento base de ESL

• Elemento de mezcla de ESL

• Consulta de medios de ESL

• Consulta de atravesado de ESL

• Oyente de eventos de ESL

• Utils de ESL

Componentes

Nuestra biblioteca de componentes de interfaz de usuario HTML le proporciona todos los elementos que necesitará para construir módulos UX con un rendimiento excelente.

• ESL A11ygroup (beta)

• Alerta de ESL

• ESL Animate

• Notas al pie de ESL (beta)

• Imagen de ESL

• ESL Media

• Panel de ESL

• Grupo de panel de ESL

• ESL PopUp (beta)

• Objetivo relacionado con ESL (beta)

• Barra de desplazamiento de ESL

• ESL SELECT (beta)

• Lista de selección de ESL (beta)

• ESL Share (beta)

• Pestaña de ESL y pestañas

• ESL Togglable

• Desencadenante de ESL

---

Guía de instalación

0. Precondiciones:

   • Asegúrese de tener todos los polyfills necesarios para admitir los navegadores de su lista de soporte de navegador. Consulte el soporte y los poliplaces del navegador para obtener más detalles.
   • Use un Bundler para construir su proyecto. Actualmente, solo hay módulos ES6 disponibles para el consumo.

1. Instale la dependencia de ESL NPM:

    npm i @exadel/esl --save
   

2. Importar componentes/módulos que necesita:

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

   • La entrada del módulo core generalmente representa la parte principal del módulo;
   • Incluya subfreaturas opcionales directamente. Consulte la documentación del componente para obtener más detalles.

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

   • Algunos módulos contienen all las entradas acumulativas.
   • Los estilos se distribuyen en dos versiones:
     • 'listo para usar' core.css o core.less
     • Versión de mezcla core.mixin.less para la definición de nombre de etiqueta personalizada

3. [Opcional] Configuración del entorno de configuración, por ejemplo, puntos de interrupción de pantalla personalizados:

    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. Registre los componentes web a través de la llamada de método estático register :

    ESLImage . register ( ) ;

   Puede pasar el nombre de la etiqueta personalizado a la función 'Registrar', pero use esta opción solo en una situación excepcional.

---

Información de desarrollo para contribuyentes

Si usted forma parte del equipo de ESL o desea contribuir al proyecto, puede encontrar información útil sobre los procesos y acuerdos del proyecto aquí:

• ? Guía de contribución

• ? Guía de desarrollo

• ? Acuerdo de licencia de contribuyente

---

Equipo central de ESL

Personas que arquitectan, mantienen y mantienen la idea del ESL

Alexey Stsefanovich

Julia Murashko

Yuliya Adamskaya

Dmytro shovchko

Anna Barmina

Anastasiya lesun

Colaboradores de ESL :

Personas que contribuyen activamente a la ESL

Anna-Mariia Petryk Revelador	Feoktyst Shovchko Revelador	Natallia Harshunova Revelador	Yana Bernatskaya Revelador	Natalie Smirnova Revelador
Iryna Pavlenko Diseñador	Aliaksandr auseyeu Consultor	Andrey Belous Consultor	Dzianis Mantsevich Consultor	Liubou masiuk Consultor

Exadel, Inc.