weightless
1.0.0
Ce projet a atteint la fin de son développement. N'hésitez pas à parcourir le code.
Composants Web de haute qualité avec une petite empreinte
Merci beaucoup d'avoir montré de l'intérêt pour ce projet! Si vous voulez nous aider à nourrir notre octocat, vous devriez certainement devenir Stargazer. Ces composants Web sont conçus pour être utilisés. Ils sont légers, ont une API simple et sont faciles à étendre et à composer. Allez ici pour voir une démo https://wewless.dev/elements.
Allez ici pour essayer la démo.
$ npm i weightless
Si vous souhaitez commencer super rapidement, vous pouvez utiliser la CLI.
$ npm init web-config new my-project --lit
Si vous préférez utiliser le bundle umd , vous pouvez importer https://unpkg.com/weightless/umd/weightless.min.js . Gardez à l'esprit que cela importe tous les éléments, il est donc recommandé de l'utiliser uniquement à des fins de test.
< script src =" https://unpkg.com/weightless/umd/weightless.min.js " > </ script > | Nom | Étiqueter | Description | Documentation | Démo |
|---|---|---|---|---|
| Toile de fond | wl-backdrop | Couche sombre à utiliser derrière des éléments superposés. | Documentation | Démo |
| Bannière | wl-banner | Affichez un message non interruptif et des actions facultatives connexes. | Documentation | Démo |
| Bouton | wl-button | Permettez aux utilisateurs de prendre des mesures et de faire des choix, avec un seul robinet. | Documentation | Démo |
| Carte | wl-card | Contenu et action liés au groupe. | Documentation | Démo |
| Cocher | wl-checkbox | Activer ou désactiver une option. | Documentation | Démo |
| Dialogue | wl-dialog | Messages hautement interrupteurs. | Documentation | Démo |
| Diviseur | wl-divider | Ligne mince qui regroupe le contenu dans les listes et les dispositions. | Documentation | Démo |
| Expansion | wl-expansion | Fournissez une vue de détails extensible. | Documentation | Démo |
| Icône | wl-icon | Symboles pour les actions et les éléments communs. | Documentation | Démo |
| Étiquette | wl-label | Rendre les éléments de forme plus accessibles. | Documentation | Démo |
| Lister l'élément | wl-list-item | Affichez un élément dans une liste. | Documentation | Démo |
| Navigation de navigation | wl-nav | Offrez un accès aux destinations de votre application. | Documentation | Démo |
| Sautissement | wl-popover | Éléments ancrés contextuels | Documentation | Démo |
| Carte de popover | wl-popover-card | Donnez aux popovers un flair contextuel. | Documentation | Démo |
| Barre de progression | wl-progress-bar | Remplit une barre de 0% à 100%. | Documentation | Démo |
| Progresser Spinner | wl-progress-spinner | Remplit un cercle de 0% à 100%. | Documentation | Démo |
| Radio | wl-radio | Sélectionnez une option dans un ensemble. | Documentation | Démo |
| Ondulation | wl-ripple | Indiquer les actions tactiles. | Documentation | Démo |
| Sélectionner | wl-select | Sélectionnez une ou plusieurs valeurs dans un ensemble d'options. | Documentation | Démo |
| Curseur | wl-slider | Faites des sélections à partir d'une gamme de valeurs. | Documentation | Démo |
| Barre des snacks | wl-snackbar | Fournissez de brefs messages en bas de l'écran. | Documentation | Démo |
| Changer | wl-switch | Activer ou désactiver une option. | Documentation | Démo |
| Languette | wl-tab | Organisez la navigation entre les groupes de contenu. | Documentation | Démo |
| Groupe d'onglet | wl-tab-group | Organisez la navigation entre les groupes de contenu. | Documentation | Démo |
| Texte | wl-text | Groupez le texte dans les paragraphes. | Documentation | Démo |
| Textarea | wl-textarea | Champs de texte multiline. | Documentation | Démo |
| Champ de texte | wl-textfield | Champs de texte à singleline. | Documentation | Démo |
| Titre | wl-title | Indiquez le début d'une nouvelle section. | Documentation | Démo |
| Infraction | wl-tooltip | Texte lié au contexte informatif. | Documentation | Démo |
Il y a beaucoup de choses passionnantes sur la feuille de route. Jusqu'à V1.0.0, vous pouvez vous attendre à ce que l'API soit assez stable, mais le refactorisation peut encore se produire et briser la compatibilité en arrière. Vous êtes les bienvenus pour utiliser la bibliothèque, créer des demandes de traction ou ajouter des problèmes.
Vous êtes plus que bienvenu pour contribuer à ce référentiel! Vous trouverez ci-dessous quelques instructions sur la façon de configurer le projet de développement.
git clone https://github.com/andreasbm/weightless.git .npm i pour installer toutes les dépendances.npm run s . Le navigateur doit être automatiquement ouvert à l'URL correcte. Sinon, vous pouvez ouvrir votre navigateur et aller sur http://localhost:1350 .npm run test .npm run lint .npm run docs .Les éléments sont écrits en dactylographie et les feuilles de style sont écrites en SASS. Tous les composants Web utilisent des éléments éclairés.
Si vous voulez en savoir plus sur la façon dont vous pouvez vous aider, vous devez certainement consulter le fichier contribution.md. Tous les contributeurs seront ajoutés à la section des contributeurs ci-dessous.
| Andreas Mehlsen | Toi? |
Licencié sous MIT.
