Skrášlite svoje projekty Svelte pomocou populárnej knižnice CSS Bootstrap.

Svelte je vynikajúcou voľbou na vytváranie používateľských rozhraní a zatiaľ čo písanie vlastných štýlov môže stačiť pre malé projekty, knižnica komponentov je často lepšia pre veľké projekty.

Takéto knižnice ponúkajú výhody ako konzistentné používateľské rozhranie, zlepšenú dostupnosť a flexibilné možnosti prispôsobenia. Zistite, ako môžete pracovať s knižnicou komponentov SvelteStrap, aby ste zefektívnili svoj vývoj.

Čo sú Svelte a Bootstrap?

Svelte je rámec JavaScriptu, ktorý sa líši od konvenčného prístupu rámcov ako React. Namiesto spúšťania väčšiny operácií za behu Svelte kompiluje vašu aplikáciu do JavaScriptu počas procesu zostavovania.

Tento jedinečný prístup eliminuje potrebu virtuálneho Model objektu dokumentu (DOM) a výrazne znižuje štandardný kód.

Bootstrap je rámec CSS, vytvorený Twitterom (teraz pod značkou X), ktorý bol priekopníkom filozofie dizajnu „mobile first“. Ponúka množstvo vopred navrhnutých komponentov.

instagram viewer

Inštalácia Sveltestrap vo vašom projekte

Predtým, ako budete môcť nainštalovať Sveltestrap do svojho projektu, musíte sa uistiť, že váš projekt Svelte je správne nastavený. Uistite sa, že máte Node.js a Správca balíkov uzlov (NPM) alebo Priadza beží na vašom stroji. Pomocou tohto príkazu môžete vytvoriť nový projekt Svelte:

npm create vite
# or
yarn create vite

Pomenujte svoj projekt Svelte a keď sa zobrazí výzva na výber rámca a variantu, vyberte možnosť Svelte a JavaScript. Potom, čo to urobíte, cd do adresára projektu a spustite:

npm install
# or
yarn

Tento príkaz nainštaluje potrebné závislosti pre typický projekt Svelte.

Keď je váš projekt Svelte pripravený, môžete teraz nainštalovať knižnicu Sveltestra spustením:

npm i sveltestrap
# or
yarn add sveltestrap

Ak počas inštalácie Sveltestrap narazíte na chybu „nemožno vyriešiť strom závislostí“, vyriešte ju spustením týchto príkazov terminálu:

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

Potom pokračujte v inštalácii Sveltestrap alebo zvážte použitie Yarn ako alternatívneho správcu balíkov.

Odstrániť aktíva a lib a potom vymažte obsah priečinka App.svelte súbor a App.css súbor. Potom môžete spustiť vývojový server spustením:

npm run dev
# or
yarn dev

Používanie Sveltestrapu vo vašom projekte

Ak chcete začať používať Sveltestrap, musíte zahrnúť odkaz na šablónu so štýlmi Bootstrap pomocou odkazu CDN. Môžete to urobiť vo vnútri hlavu prvok vo vašom rozložení HTML alebo z štíhly: hlava tag vo vašom komponente Svelte.

Otvor index.html a do súboru pridajte nasledovné hlavu element:

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

Ak chcete, môžete importovať alebo pridať odkaz tag priamo v štíhly: hlava špeciálny prvok, ako je tento:

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

Prípadne môžete použiť @import vládnuť v štýl tag akéhokoľvek komponentu, ako je tento:

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

Button Component v Sveltestrap

Štandardný rámec Bootstrap poskytuje množstvo názvov tried, ktoré môžete použiť na štýlovanie tlačidiel. Tieto možnosti triedy zahŕňajú názvy ako „primárne“, „nebezpečenstvo“, „informácie“, „odkaz“ a mnohé ďalšie.

V Sveltestrape každý Tlačidlo komponent pohodlne obsahuje farebnú podperu, ktorá je v súlade s predvolenými možnosťami štýlu Bootstrapu. Pomáha to zjednodušiť proces prispôsobenia. Ak chcete importovať komponent, ako je tlačidlo, pridajte do ľubovoľného prvku nasledovné .štíhly komponentný súbor, napr src/App.svelte: