lion
0.17.2
Site Web · Fondamentaux · Guides · Composants · Blog
Lion est un ensemble de composants Web hautement performants, accessibles et flexibles.!
Ils fournissent une couche sans opinion en marque blanche qui peut être étendue à votre propre couche de composants.
Hautes performances : axé sur d'excellentes performances dans tous les navigateurs pertinents avec un nombre minimal de dépendances.
Accessibilité : visant à se conformer à la norme WCAG 2.2 AA pour créer des composants accessibles à tous.
Flexibilité : fournit des solutions via des composants Web et des classes JavaScript qui peuvent être utilisées, adoptées et étendues pour répondre à tous les besoins.
Code moderne : Lion est distribué sous forme de modules es purs.
Expose les fonctions/classes et les composants Web : fournit une fonctionnalité sous sa forme la plus appropriée.
Remarque : Nos exemples de démonstration peuvent sembler simples et peu élégants. C'est exprès. Ils sont conçus pour être basiques afin que vous puissiez facilement y ajouter vos propres styles pour correspondre à votre design prévu, sans avoir à vous soucier des styles déjà présents.
Explorez les guides Lion ▶
npm je @lion/ui
C'est le principal cas d'utilisation de lion . Pour importer des classes de composants et les étendre aux composants de votre propre système de conception.
importer { css } depuis 'lit'; importer { LionInput } depuis '@lion/ui/input.js'; la classe MyInput étend LionInput {
static get styles() {return [ super.styles, css` /* vos styles ici */ `,];
}}customElements.define('my-input', MyInput); Il existe quelques "systèmes" dans Lion qui disposent d'une API JavaScript. Les exemples sont localize , overlays , ajax , etc.
<type de script="module">
importer { ajax } depuis '@lion/ui/ajax.js' ;
ajax.fetch('data.json').then(response => réponse.json()).then(data => { // faire quelque chose avec les données});</script>Vous pouvez également utiliser les éléments du lion directement, bien que ce ne soit probablement pas un cas d'utilisation courant.
<type de script="module"> importer '@lion/ui/define/lion-input.js';</script><lion-input name="firstName"></lion-input>
Si vous rencontrez un problème avec l'un des packages que nous proposons, veuillez ouvrir un nouveau problème de bogue. Assurez-vous d'inclure une description du comportement attendu et actuel - l'ajout supplémentaire d'une reproduction est toujours utile.
Lorsque vous avez une idée sur la façon dont nous pourrions nous améliorer, veuillez consulter nos discussions pour voir s'il existe des idées ou des demandes de fonctionnalités similaires. S'il n'y en a pas, veuillez démarrer votre demande de fonctionnalité en tant que nouveau sujet de discussion. Ajoutez le titre [Feature Request] My awesome feature et une description de ce que vous attendez de l'amélioration et quel est le cas d'utilisation.
| Nom | version | description |
|---|---|---|
| @lion/ui | Ensemble de composants | |
| @lion/ajax | Un petit emballage à récupérer | |
| Gestionnaire Singleton | Un gestionnaire de singleton fournit un moyen de garantir qu'une instance de singleton chargée à partir de plusieurs emplacements de fichiers reste un singleton. Principalement utile si deux versions majeures d'un package avec un singleton sont utilisées. | |
| Le plugin Babel étend la documentation | Un plugin qui réécrit les importations et les modèles selon une configuration. Cela permet la réutilisation de la documentation existante des packages sources tout en continuant à utiliser le code de vos extensions. | |
| Analyse Providence | Providence est « l'œil qui voit tout » qui génère des statistiques d'utilisation en analysant le code. Il mesure l'efficacité et la popularité de votre logiciel. Avec seulement quelques commandes, vous pouvez mesurer l'impact des modifications (avec rupture), rendant votre processus de publication plus stable et prévisible. | |
| Publier des documents | Un outil qui copie et traite votre documentation (dans un monorepo) afin qu'elle puisse être publiée/expédiée avec votre package. | |
| Remarque prolonger | Un plugin de remarque pour étendre la démarque en important à partir de fichiers sources. | |
| Le préréglage de fusée étend la documentation sur le lion | Lorsque vous gérez votre propre couche d'extension de Lion, vous souhaiterez probablement conserver une documentation similaire. La copie et la réécriture des fichiers de démarque fonctionnent, mais chaque fois que quelque chose change, vous devez les copier et les réécrire à nouveau. Pour le faire automatiquement, vous pouvez utiliser ce préréglage pour Rocket. |
Lion Web Components vise à être évolutif et à utiliser une technologie éprouvée et bien prise en charge. La pile que nous avons choisie devrait refléter cela.
allumé
npm
Composants Web ouverts
Web moderne
Moka
Chaï
ESLint
plus jolie
Modules ES
Beaucoup, beaucoup de tests
Nous savons par expérience que créer des composants d'interface utilisateur accessibles et de haute qualité est difficile et prend du temps : il faut de nombreuses itérations, beaucoup de temps de développement et beaucoup de tests pour obtenir un composant générique qui fonctionne dans tous les contextes, prend en charge de nombreux cas extrêmes et est accessible dans tous les lecteurs d’écran pertinents.
Lion a pour objectif de faire le gros du travail à votre place. Cela signifie que vous n'avez qu'à appliquer votre propre système de conception : en fournissant des styles, en configurant les composants et en ajoutant un ensemble minimal de logique personnalisée par-dessus.
Consultez nos directives de codage pour des informations plus détaillées.
Remarque : ce projet utilise Npm Workspaces. Si vous souhaitez exécuter toutes les démos localement, vous devez obtenir au moins npm 7+ et installer toutes les dépendances en exécutant npm install .
Les composants Web Lion ne valent que par leurs contributions. Lisez notre guide de contribution et n'hésitez pas à améliorer Lion. Nous gardons les demandes de fonctionnalités fermées pendant que nous ne travaillons pas dessus.
N'hésitez pas à créer un problème github pour tout commentaire ou question que vous pourriez avoir.
