Uljepšajte svoje Svelte projekte popularnom Bootstrap CSS bibliotekom.

Svelte je izvrstan izbor za izradu korisničkih sučelja i, dok pisanje prilagođenih stilova može biti dovoljno za male projekte, biblioteka komponenti često je bolja za velike projekte.

Takve biblioteke nude prednosti kao što su dosljedno korisničko sučelje, poboljšana pristupačnost i fleksibilne mogućnosti prilagodbe. Naučite kako možete raditi s bibliotekom komponenti SvelteStrap da biste pojednostavili svoj razvoj.

Što su Svelte i Bootstrap?

Svelte je JavaScript okvir koji se razlikuje od konvencionalnog pristupa koji koriste okviri poput Reacta. Umjesto pokretanja većine svojih operacija u vrijeme izvođenja, Svelte kompilira vašu aplikaciju u JavaScript tijekom procesa izgradnje.

Ovaj jedinstveni pristup eliminira potrebu za virtualnim Objektni model dokumenta (DOM) i značajno smanjuje standardni kod.

Bootstrap je CSS okvir, kreiran od strane Twittera (sada pod oznakom X), koji je uveo filozofiju dizajna "prvo mobilno". Nudi obilje unaprijed dizajniranih komponenti.

instagram viewer

Instaliranje Sveltestrapa u vaš projekt

Prije nego što možete instalirati Sveltestrap u svoj projekt, morate provjeriti je li vaš Svelte projekt pravilno postavljen. Provjerite imate li Node.js i Node Package Manager (NPM) ili Yarn koji radi na vašem stroju. Možete napraviti skelu za novi Svelte projekt pomoću ove naredbe:

npm create vite
# or
yarn create vite

Imenujte svoj Svelte projekt i kada se od vas zatraži da odaberete okvir i varijantu, odaberite Svelte odnosno JavaScript. Nakon što je to učinio, CD u direktorij projekta i pokrenite:

npm install
# or
yarn

Ova naredba će instalirati potrebne ovisnosti za tipičan Svelte projekt.

Kada je vaš Svelte projekt spreman, sada možete instalirati biblioteku Sveltestrap pokretanjem:

npm i sveltestrap
# or
yarn add sveltestrap

Ako tijekom instalacije Sveltestrapa naiđete na pogrešku "nemoguće razriješiti stablo ovisnosti", riješite je pokretanjem ovih terminalskih naredbi:

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

Zatim nastavite s instalacijom Sveltestrapa ili razmislite o korištenju Yarna kao alternativnog upravitelja paketima.

Izbriši imovina i lib mapu, zatim izbrišite sadržaj mape App.svelte datoteka i App.css datoteka. Nakon toga možete pokrenuti razvojni poslužitelj pokretanjem:

npm run dev
# or
yarn dev

Korištenje Sveltestrapa u vašem projektu

Da biste počeli koristiti Sveltestrap, morate uključiti poveznicu na Bootstrap style sheet koristeći CDN vezu. To možete učiniti unutar glava element u vašem HTML izgledu ili iz vitak: glava oznaku u vašoj Svelte komponenti.

Otvori index.html datoteku i dodajte sljedeće u glava element:

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

Ako želite, možete uvesti ili dodati veza oznaku izravno u vitak: glava poseban element poput ovog:

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

Alternativno, možete koristiti @uvoz pravilo u stil oznaka bilo koje komponente poput ove:

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

Komponenta gumba u Sveltestrapu

Standardni okvir Bootstrap pruža niz naziva klasa koje možete koristiti za stiliziranje gumba. Ove opcije klase uključuju nazive kao što su "primarno", "opasnost", "info", "link" i mnoga druga.

U Sveltestrapu svaki Dugme komponenta prikladno ima rekvizit u boji koji je usklađen sa Bootstrapovim zadanim opcijama stila. To pomaže pojednostaviti proces prilagodbe. Za uvoz komponente kao što je gumb, dodajte sljedeće u bilo koji .graciozan komponentna datoteka, npr src/App.svelte: