Embeleze seus projetos Svelte com a popular biblioteca Bootstrap CSS.

Svelte é uma excelente escolha para construir interfaces de usuário e, embora escrever estilos personalizados possa ser suficiente para projetos pequenos, uma biblioteca de componentes geralmente é melhor para projetos de grande escala.

Essas bibliotecas oferecem vantagens como interface de usuário consistente, acessibilidade aprimorada e opções flexíveis de personalização. Aprenda como você pode trabalhar com a biblioteca de componentes SvelteStrap para agilizar seu desenvolvimento.

O que são Svelte e Bootstrap?

Svelte é um framework JavaScript, que diverge da abordagem convencional adotada por frameworks como React. Em vez de executar a maioria de suas operações em tempo de execução, o Svelte compila seu aplicativo em JavaScript durante o processo de construção.

Esta abordagem única elimina a necessidade de um ambiente virtual Modelo de objeto de documento (DOM) e reduz significativamente o código padrão.

Bootstrap é uma estrutura CSS

instagram viewer
, criado pelo Twitter (agora com a marca X), que foi pioneiro na filosofia de design “mobile-first”. Ele oferece uma variedade de componentes pré-projetados.

Instalando o Sveltestrap em seu projeto

Antes de instalar o Sveltestrap em seu projeto, você precisa ter certeza de que seu projeto Svelte está configurado corretamente. Certifique-se de ter Node.js e Gerenciador de Pacotes de Nó (NPM) ou Fio em execução em sua máquina. Você pode criar um novo projeto Svelte com este comando:

npm create vite
# or
yarn create vite

Nomeie seu projeto Svelte e quando solicitado a escolher uma estrutura e uma variante, selecione Svelte e JavaScript respectivamente. Depois de fazer isso, cd no diretório do projeto e execute:

npm install
# or
yarn

Este comando instalará as dependências necessárias para um projeto Svelte típico.

Com seu projeto Svelte pronto, agora você pode instalar a biblioteca Sveltestrap executando:

npm i sveltestrap
# or
yarn add sveltestrap

Se você encontrar um erro “incapaz de resolver a árvore de dependências” durante a instalação do Sveltestrap, resolva-o executando estes comandos de terminal:

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

Em seguida, prossiga com a instalação do Sveltestrap ou considere usar o Yarn como um gerenciador de pacotes alternativo.

Exclua o ativos e a biblioteca pasta e limpe o conteúdo da App.svelte arquivo e o Aplicativo.css arquivo. Depois, você pode iniciar o servidor de desenvolvimento executando:

npm run dev
# or
yarn dev

Usando Sveltestrap em seu projeto

Para começar a usar o Sveltestrap, você precisa incluir um link para a folha de estilos do Bootstrap usando um link CDN. Você pode fazer isso dentro do cabeça elemento em seu layout HTML ou do esbelto: cabeça tag em seu componente Svelte.

Abra o index.html arquivo e adicione o seguinte ao cabeça elemento:

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

Se preferir, você pode importar ou adicionar o link marque diretamente no esbelto: cabeça elemento especial como este:

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

Alternativamente, você pode usar o @importar governar no estilo tag de qualquer componente como este:

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

O componente de botão no Sveltestrap

A estrutura padrão do Bootstrap fornece uma variedade de nomes de classes que você pode usar para estilizar botões. Essas opções de classe incluem nomes como “primário”, “perigo”, “informações”, “link” e muitos outros.

No Sveltestrap, cada Botão O componente apresenta convenientemente um suporte de cor que se alinha às opções de estilo padrão do Bootstrap. Isso ajuda a simplificar o processo de personalização. Para importar um componente como um botão, adicione o seguinte em qualquer .svelte arquivo de componente, como src/App.svelte: