sveltestrap

Bootstrap 5 componentes para svelte 4+

SvelTestrap es una biblioteca diseñada para simplificar la integración de los componentes Bootstrap 5 en sus aplicaciones SVELTE. Elimina la necesidad de clases de componentes Bootstrap, la inclusión del JavaScript de Bootstrap y la dependencia de JQuery.

Este software de código abierto está disponible gratuitamente bajo la licencia MIT permisiva. Se inspira en la biblioteca ReactStrap para React.

Tenga en cuenta que SvelTestrap no incrusta directamente el estilo de bote . Para usar temas de arranque de manera efectiva, debe incluir Bootstrap 5 CSS utilizando uno de los métodos descritos a continuación.

Tenga en cuenta que si busca soporte SVelte 3.x, puede usar el paquete original de SvelTestrap.

Únete a la comunidad

---

Instalar

 # npm
> npm install svelte @sveltestrap/sveltestrap

# pnpm
> pnpm install svelte @sveltestrap/sveltestrap

# yarn
> yarn add svelte @sveltestrap/sveltestrap

Bootstrap CSS

Es esencial tener en cuenta que los componentes de Bootstrap 5 no vienen con estilos de arranque precargados, por lo que deberá agregar la hoja de estilo manualmente. Así es como puedes agregarlos:

1. Agregue a sus aplicaciones static index.html archivo

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

2. Agregue a su archivo principal App.svelte

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

3. Importar los estilos directamente en su paquete CSS

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

4. Utilice el componente de estilos proporcionados

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

< Styles />

Luego use los componentes de SvelTestrap en su componente Svelte:

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

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

Íconos de arranque

Si desea utilizar el componente iconal, también debe incluir un enlace a Bootstrap Icon CSS, por ejemplo:

Incluirlo en App.svelte de su aplicación.

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

o puede incluirlo en index.html de su aplicación:

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

o el componente de estilos incluye el icono Bootstrap CSS de forma predeterminada:

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

< Styles /> 

Patrocinadores

Mantenedores

Colaboradores