Verfraai uw Svelte-projecten met de populaire Bootstrap CSS-bibliotheek.

Svelte is een uitstekende keuze voor het bouwen van gebruikersinterfaces en hoewel het schrijven van aangepaste stijlen voor kleine projecten voldoende kan zijn, is een componentenbibliotheek vaak beter voor grootschalige projecten.

Dergelijke bibliotheken bieden voordelen zoals een consistente gebruikersinterface, verbeterde toegankelijkheid en flexibele aanpassingsopties. Ontdek hoe u met de SvelteStrap-componentenbibliotheek kunt werken om uw ontwikkeling te stroomlijnen.

Wat zijn Svelte en Bootstrap?

Svelte is een JavaScript-framework dat afwijkt van de conventionele aanpak van frameworks als React. In plaats van de meeste bewerkingen tijdens runtime uit te voeren, compileert Svelte uw applicatie tijdens het bouwproces naar JavaScript.

Deze unieke aanpak elimineert de noodzaak van een virtueel Documentobjectmodel (DOM) en vermindert de standaardcode aanzienlijk.

Bootstrap is een CSS-framework, gemaakt door Twitter (nu gebrandmerkt als X), dat een pionier was in de 'mobile-first'-ontwerpfilosofie. Het biedt een schat aan vooraf ontworpen componenten.

instagram viewer

Sveltestrap in uw project installeren

Voordat u Sveltestrap in uw project kunt installeren, moet u ervoor zorgen dat uw Svelte-project correct is ingesteld. Zorg ervoor dat u Node.js en Knooppuntpakketbeheer (NPM) of Garen dat op uw machine draait. U kunt een nieuw Svelte-project steigeren met deze opdracht:

npm create vite
# or
yarn create vite

Geef uw Svelte-project een naam en wanneer u wordt gevraagd een raamwerk en een variant te kiezen, selecteert u respectievelijk Svelte en JavaScript. Nadat je dat gedaan hebt, CD in de projectmap en voer het volgende uit:

npm install
# or
yarn

Met deze opdracht worden de benodigde afhankelijkheden voor een typisch Svelte-project geïnstalleerd.

Nu uw Svelte-project gereed is, kunt u nu de Sveltestrap-bibliotheek installeren door het volgende uit te voeren:

npm i sveltestrap
# or
yarn add sveltestrap

Als u tijdens de installatie van Sveltestrap de foutmelding ‘Kan de afhankelijkheidsboom niet oplossen’ tegenkomt, kunt u deze oplossen door deze terminalopdrachten uit te voeren:

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

Ga vervolgens verder met de installatie van Sveltestrap of overweeg Yarn als alternatieve pakketbeheerder te gebruiken.

Verwijder de activa en de libr map en wis vervolgens de inhoud van het App.svelte bestand en de App.css bestand. Daarna kunt u de ontwikkelingsserver starten door het volgende uit te voeren:

npm run dev
# or
yarn dev

Sveltestrap gebruiken in uw project

Om Sveltestrap te gaan gebruiken, moet u een link naar het Bootstrap-stijlblad opnemen met behulp van een CDN-link. Dit kunt u doen binnen de hoofd element in uw HTML-lay-out of uit de slank: hoofd tag in uw Svelte-component.

Open de index.html bestand en voeg het volgende toe aan het hoofd element:

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

Als u wilt, kunt u de koppeling tag direct in de slank: hoofd speciaal element zoals dit:

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

Als alternatief kunt u gebruik maken van de @importeren regel in de stijl tag van een component zoals deze:

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

De knopcomponent in Sveltestrap

Het standaard Bootstrap-framework biedt een verscheidenheid aan klassenamen die u kunt gebruiken om knoppen vorm te geven. Deze klassenopties omvatten namen als 'primair', 'gevaar', 'info', 'link' en vele andere.

In Sveltestrap, elk Knop component beschikt handig over een kleurprop die aansluit bij de standaard stijlopties van Bootstrap. Dit helpt het aanpassingsproces te vereenvoudigen. Om een ​​component zoals een knop te importeren, voegt u het volgende toe aan any .slank componentbestand, zoals src/App.svelte: