esl

Bibliothèque intelligente exadel

Exadel Smart Library ( ESL ) est une bibliothèque de composants d'interface utilisateur légère et flexible open source basée sur des composants Web. Augmentez les performances de votre site en construisant des modèles UX avec des composants personnalisés de notre bibliothèque. La bibliothèque des composants UI Web ESL est compatible avec n'importe quel cadre, ce qui rend l'ESL idéal pour les projets indépendamment de leur pile technologique.

★ Consultez notre bibliothèque de composants d'interface utilisateur et soutenez-la avec une étoile ★

• Aperçu
• Structure de bibliothèque
• Guide d'installation
• Informations sur le développement pour les contributeurs

Aperçu

Exadel Smart Library, ou ESL pour faire court, est une bibliothèque de composants Web gratuits qui réduit les tâches de routine et vous permet de créer efficacement des sites Web avec plusieurs composants Web à portée de main. Lorsque vous décidez quelle est la meilleure bibliothèque de composants d'interface utilisateur pour votre site, gardez à l'esprit qu'elle devrait être compatible avec d'autres bibliothèques et frameworks - comme ESL!

La bibliothèque de composants UI ESL vous permet d'accéder à une boîte à outils pleine de composants réutilisables. Vous pouvez utiliser ces composants Web pour compléter les projets ou construire votre infrastructure à partir de zéro à l'aide de ESL seul. Notre bibliothèque de composants d'interface utilisateur Web est de haute qualité, donc la seule chose sur laquelle vous devrez vous concentrer est d'appliquer des styles pour répondre aux besoins de votre projet.

ESL est basé uniquement sur les fonctionnalités Web API et ECMAScript 6, qui permettent à notre bibliothèque de composants d'interface utilisateur Web fonctionne bien dans tous les navigateurs modernes tels que Firefox, Chrome, Safari, Opera et Edge. ESL peut également fonctionner sur IE11 lorsque toute la liste des polyfills est fournie (voir le support du navigateur et les polyfills pour plus de détails).

Structure de bibliothèque

Lors de la construction de la bibliothèque des composants d'interface utilisateur, nous avons inclus des composants, des composants de formulaires et des services publics qui résolvent des problèmes d'architecture de projet complexes et se conforment au principe sec. Voir le complicité des composants Web et lire les spécifications.

Noyau de bibliothèque

Avec notre bibliothèque de composants d'interface utilisateur, vous obtenez un sucre de syntaxe flexible destiné à construire au-dessus des composants de base et à contrôler leur cycle de vie.

• Élément de base ESL

• Élément de mixin ESL

• Requête multimédia ESL

• Requête de traverse ESL

• Écouteur d'événements ESL

• UTILS ESL

Composants

Notre bibliothèque de composants HTML UI vous fournit tous les éléments dont vous aurez besoin pour construire des modules UX avec d'excellentes performances.

• ESL A11yGroup (Beta)

• Alerte ESL

• ESL Animate

• Notes de bas de page ESL (bêta)

• Image ESL

• Médias ESL

• Panneau ESL

• Groupe de panneaux ESL

• Popup ESL (bêta)

• Cible liée à l'ESL (bêta)

• Barre de défilement ESL

• ESL Select (Beta)

• LISTE ESL SELECT (BETA)

• Partage ESL (bêta)

• Onglet ESL et onglets

• ESL basculé

• Déclencheur ESL

---

Guide d'installation

0. Conditions préalables:

   • Assurez-vous que vous avez tous les polyfills nécessaires pour prendre en charge les navigateurs de votre liste de support de navigateur. Voir la prise en charge du navigateur et les polyfills pour plus de détails.
   • Utilisez un bundler pour construire votre projet. Actuellement, seuls les modules ES6 sont disponibles pour la consommation.

1. Installez la dépendance ESL NPM:

    npm i @exadel/esl --save
   

2. Importez des composants / modules dont vous avez besoin:

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

   • L'entrée du module core représente généralement la partie principale du module;
   • Incluez directement les sous-aliments facultatifs. Voir la documentation du composant pour plus de détails.

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

   • Certains modules contiennent all les entrées cumulatives.
   • Les styles sont distribués en deux versions:
     • «Prêt à utiliser» core.css ou core.less
     • mixin version core.mixin.less pour la définition de tagname personnalisée

3. [Facultatif] Configuration de l'environnement de configuration, par exemple, point d'arrêt de l'écran personnalisé:

    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. Enregistrer les composants Web via register la méthode statique: Call:

    ESLImage . register ( ) ;

   Vous pouvez transmettre le nom de balise personnalisé à la fonction «enregistrer», mais utiliser cette option uniquement dans une situation exceptionnelle.

---

Informations sur le développement pour les contributeurs

Si vous faites partie de l'équipe ESL ou si vous souhaitez contribuer au projet, vous pouvez trouver des informations utiles sur les processus et accords du projet ici:

• ? Guide de contribution

• ? Guide de développement

• ? Contrat de licence de contributeur

---

Équipe de base ESL

Les personnes qui archite

Alexey Stsefanovich

Julia Murashko

Yuliya Adamskaya

Dmytro shovchko

Anna Barmina

Anastasiya lesun

Contributeurs ESL :

Les personnes qui contribuent activement à l'ESL

Anna-Mariia Petryk Promoteur	Feoktyst shovchko Promoteur	Natallia Harshunova Promoteur	Yana Bernatskaya Promoteur	Natalie smirnova Promoteur
Iryna Pavlenko Designer	Aliaksandr Auseyeu Consultant	Andrey Belous Consultant	Dzianis Mantsevich Consultant	Liubou Masiuk Consultant

Exadel, Inc.