sveltestrap

Bootstrap 5 composants pour svelte 4+

SvelTestrap est une bibliothèque conçue pour simplifier l'intégration des composants Bootstrap 5 dans vos applications Svelte. Il élimine le besoin de classes de composants bootstrap, l'inclusion du javascript de bootstrap et la dépendance à JQuery.

Ce logiciel open source est disponible gratuitement sous la licence MIT permissive. Il s'inspire de la bibliothèque Reactsstrap pour React.

Veuillez noter que SvelTetrap n'incorpore pas directement le style bootstrap . Pour utiliser efficacement les thèmes bootstrap, vous devez inclure Bootstrap 5 CSS en utilisant l'une des méthodes décrites ci-dessous.

Remarque Si vous recherchez la prise en charge de Svelte 3.x, vous pouvez utiliser le package SvelTetrap d'origine.

Rejoignez la communauté

---

Installer

 # npm
> npm install svelte @sveltestrap/sveltestrap

# pnpm
> pnpm install svelte @sveltestrap/sveltestrap

# yarn
> yarn add svelte @sveltestrap/sveltestrap

Bootstrap CSS

Il est essentiel de noter que les composants Bootstrap 5 ne sont pas livrés avec les styles bootstrap préchargés, vous devrez donc ajouter la feuille de style manuellement. Voici comment vous pouvez les ajouter:

1. Ajouter à vos applications static index.html fichier

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

2. Ajouter à votre fichier App.svelte principal

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

3. Importez les styles directement dans votre bundle CSS

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

4. Utilisez le composant des styles fournis

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

< Styles />

Utilisez ensuite les composants SvelTestrap dans votre composant Svelte:

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

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

Icônes bootstrap

Si vous souhaitez utiliser le composant icône, vous devez également inclure un lien vers Bootstrap Icon CSS, par exemple:

Incluez-le dans l'application de votre App.svelte :

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

ou vous pouvez l'inclure dans index.html de votre application:

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

ou le composant Styles comprend l'icône Bootstrap CSS par défaut:

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

< Styles /> 

Sponsors

Maintient

Contributeurs