Svelte est un framework front-end émergent avec quelques bibliothèques de composants. Aujourd'hui, je vais vous présenter une bibliothèque de composants mobiles Svelte.
À propos du STDF
STDF est une bibliothèque de composants d'interface utilisateur mobile , principalement utilisée pour développer des applications Web mobiles . Contrairement à de nombreuses bibliothèques de composants Vue que j'ai présentées auparavant , STDF est développé sur la base du récent framework js Svelte , qui est un framework JavaScript similaire à Vue/React, c'est-à-dire que cet ensemble de bibliothèques de composants est spécialement créé pour Svelte.
La syntaxe concise de Svelte est principalement destinée à permettre au code JS natif d'avoir des capacités réactives, et l'application Web packagée est très petite, ce qui est particulièrement adapté au développement d'applications mobiles. Tailwind est un cadre CSS élégant. Les amis intéressés peuvent aller sur En savoir plus sur l'apprentissage. La bibliothèque de composants STDF est construite sur la base de Svelte et Tailwind, qui tire ses avantages et est de haute qualité, cet article va vous la présenter.
Pourquoi s'appelle-t-il STDF ?
STDF est une bibliothèque de composants développée par des Chinois. Bien que le nom soit simple, l'auteur donne également quelques significations intéressantes :
Explication générale : S signifie Simple (simple), T signifie Thin (léger), D signifie Design (design), F signifie Fast (rapide), STDF signifie une bibliothèque de composants facile à utiliser, légère, design -convivial et rapide à développer.
Explication non conventionnelle : S et T signifient respectivement Svelte et Tailwind, car STDF est basé sur Svelte et Tailwind. DF peut être considéré comme le poète Du Fu, pas aussi romantique et élégant que Li Bai. Il prête attention à l'aspect pratique et à la facilité d'utilisation, qui est également le concept de design de STDF. J'espère que chaque développeur qui utilise STDF pourra écrire du code poétique.
— Clarification de l'auteur sur les noms STDF
caractéristiques techniques
- Simple : le codage est concis et rapide grâce à la syntaxe Svelte. La logique du code source du composant est claire, facile à comprendre et détaillée en chinois et en anglais. Il est également facile de visualiser le code source et de modifier la logique
- Léger : le code source est de petite taille et n'a pas de dépendances tierces. Le code compilé sur la base de Svelte et Tailwind présente également des avantages évidents en termes de taille, ce qui est particulièrement important du côté mobile.
- Design élégant : Design et interaction optimisés pour les appareils mobiles, convivial, efficace et flexible. Prend en charge le système de couleurs personnalisé, le style de coin arrondi, le mode clair et sombre, etc. grâce à une configuration simple
- Rapide : Pas de runtime, pas de DOM virtuel, pas de code CSS encombrant, gestion d'état simple et légère. Le processus de codage, le traitement de la compilation et le fonctionnement en ligne sont tous plus rapides
liste des composants
-
Bouton Bouton
-
Fenêtre flottante inférieure BottomSheet
-
IcôneIcône
-
Masque Masque
-
couche contextuelle Popup
-
Diviseur
-
Grilles Grilles
-
Espace réservé Espace réservé
-
Écran squelette
-
Barre d'index Barre d'index
-
Barre de navigationNavBar
-
Pagination
-
Pas
-
Barre d'onglets Barre d'onglets
-
Onglets Onglets
-
Feuille d'action du panneau d'action
-
Sélecteur asynchrone AsyncPicker
-
CalendrierCalendrier
-
case à cochercase à cocher
-
Champ de saisie Entrée
-
Sélecteur de sélecteur
-
Radio
-
Taux d'évaluation
-
Curseur Curseur
-
CommutateurCommutateur
-
Sélecteur de temps TimePicker
-
Avatar Avatar
-
Insigne de logo
-
Cellule Cellule
-
Barre d'avis Barre d'avis
-
Barre de progression Progression
-
Boucle de progression ProgressLoop
-
Balayeur de carrousel
-
Dialogue Dialogue
-
Chargement
-
Modal
-
Invite lumineuse Toast
Expérience pratique et conseils en matière de développement
Svelte est un nouveau framework front-end ces dernières années, mais l'écologie actuelle n'est pas particulièrement riche. STDF fait partie des bibliothèques de composants d'interface utilisateur de très haute qualité, très élégantes en termes d'apparence, de code et d'utilisation des composants.
J'ai également recommandé de nombreuses bibliothèques de composants Vue côté PC auparavant, mais le côté mobile est relativement petit. L'auteur de STDF a également expliqué la raison. C'est parce que le côté mobile est généralement orienté vers les utilisateurs côté C et a des exigences élevées pour performance du produit, facilité d'utilisation et convivialité. Par conséquent, il faut beaucoup d'énergie pour faire un bon travail dans les produits mobiles.
En résumé, si vous recherchez la performance ultime, vous pouvez choisir Svelte. Si vous avez besoin d'un framework écologiquement complet et grand public, Vue reste un bon choix.
La bibliothèque de composants STDF condense une grande partie de l'expérience de l'auteur, ce qui nous permet de l'utiliser directement, ce qui nous fait gagner beaucoup de temps de développement et nous permet de nous concentrer sur les affaires. Plus petite et plus rapide, la bibliothèque de composants STDF est particulièrement adaptée pour développer quelques scénarios métiers relativement simples côté mobile, surtout si vous pensez qu'utiliser Vue ou React est gênant et encombrant, et qu'écrire du JS natif est chronophage. en utilisant cet ensemble de bibliothèques de composants Svelte.
Dans le cas de projets Svelte et Tailwind déjà configurés, nous pouvons les installer directement :
Ensuite, utilisez-le dans Svelet :
Pour une utilisation plus détaillée, vous pouvez consulter la documentation sur le site officiel du STDF. La documentation et les exemples de code sont écrits en détail et faciles à comprendre.
Instructions Open Source gratuites
STDF est une bibliothèque de composants d'interface utilisateur Web mobile développée sur la base de Svelte et Tailwind CSS. Le code source est hébergé sur Github sur la base de l' accord open source du MIT , et Svelte et Tailwind CSS sont également des projets open source du MIT, nous pouvons donc l'utiliser gratuitement. pour des projets commerciaux ou de développement secondaire.
Enfin, je voudrais souligner que j'ai déjà partagé de nombreuses bibliothèques de composants Vue, mais il s'agit d'une bibliothèque de composants Svelte qui ne peut pas être utilisée sur Vue.js.
Lien d'origine : https://www.thosefree.com/svelte-stdf