Embellissez vos projets Svelte avec la populaire bibliothèque CSS Bootstrap.

Svelte est un excellent choix pour créer des interfaces utilisateur et, même si l'écriture de styles personnalisés peut suffire pour les petits projets, une bibliothèque de composants est souvent préférable pour les projets à grande échelle.

Ces bibliothèques offrent des avantages tels qu'une interface utilisateur cohérente, une accessibilité améliorée et des options de personnalisation flexibles. Découvrez comment utiliser la bibliothèque de composants SvelteStrap pour rationaliser votre développement.

Que sont Svelte et Bootstrap?

Svelte est un framework JavaScript qui s'écarte de l'approche conventionnelle adoptée par des frameworks comme React. Au lieu d'exécuter la plupart de ses opérations au moment de l'exécution, Svelte compile votre application en JavaScript pendant le processus de construction.

Cette approche unique élimine le besoin d'un système virtuel Modèle objet de document (DOM) et réduit considérablement le code passe-partout.

Bootstrap est un framework CSS, créé par Twitter (maintenant sous la marque X), pionnier de la philosophie de conception « mobile first ». Il offre une multitude de composants préconçus.

Installer Sveltestrap dans votre projet

Avant de pouvoir installer Sveltestrap dans votre projet, vous devez vous assurer que votre projet Svelte est correctement configuré. Assurez-vous d'avoir Node.js et Gestionnaire de packages de nœuds (NPM) ou Fil fonctionnant sur votre machine. Vous pouvez créer un nouveau projet Svelte avec cette commande :

npm create vite
# or
yarn create vite

Nommez votre projet Svelte et lorsque vous êtes invité à choisir un framework et une variante, sélectionnez respectivement Svelte et JavaScript. Après avoir fait ça, CD dans le répertoire du projet et exécutez :

npm install
# or
yarn

Cette commande installera les dépendances nécessaires pour un projet Svelte typique.

Une fois votre projet Svelte prêt, vous pouvez maintenant installer la bibliothèque Sveltestrap en exécutant :

npm i sveltestrap
# or
yarn add sveltestrap

Si vous rencontrez une erreur « Impossible de résoudre l'arborescence des dépendances » lors de l'installation de Sveltestrap, résolvez-la en exécutant ces commandes de terminal :

npm config set legacy-peer-deps true
npm cache clean --force

Ensuite, procédez à l'installation de Sveltestrap ou envisagez d'utiliser Yarn comme gestionnaire de packages alternatif.

Supprimer le actifs et le lib dossier, puis effacez le contenu du App.svelte fichier et le App.css déposer. Ensuite, vous pouvez démarrer le serveur de développement en exécutant :

npm run dev
# or
yarn dev

Utiliser Sveltestrap dans votre projet

Pour commencer à utiliser Sveltestrap, vous devez inclure un lien vers la feuille de style Bootstrap à l'aide d'un lien CDN. Vous pouvez le faire à l'intérieur du tête élément dans votre mise en page HTML ou à partir du svelte: tête balise dans votre composant Svelte.

Ouvrez le index.html fichier et ajoutez ce qui suit au fichier tête élément:

<link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
/>

Si vous préférez, vous pouvez importer ou ajouter le lien tag directement dans le svelte: tête élément spécial comme celui-ci :

<svelte: head>
<link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
 />
svelte: head>

Alternativement, vous pouvez utiliser le @importer règle dans le style balise de n'importe quel composant comme ceci :

<style>
 @import 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css';
style>

Le composant bouton dans Sveltestrap

Le framework Bootstrap standard fournit une variété de noms de classes que vous pouvez utiliser pour styliser les boutons. Ces options de classe incluent des noms tels que « primaire », « danger », « info », « lien » et bien d'autres.

Dans Sveltestrap, chacun Bouton Le composant comporte commodément un accessoire de couleur qui s'aligne sur les options de style par défaut de Bootstrap. Cela contribue à simplifier le processus de personnalisation. Pour importer un composant comme un bouton, ajoutez ce qui suit dans n'importe quel .svelte fichier de composant, comme src/App.svelte: