Abbellisci i tuoi progetti Svelte con la famosa libreria CSS Bootstrap.

Svelte è una scelta eccellente per creare interfacce utente e, mentre scrivere stili personalizzati può essere sufficiente per piccoli progetti, una libreria di componenti è spesso migliore per progetti su larga scala.

Tali librerie offrono vantaggi come un'interfaccia utente coerente, una migliore accessibilità e opzioni di personalizzazione flessibili. Scopri come lavorare con la libreria di componenti SvelteStrap per semplificare il tuo sviluppo.

Cosa sono Svelte e Bootstrap?

Svelte è un framework JavaScript, che diverge dall'approccio convenzionale adottato da framework come React. Invece di eseguire la maggior parte delle operazioni in fase di esecuzione, Svelte compila la tua applicazione in JavaScript durante il processo di compilazione.

Questo approccio unico elimina la necessità di un virtuale Modello oggetto documento (DOM) e riduce significativamente il codice standard.

Bootstrap è un framework CSS, creato da Twitter (ora marchiato X), che ha aperto la strada alla filosofia di design "mobile-first". Offre una vasta gamma di componenti predefiniti.

instagram viewer

Installazione di Sveltestrap nel tuo progetto

Prima di poter installare Sveltestrap nel tuo progetto, devi assicurarti che il tuo progetto Svelte sia configurato correttamente. Assicurati di avere Node.js e Gestore pacchetti nodo (NPM) o Filato in funzione sulla tua macchina. Puoi impalcare un nuovo progetto Svelte con questo comando:

npm create vite
# or
yarn create vite

Assegna un nome al tuo progetto Svelte e quando ti viene richiesto di scegliere un framework e una variante, seleziona rispettivamente Svelte e JavaScript. Dopo averlo fatto, CD nella directory del progetto ed esegui:

npm install
# or
yarn

Questo comando installerà le dipendenze necessarie per un tipico progetto Svelte.

Con il tuo progetto Svelte pronto, ora puoi installare la libreria Sveltestrap eseguendo:

npm i sveltestrap
# or
yarn add sveltestrap

Se riscontri un errore "impossibile risolvere l'albero delle dipendenze" durante l'installazione di Sveltestrap, risolvilo eseguendo questi comandi del terminale:

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

Quindi, procedi con l'installazione di Sveltestrap o considera l'utilizzo di Yarn come gestore di pacchetti alternativo.

Elimina il risorse e il lib cartella, quindi cancellare il contenuto del file App.svelte file e il App.css file. Successivamente, puoi avviare il server di sviluppo eseguendo:

npm run dev
# or
yarn dev

Utilizzo di Sveltestrap nel tuo progetto

Per iniziare a utilizzare Sveltestrap, è necessario includere un collegamento al foglio di stile Bootstrap utilizzando un collegamento CDN. Puoi farlo all'interno del Testa elemento nel layout HTML o dal file snello: testa tag nel tuo componente Svelte.

Apri il indice.html file e aggiungi quanto segue al file Testa elemento:

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

Se preferisci, puoi importare o aggiungere il file collegamento tag direttamente nel snello: testa elemento speciale come questo:

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

In alternativa è possibile utilizzare il @importare regola nel stile tag di qualsiasi componente come questo:

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

Il componente pulsante in Sveltestrap

Il framework Bootstrap standard fornisce una varietà di nomi di classi che è possibile utilizzare per definire lo stile dei pulsanti. Queste opzioni di classe includono nomi come "primario", "pericolo", "informazioni", "collegamento" e molti altri.

In Sveltestrap, ciascuno Pulsante Il componente presenta convenientemente un supporto di colore che si allinea con le opzioni di stile predefinite di Bootstrap. Ciò aiuta a semplificare il processo di personalizzazione. Per importare un componente come un pulsante, aggiungi quanto segue in any .snello file componente, come src/App.svelte: