sveltestrap

Bootstrap 5 Komponenten für Sufle 4+

SveltESTRAP ist eine Bibliothek, mit der die Integration von Bootstrap 5 -Komponenten in Ihre Svelte -Anwendungen vereinfacht wird. Es beseitigt die Notwendigkeit von Bootstrap -Komponentenklassen, die Einbeziehung von Bootstraps JavaScript und Vertrauen in JQuery.

Diese Open-Source-Software ist im Rahmen der zulässigen MIT-Lizenz frei verfügbar. Es lässt sich aus der ReactStrap -Bibliothek für React inspirieren.

Bitte beachten Sie, dass Sveltestrap den Bootstrap -Stil nicht direkt einbettet . Um Bootstrap -Themen effektiv zu verwenden, müssen Sie Bootstrap 5 CSS unter Verwendung einer der unten beschriebenen Methoden einbeziehen.

Beachten Sie , dass Sie das ursprüngliche Sveltestrap -Paket verwenden können.

Treten Sie der Community bei

---

Installieren

 # npm
> npm install svelte @sveltestrap/sveltestrap

# pnpm
> pnpm install svelte @sveltestrap/sveltestrap

# yarn
> yarn add svelte @sveltestrap/sveltestrap

Bootstrap CSS

Es ist wichtig zu beachten, dass Bootstrap -5 -Komponenten nicht mit vorgenannten Bootstrap -Stilen geliefert werden, sodass Sie das Stylesheet manuell hinzufügen müssen. So können Sie sie hinzufügen:

1. Fügen Sie Ihrer Apps static index.html -Datei hinzu

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

2. Hinzufügen zu Ihrer Haupt App.svelte -Datei

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

3. Importieren Sie die Stile direkt in Ihrem CSS -Bundle

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

4. Verwenden Sie die bereitgestellte Stilkomponente

 < script >
  import { Styles } from '@sveltestrap/sveltestrap' ;
</ script >

< Styles />

Verwenden Sie dann Sveltestrap -Komponenten in Ihrer Svelt -Komponente:

 < script >
  import { Button , Col , Row } from '@sveltestrap/sveltestrap' ;
</ script >

< Row >
  < Col >
    < Button color =" primary " outline > Hello World! </ Button >
  </ Col >
</ Row > 

Bootstrap -Symbole

Wenn Sie die Symbolkomponente verwenden möchten, müssen Sie auch einen Link zum Bootstrap -Symbol CSS beispielsweise angeben, z. B.:

Geben Sie es in die App.svelte Ihrer App ein.

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

Oder Sie können es in index.html Ihrer App einbeziehen.

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

oder die Styleskomponente enthält standardmäßig das Bootstrap -Symbol CSS:

 < script >
  import { Styles } from '@sveltestrap/sveltestrap' ;
</ script >

< Styles /> 

Sponsoren

Betreuer

Mitwirkende