sveltestrap

Bootstrap 5 Componentes para Sove 4+

O SvelteStrap é uma biblioteca projetada para simplificar a integração de componentes de bootstrap 5 em seus aplicativos esbeltos. Ele elimina a necessidade de classes de componentes de bootstrap, a inclusão do JavaScript da Bootstrap e a dependência do jQuery.

Este software de código aberto está disponível gratuitamente sob a licença permissiva do MIT. Ele se inspira na biblioteca ReactStrap for React.

Observe que o Sveltestrap não incorpora o estilo de bootstrap diretamente . Para usar os temas de bootstrap de maneira eficaz, você deve incluir o Bootstrap 5 CSS usando um dos métodos descritos abaixo.

Nota Se você estiver procurando por suporte esbelto 3.x, poderá usar o pacote SVELTESTRAP original.

Junte -se à comunidade

---

Instalar

 # npm
> npm install svelte @sveltestrap/sveltestrap

# pnpm
> pnpm install svelte @sveltestrap/sveltestrap

# yarn
> yarn add svelte @sveltestrap/sveltestrap

Bootstrap CSS

É essencial observar que os componentes do Bootstrap 5 não vêm com estilos de bootstrap pré -carregados, então você precisará adicionar a folha de estilo manualmente. Veja como você pode adicioná -los:

1. Adicione aos seus aplicativos o arquivo estático index.html

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

2. Adicione ao seu arquivo principal App.svelte

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

3. Importe os estilos diretamente em seu pacote CSS

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

4. Use o componente estilos fornecido

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

< Styles />

Em seguida, use componentes sveltestrap em seu componente esbelto:

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

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

Ícones de bootstrap

Se você deseja usar o componente do ícone, também deve incluir um link para o Icon CSS do Bootstrap, por exemplo:

Inclua -o no aplicativo do App.svelte :

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

Ou você pode incluí -lo no index.html do seu aplicativo:

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

Ou o componente Styles inclui o ícone de bootstrap CSS por padrão:

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

< Styles /> 

Patrocinadores

Mantenedores

Colaboradores