Erste Schritte mit Sveltestrap

Svelte ist eine ausgezeichnete Wahl für die Erstellung von Benutzeroberflächen und während das Schreiben benutzerdefinierter Stile für kleine Projekte ausreichen kann, ist eine Komponentenbibliothek für große Projekte oft besser.

Solche Bibliotheken bieten Vorteile wie eine konsistente Benutzeroberfläche, verbesserte Zugänglichkeit und flexible Anpassungsoptionen. Erfahren Sie, wie Sie mit der SvelteStrap-Komponentenbibliothek arbeiten können, um Ihre Entwicklung zu optimieren.

Was sind Svelte und Bootstrap?

Svelte ist ein JavaScript-Framework, das vom herkömmlichen Ansatz von Frameworks wie React abweicht. Anstatt die meisten Vorgänge zur Laufzeit auszuführen, kompiliert Svelte Ihre Anwendung während des Erstellungsprozesses in JavaScript.

Dieser einzigartige Ansatz macht eine virtuelle Sitzung überflüssig Dokumentobjektmodell (DOM) und reduziert den Boilerplate-Code erheblich.

Bootstrap ist ein CSS-Framework, erstellt von Twitter (jetzt unter der Marke X), das Pionierarbeit für die Designphilosophie „Mobile First“ leistete. Es bietet eine Fülle vorgefertigter Komponenten.

Installieren von Sveltestrap in Ihrem Projekt

Bevor Sie Sveltestrap in Ihrem Projekt installieren können, müssen Sie sicherstellen, dass Ihr Svelte-Projekt ordnungsgemäß eingerichtet ist. Stellen Sie sicher, dass Sie Node.js und haben Knotenpaketmanager (NPM) oder Garn läuft auf Ihrer Maschine. Mit diesem Befehl können Sie ein neues Svelte-Projekt erstellen:

npm create vite
# or
yarn create vite

Benennen Sie Ihr Svelte-Projekt. Wenn Sie aufgefordert werden, ein Framework und eine Variante auszuwählen, wählen Sie Svelte bzw. JavaScript aus. Nachdem Sie das getan haben, CD in das Projektverzeichnis und führen Sie Folgendes aus:

npm install
# or
yarn

Dieser Befehl installiert die notwendigen Abhängigkeiten für ein typisches Svelte-Projekt.

Wenn Ihr Svelte-Projekt fertig ist, können Sie jetzt die Sveltestrap-Bibliothek installieren, indem Sie Folgendes ausführen:

npm i sveltestrap
# or
yarn add sveltestrap

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

Löschen Sie die Vermögenswerte und das lib Ordner und löschen Sie dann den Inhalt des Ordners App.svelte Datei und die App.css Datei. Anschließend können Sie den Entwicklungsserver starten, indem Sie Folgendes ausführen:

npm run dev
# or
yarn dev

Verwendung von Sveltestrap in Ihrem Projekt

Um Sveltestrap verwenden zu können, müssen Sie über einen CDN-Link einen Link zum Bootstrap-Stylesheet einfügen. Sie können dies im Inneren tun Kopf Element in Ihrem HTML-Layout oder aus dem schlank: Kopf Tag in Ihrer Svelte-Komponente.

Öffne das index.html Datei und fügen Sie Folgendes hinzu Kopf Element:

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

Wenn Sie möchten, können Sie die importieren oder hinzufügen Verknüpfung Tag direkt im schlank: Kopf spezielles Element wie dieses:

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

Alternativ können Sie die verwenden @importieren Regel in der Stil Tag einer beliebigen Komponente wie dieser:

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

Die Button-Komponente in Sveltestrap

Das Standard-Bootstrap-Framework bietet eine Vielzahl von Klassennamen, die Sie zum Gestalten von Schaltflächen verwenden können. Zu diesen Klassenoptionen gehören Namen wie „primär“, „Gefahr“, „Info“, „Link“ und viele andere.

In Sveltestrap, jeweils Taste Die Komponente verfügt praktischerweise über eine Farbstütze, die mit den Standard-Styling-Optionen von Bootstrap übereinstimmt. Dies trägt dazu bei, den Anpassungsprozess zu vereinfachen. Um eine Komponente wie eine Schaltfläche zu importieren, fügen Sie Folgendes hinzu .schlank Komponentendatei, wie src/App.svelte: