Izdaiļojiet savus Svelte projektus ar populāro Bootstrap CSS bibliotēku.

Svelte ir lieliska izvēle lietotāja interfeisu veidošanai, un, lai gan maziem projektiem var pietikt ar pielāgotu stilu rakstīšanu, liela mēroga projektiem bieži vien ir labāka komponentu bibliotēka.

Šādas bibliotēkas piedāvā tādas priekšrocības kā konsekvents lietotāja interfeiss, uzlabota pieejamība un elastīgas pielāgošanas iespējas. Uzziniet, kā strādāt ar SvelteStrap komponentu bibliotēku, lai pilnveidotu savu izstrādi.

Kas ir Svelte un Bootstrap?

Svelte ir JavaScript ietvars, kas atšķiras no parastās pieejas, ko izmanto tādi ietvari kā React. Tā vietā, lai lielāko daļu savu darbību palaistu izpildlaikā, Svelte kompilē jūsu lietojumprogrammu JavaScript formātā veidošanas procesa laikā.

Šī unikālā pieeja novērš nepieciešamību pēc virtuāla Dokumenta objekta modelis (DOM) un ievērojami samazina standarta kodu.

Bootstrap ir CSS sistēma, ko izveidojis Twitter (tagad ar zīmolu X), kas bija dizaina filozofijas “mobilie vispirms” aizsācēji. Tas piedāvā daudz iepriekš izstrādātu komponentu.

instagram viewer

Sveltestrap instalēšana jūsu projektā

Lai savā projektā varētu instalēt Sveltestrap, jums ir jāpārliecinās, vai Svelte projekts ir pareizi iestatīts. Pārliecinieties, vai jums ir Node.js un Mezglu pakotņu pārvaldnieks (NPM) vai Dzija darbojas jūsu mašīnā. Jūs varat izveidot jaunu Svelte projektu ar šo komandu:

npm create vite
# or
yarn create vite

Nosauciet savu Svelte projektu un, kad tiek prasīts izvēlēties ietvaru un variantu, atlasiet attiecīgi Svelte un JavaScript. Pēc tā izdarīšanas, cd projekta direktorijā un palaidiet:

npm install
# or
yarn

Šī komanda instalēs nepieciešamās atkarības tipiskam Svelte projektam.

Kad Svelte projekts ir gatavs, tagad varat instalēt Sveltestrap bibliotēku, izpildot:

npm i sveltestrap
# or
yarn add sveltestrap

Ja Sveltestrap instalēšanas laikā rodas kļūda “nevar atrisināt atkarības koku”, atrisiniet to, izpildot šīs termināļa komandas:

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

Pēc tam turpiniet ar Sveltestrap instalēšanu vai apsveriet iespēju izmantot Yarn kā alternatīvu pakotņu pārvaldnieku.

Dzēst aktīviem un lib mapi, pēc tam notīriet tās saturu App.svelte failu un App.css failu. Pēc tam varat palaist izstrādes serveri, palaižot:

npm run dev
# or
yarn dev

Sveltestrap izmantošana jūsu projektā

Lai sāktu lietot Sveltestrap, jums ir jāiekļauj saite uz Bootstrap stila lapu, izmantojot CDN saiti. To var izdarīt iekšpusē galvu elementu savā HTML izkārtojumā vai no slaids: galva tagu savā Svelte komponentā.

Atveriet index.html failu un pievienojiet tālāk norādīto galvu elements:

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

Ja vēlaties, varat importēt vai pievienot saite tagu tieši mapē slaids: galva īpašs elements, piemēram, šis:

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

Alternatīvi varat izmantot @importēt noteikums stils jebkura komponenta tags, piemēram, šis:

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

Pogas komponents Sveltestrap

Standarta Bootstrap sistēma nodrošina dažādus klašu nosaukumus, ko varat izmantot, lai veidotu pogas. Šīs klases opcijas ietver tādus nosaukumus kā "primārā", "bīstamība", "informācija", "saite" un daudzi citi.

Sveltestrapā katrs Poga Komponentam ērti ir krāsu balsts, kas sakrīt ar Bootstrap noklusējuma stila opcijām. Tas palīdz vienkāršot pielāgošanas procesu. Lai importētu tādu komponentu kā pogu, pievienojiet tālāk norādīto .slaids komponenta fails, piemēram src/App.svelte: