Zkrášlete své projekty Svelte pomocí oblíbené knihovny CSS Bootstrap.

Svelte je vynikající volbou pro vytváření uživatelských rozhraní a zatímco psaní vlastních stylů může stačit pro malé projekty, knihovna komponent je často lepší pro velké projekty.

Takové knihovny nabízejí výhody, jako je konzistentní uživatelské rozhraní, zlepšená dostupnost a flexibilní možnosti přizpůsobení. Zjistěte, jak můžete pracovat s knihovnou komponent SvelteStrap, abyste zefektivnili svůj vývoj.

Co jsou Svelte a Bootstrap?

Svelte je JavaScript framework, který se liší od konvenčního přístupu používaného frameworky jako React. Namísto spouštění většiny operací za běhu Svelte zkompiluje vaši aplikaci do JavaScriptu během procesu sestavování.

Tento jedinečný přístup eliminuje potřebu virtuálního Objektový model dokumentu (DOM) a výrazně snižuje standardní kód.

Bootstrap je framework CSS, vytvořený Twitterem (nyní pod značkou X), který byl průkopníkem filozofie designu „mobile first“. Nabízí velké množství předem navržených komponentů.

Instalace Sveltestrap ve vašem projektu

Než budete moci nainstalovat Sveltestrap do svého projektu, musíte se ujistit, že je váš projekt Svelte správně nastaven. Ujistěte se, že máte Node.js a Správce balíčků uzlů (NPM) nebo Příze běžící na vašem stroji. Pomocí tohoto příkazu můžete vytvořit lešení nového projektu Svelte:

npm create vite
# or
yarn create vite

Pojmenujte svůj projekt Svelte a po zobrazení výzvy k výběru rámce a varianty vyberte Svelte a JavaScript. Poté, co to uděláte, CD do adresáře projektu a spusťte:

npm install
# or
yarn

Tento příkaz nainstaluje potřebné závislosti pro typický projekt Svelte.

Když je váš projekt Svelte připraven, můžete nyní nainstalovat knihovnu Sveltestra spuštěním:

npm i sveltestrap
# or
yarn add sveltestrap

Pokud během instalace Sveltestrap narazíte na chybu „nelze vyřešit strom závislostí“, vyřešte ji spuštěním těchto příkazů terminálu:

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

Poté pokračujte v instalaci Sveltestrap nebo zvažte použití Yarn jako alternativního správce balíčků.

Smazat aktiva a lib a poté vymažte obsah složky App.svelte soubor a App.css soubor. Poté můžete spustit vývojový server spuštěním:

npm run dev
# or
yarn dev

Použití Sveltestrapu ve vašem projektu

Chcete-li začít používat Sveltestrap, musíte zahrnout odkaz na šablonu stylů Bootstrap pomocí odkazu CDN. Můžete to udělat uvnitř hlava prvek v rozvržení HTML nebo z štíhlý: hlava tag ve vaší komponentě Svelte.

Otevři index.html a přidejte do hlava živel:

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

Pokud chcete, můžete importovat nebo přidat odkaz tag přímo v štíhlý: hlava speciální prvek, jako je tento:

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

Případně můžete použít @import vládnout v styl značka jakékoli komponenty, jako je tato:

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

Komponenta tlačítka ve Sveltestrapu

Standardní rámec Bootstrap poskytuje řadu názvů tříd, které můžete použít ke stylování tlačítek. Tyto možnosti třídy zahrnují názvy jako „primární“, „nebezpečí“, „informace“, „odkaz“ a mnoho dalších.

Ve Sveltestrapu každý Knoflík komponenta pohodlně obsahuje barevnou podpěru, která se zarovná s výchozími možnostmi stylů Bootstrapu. To pomáhá zjednodušit proces přizpůsobení. Chcete-li importovat komponentu, jako je tlačítko, přidejte do libovolného následující .štíhlý komponentní soubor, např src/App.svelte: