Szépítse Svelte projektjeit a népszerű Bootstrap CSS-könyvtárral.

A Svelte kiváló választás felhasználói felületek készítéséhez, és bár az egyéni stílusok írása elegendő lehet kis projektekhez, a komponenskönyvtár gyakran jobb a nagy projektekhez.

Az ilyen könyvtárak olyan előnyöket kínálnak, mint a konzisztens felhasználói felület, a jobb hozzáférhetőség és a rugalmas testreszabási lehetőségek. Ismerje meg, hogyan dolgozhat a SvelteStrap komponenskönyvtárral a fejlesztés egyszerűsítése érdekében.

Mi az a Svelte és a Bootstrap?

A Svelte egy JavaScript keretrendszer, amely eltér az olyan keretrendszerek hagyományos megközelítésétől, mint a React. Ahelyett, hogy a legtöbb műveletet futási időben futtatná, a Svelte az építési folyamat során JavaScriptre fordítja az alkalmazást.

Ez az egyedülálló megközelítés szükségtelenné teszi a virtuális Dokumentumobjektum modell (DOM) és jelentősen csökkenti a kazánkódot.

A Bootstrap egy CSS keretrendszer, amelyet a Twitter (most X márkanévvel) hozott létre, amely úttörő szerepet játszott a „mobile-first” tervezési filozófiában. Rengeteg előre megtervezett alkatrészt kínál.

instagram viewer

A Sveltestrap telepítése a projektbe

Mielőtt telepítené a Sveltestrap projektet, meg kell győződnie arról, hogy a Svelte projekt megfelelően van beállítva. Győződjön meg arról, hogy rendelkezik Node.js és Node Package Manager (NPM) vagy Fonal fut a gépén. Ezzel a paranccsal új Svelte projektet állíthat fel:

npm create vite
# or
yarn create vite

Nevezze el Svelte projektjét, és amikor a rendszer felkéri, hogy válasszon keretrendszert és változatot, válassza ki a Svelte és a JavaScript elemet. Miután ezt megtette, CD be a projektkönyvtárba, és futtassa:

npm install
# or
yarn

Ez a parancs telepíti a szükséges függőségeket egy tipikus Svelte projekthez.

Miután a Svelte projekt készen áll, telepítheti a Sveltestrap könyvtárat a következő futtatásával:

npm i sveltestrap
# or
yarn add sveltestrap

Ha a Sveltestrap telepítése során „nem tudja feloldani a függőségi fa” hibát, oldja meg a következő terminálparancsok futtatásával:

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

Ezután folytassa a Sveltestrap telepítésével, vagy fontolja meg a Yarn használatát alternatív csomagkezelőként.

Törölje a eszközöket és a lib mappát, majd törölje a tartalmát App.svelte fájl és a App.css fájlt. Ezután elindíthatja a fejlesztői kiszolgálót a következő futtatásával:

npm run dev
# or
yarn dev

A Sveltestrap használata a projektben

A Sveltestrap használatának megkezdéséhez tartalmaznia kell egy hivatkozást a Bootstrap stíluslapra egy CDN hivatkozás segítségével. Ezt belül megteheti fej elemet a HTML-elrendezésben vagy a karcsú: fej címkét a Svelte komponensben.

Nyissa meg a index.html fájlt, és adja hozzá a következőket a fej elem:

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

Ha szeretné, importálhatja vagy hozzáadhatja a link címke közvetlenül a karcsú: fej ilyen speciális elem:

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

Alternatív megoldásként használhatja a @import szabály a stílus bármely komponens címkéje, mint ez:

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

A Sveltestrap gombkomponense

A szabványos Bootstrap keretrendszer számos osztálynevet kínál a gombok stílusozásához. Ezek az osztálybeállítások olyan neveket tartalmaznak, mint az „elsődleges”, „veszély”, „információ”, „hivatkozás” és még sok más.

A Sveltestrapban mindegyik Gomb komponens kényelmesen tartalmaz egy színprofilt, amely igazodik a Bootstrap alapértelmezett stílusbeállításaihoz. Ez segít leegyszerűsíteni a testreszabási folyamatot. Egy összetevő, például egy gomb importálásához adja hozzá a következőket bármelyikhez .karcsú komponens fájl, pl src/App.svelte: