Försköna dina Svelte-projekt med det populära Bootstrap CSS-biblioteket.

Svelte är ett utmärkt val för att bygga användargränssnitt och även om det kan räcka för små projekt att skriva anpassade stilar, är ett komponentbibliotek ofta bättre för storskaliga projekt.

Sådana bibliotek erbjuder fördelar som konsekvent användargränssnitt, förbättrad tillgänglighet och flexibla anpassningsalternativ. Lär dig hur du kan arbeta med SvelteStrap-komponentbiblioteket för att effektivisera din utveckling.

Vad är Svelte och Bootstrap?

Svelte är ett JavaScript-ramverk som avviker från det konventionella tillvägagångssättet som används av ramverk som React. Istället för att köra de flesta av sin verksamhet under körning, kompilerar Svelte din applikation till JavaScript under byggprocessen.

Detta unika tillvägagångssätt eliminerar behovet av en virtuell Document Object Model (DOM) och reducerar koden avsevärt.

Bootstrap är ett CSS-ramverk, skapad av Twitter (numera varumärket X), som banade väg för designfilosofin "mobil-först". Den erbjuder en mängd fördesignade komponenter.

instagram viewer

Installera Sveltestrap i ditt projekt

Innan du kan installera Sveltestrap i ditt projekt måste du se till att ditt Svelte-projekt är korrekt konfigurerat. Se till att du har Node.js och Nod Package Manager (NPM) eller Garn som körs på din maskin. Du kan bygga ett nytt Svelte-projekt med det här kommandot:

npm create vite
# or
yarn create vite

Namnge ditt Svelte-projekt och när du uppmanas att välja ett ramverk och en variant väljer du Svelte respektive JavaScript. Efter att ha gjort det, CD in i projektkatalogen och kör:

npm install
# or
yarn

Detta kommando kommer att installera nödvändiga beroenden för ett typiskt Svelte-projekt.

Med ditt Svelte-projekt klart kan du nu installera Sveltestrap-biblioteket genom att köra:

npm i sveltestrap
# or
yarn add sveltestrap

Om du stöter på felet "kan inte lösa beroendeträdet" under installationen av Sveltestrap, löser du det genom att köra dessa terminalkommandon:

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

Fortsätt sedan med Sveltestrap-installationen eller överväg att använda Yarn som en alternativ pakethanterare.

Ta bort tillgångar och den lib mapp, rensa sedan innehållet i App.svelte filen och App.css fil. Efteråt kan du starta utvecklingsservern genom att köra:

npm run dev
# or
yarn dev

Använda Sveltestrap i ditt projekt

För att börja använda Sveltestrap måste du inkludera en länk till Bootstrap-stilmall med en CDN-länk. Du kan göra detta inuti huvud element i din HTML-layout eller från svelte: huvud taggen i din Svelte-komponent.

Öppna index.html fil och lägg till följande till huvud element:

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

Om du föredrar kan du importera eller lägga till länk tagga direkt i svelte: huvud specialelement som detta:

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

Alternativt kan du använda @importera härska i stil tagg för någon komponent så här:

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

Knappkomponenten i Sveltestrap

Standard Bootstrap-ramverket tillhandahåller en mängd olika klassnamn som du kan använda för att styla knappar. Dessa klassalternativ inkluderar namn som "primär", "fara", "info", "länk" och många andra.

I Sveltestrap, varje Knapp komponenten har bekvämt en färgrekvisita som är i linje med Bootstraps standardalternativ för styling. Detta hjälper till att förenkla anpassningsprocessen. För att importera en komponent som en knapp, lägg till följande i någon .svelte komponentfil, som src/App.svelte: