Pagražinkite savo Svelte projektus naudodami populiarią Bootstrap CSS biblioteką.

„Svelte“ yra puikus pasirinkimas kuriant vartotojo sąsajas ir nors mažiems projektams gali pakakti parašyti pasirinktinius stilius, komponentų biblioteka dažnai yra geresnė didelės apimties projektams.

Tokios bibliotekos turi privalumų, pvz., nuoseklią vartotojo sąsają, patobulintą prieinamumą ir lanksčias tinkinimo parinktis. Sužinokite, kaip galite dirbti su SvelteStrap komponentų biblioteka, kad supaprastintumėte savo kūrimą.

Kas yra Svelte ir Bootstrap?

„Svelte“ yra „JavaScript“ sistema, kuri skiriasi nuo įprasto požiūrio, kurio laikosi tokios sistemos kaip „React“. Užuot paleidusi daugumą operacijų vykdymo metu, „Svelte“ kūrimo proceso metu sukompiliuoja jūsų programą į „JavaScript“.

Šis unikalus požiūris pašalina virtualaus poreikį Dokumento objekto modelis (DOM) ir žymiai sumažina pagrindinį kodą.

Bootstrap yra CSS sistemasukurtas „Twitter“ (dabar prekės ženklas X), kuris buvo „pirmiausia mobiliesiems“ dizaino filosofijos pradininkas. Ji siūlo daugybę iš anksto suprojektuotų komponentų.

instagram viewer

„Sveltestrap“ diegimas jūsų projekte

Prieš įdiegdami „Sveltestrap“ savo projekte, turite įsitikinti, kad „Svelte“ projektas yra tinkamai nustatytas. Įsitikinkite, kad turite Node.js ir Mazgo paketų tvarkyklė (NPM) arba Verpalai bėga jūsų mašinoje. Galite sukurti naują Svelte projektą naudodami šią komandą:

npm create vite
# or
yarn create vite

Pavadinkite savo Svelte projektą ir, kai būsite paraginti pasirinkti sistemą ir variantą, pasirinkite atitinkamai Svelte ir JavaScript. Tai padarius, cd į projekto katalogą ir paleiskite:

npm install
# or
yarn

Ši komanda įdiegs reikiamas priklausomybes įprastam Svelte projektui.

Kai jūsų Svelte projektas yra paruoštas, dabar galite įdiegti Sveltestrap biblioteką paleisdami:

npm i sveltestrap
# or
yarn add sveltestrap

Jei „Sveltestrap“ diegimo metu atsiranda klaida „nepavyko išspręsti priklausomybės medžio“, išspręskite ją vykdydami šias terminalo komandas:

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

Tada tęskite „Sveltestrap“ diegimą arba apsvarstykite galimybę naudoti „Yarn“ kaip alternatyvų paketų tvarkyklę.

Ištrinkite turto ir lib aplanką, tada išvalykite turinį App.svelte failas ir App.css failą. Po to galite paleisti kūrimo serverį paleisdami:

npm run dev
# or
yarn dev

„Sveltestrap“ naudojimas savo projekte

Norėdami pradėti naudoti „Sveltestrap“, turite įtraukti nuorodą į „Bootstrap“ stiliaus lapą naudodami CDN nuorodą. Tai galite padaryti viduje galva elementą savo HTML makete arba iš lieknas: galva „Svelte“ komponente.

Atidaryk index.html failą ir prie jo pridėkite toliau pateiktą informaciją galva elementas:

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

Jei norite, galite importuoti arba pridėti nuoroda žyma tiesiai į lieknas: galva specialus elementas kaip šis:

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

Arba galite naudoti @importuoti taisyklė stilius bet kurio komponento žyma, pavyzdžiui:

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

Mygtuko komponentas „Sveltestrap“.

Standartinėje „Bootstrap“ sistemoje yra įvairių klasių pavadinimų, kuriuos galite naudoti formuodami mygtukus. Šios klasės parinktys apima tokius pavadinimus kaip „pirminis“, „pavojus“, „informacija“, „nuoroda“ ir daugelis kitų.

Sveltestrap programoje kiekvienas Mygtukas komponentas patogiai turi spalvų atramą, suderinamą su numatytosiomis „Bootstrap“ stiliaus parinktimis. Tai padeda supaprastinti tinkinimo procesą. Norėdami importuoti komponentą, pvz., mygtuką, pridėkite toliau nurodytus elementus .švelnus komponento failas, pvz src/App.svelte: