Embellezca sus proyectos Svelte con la popular biblioteca CSS Bootstrap.

Svelte es una excelente opción para crear interfaces de usuario y, aunque escribir estilos personalizados puede ser suficiente para proyectos pequeños, una biblioteca de componentes suele ser mejor para proyectos a gran escala.

Estas bibliotecas ofrecen ventajas como una interfaz de usuario consistente, accesibilidad mejorada y opciones de personalización flexibles. Descubra cómo puede trabajar con la biblioteca de componentes SvelteStrap para optimizar su desarrollo.

¿Qué son Svelte y Bootstrap?

Svelte es un marco de JavaScript que difiere del enfoque convencional adoptado por marcos como React. En lugar de ejecutar la mayoría de sus operaciones en tiempo de ejecución, Svelte compila su aplicación en JavaScript durante el proceso de compilación.

Este enfoque único elimina la necesidad de un virtual Modelo de objetos de documento (DOM) y reduce significativamente el código repetitivo.

Bootstrap es un marco CSS, creado por Twitter (ahora con la marca X), que fue pionero en la filosofía de diseño de "primero el móvil". Ofrece una gran cantidad de componentes prediseñados.

instagram viewer

Instalación de Sveltestrap en su proyecto

Antes de poder instalar Sveltestrap en su proyecto, debe asegurarse de que su proyecto Svelte esté configurado correctamente. Asegúrate de tener Node.js y Administrador de paquetes de nodos (NPM) o Yarn ejecutándose en su máquina. Puedes crear un nuevo proyecto Svelte con este comando:

npm create vite
# or
yarn create vite

Asigne un nombre a su proyecto Svelte y cuando se le solicite elegir un marco y una variante, seleccione Svelte y JavaScript respectivamente. Después de hacer eso, cd en el directorio del proyecto y ejecute:

npm install
# or
yarn

Este comando instalará las dependencias necesarias para un proyecto típico de Svelte.

Con su proyecto Svelte listo, ahora puede instalar la biblioteca Sveltestrap ejecutando:

npm i sveltestrap
# or
yarn add sveltestrap

Si encuentra un error de "no se puede resolver el árbol de dependencias" durante la instalación de Sveltestrap, resuélvalo ejecutando estos comandos de terminal:

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

Luego, continúe con la instalación de Sveltestrap o considere usar Yarn como administrador de paquetes alternativo.

Borrar el activos y el biblioteca carpeta, luego borre el contenido de la Aplicación.esbelta archivo y el aplicación.css archivo. Luego, puede iniciar el servidor de desarrollo ejecutando:

npm run dev
# or
yarn dev

Usando Sveltestrap en su proyecto

Para comenzar a usar Sveltestrap, debe incluir un enlace a la hoja de estilo Bootstrap mediante un enlace CDN. Puedes hacer esto dentro del cabeza elemento en su diseño HTML o desde el esbelto: cabeza etiqueta en su componente Svelte.

Abre el índice.html archivo y agregue lo siguiente al cabeza elemento:

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

Si lo prefieres, puedes importar o agregar el enlace etiqueta directamente en el esbelto: cabeza 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, puede utilizar el @importar regla en el estilo etiqueta de cualquier componente como este:

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

El componente de botón en Sveltestrap

El marco estándar de Bootstrap proporciona una variedad de nombres de clases que puede usar para diseñar botones. Estas opciones de clase incluyen nombres como "primario", "peligro", "información", "enlace" y muchos otros.

En Sveltestrap, cada Botón El componente presenta convenientemente un accesorio de color que se alinea con las opciones de estilo predeterminadas de Bootstrap. Esto ayuda a simplificar el proceso de personalización. Para importar un componente como un botón, agregue lo siguiente en cualquier .esbelto archivo de componente, como src/App.svelte: