Upiększ swoje projekty Svelte za pomocą popularnej biblioteki CSS Bootstrap.

Svelte to doskonały wybór do tworzenia interfejsów użytkownika i chociaż pisanie niestandardowych stylów może wystarczyć w przypadku małych projektów, biblioteka komponentów jest często lepsza w przypadku projektów na dużą skalę.

Takie biblioteki oferują zalety, takie jak spójny interfejs użytkownika, poprawiona dostępność i elastyczne opcje dostosowywania. Dowiedz się, jak możesz pracować z biblioteką komponentów SvelteStrap, aby usprawnić swój rozwój.

Czym są Svelte i Bootstrap?

Svelte to framework JavaScript, który odbiega od konwencjonalnego podejścia stosowanego przez frameworki takie jak React. Zamiast wykonywać większość swoich operacji w czasie wykonywania, Svelte kompiluje aplikację do JavaScript podczas procesu kompilacji.

To unikalne podejście eliminuje potrzebę wirtualnego Model obiektowy dokumentu (DOM) i znacznie zmniejsza standardowy kod.

Bootstrap to framework CSS, stworzony przez Twittera (obecnie pod marką X), który był pionierem filozofii projektowania „najpierw urządzenia mobilne”. Oferuje bogactwo wstępnie zaprojektowanych komponentów.

instagram viewer

Instalowanie Sveltestrap w Twoim projekcie

Zanim będziesz mógł zainstalować Sveltestrap w swoim projekcie, musisz upewnić się, że projekt Svelte jest poprawnie skonfigurowany. Upewnij się, że masz Node.js i Menedżer pakietów węzłów (NPM) lub Przędza działająca na Twojej maszynie. Za pomocą tego polecenia możesz zbudować nowy projekt Svelte:

npm create vite
# or
yarn create vite

Nazwij swój projekt Svelte i po wyświetleniu monitu o wybranie frameworka i wariantu wybierz odpowiednio Svelte i JavaScript. Po zrobieniu tego, płyta CD do katalogu projektu i uruchom:

npm install
# or
yarn

To polecenie zainstaluje niezbędne zależności dla typowego projektu Svelte.

Gdy projekt Svelte jest gotowy, możesz teraz zainstalować bibliotekę Sveltestrap, uruchamiając:

npm i sveltestrap
# or
yarn add sveltestrap

Jeśli podczas instalacji Sveltestrap napotkasz błąd „nie można rozwiązać drzewa zależności”, rozwiąż go, uruchamiając następujące polecenia terminala:

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

Następnie kontynuuj instalację Sveltestrap lub rozważ użycie Yarn jako alternatywnego menedżera pakietów.

Usuń aktywa i biblioteka folderze, a następnie wyczyść zawartość pliku Aplikacja smukła plik i Aplikacja.css plik. Następnie możesz uruchomić serwer programistyczny, uruchamiając:

npm run dev
# or
yarn dev

Używanie Sveltestrap w Twoim projekcie

Aby rozpocząć korzystanie z Sveltestrap, musisz załączyć link do arkusza stylów Bootstrap za pomocą łącza CDN. Możesz to zrobić wewnątrz głowa element w układzie HTML lub z pliku smukły: głowa tag w komponencie Svelte.

Otworzyć indeks.html plik i dodaj następujące elementy do pliku głowa element:

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

Jeśli wolisz, możesz zaimportować lub dodać plik połączyć oznaczyć bezpośrednio w smukły: głowa specjalny element, taki jak ten:

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

Alternatywnie możesz skorzystać z @import rządzić w styl znacznik dowolnego komponentu, takiego jak ten:

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

Komponent przycisku w Sveltestrap

Standardowy framework Bootstrap udostępnia różnorodne nazwy klas, których można używać do stylizowania przycisków. Te opcje klas obejmują nazwy takie jak „podstawowy”, „niebezpieczeństwo”, „informacje”, „link” i wiele innych.

W Sveltestrap każdy Przycisk Komponent posiada wygodny element kolorystyczny, który dopasowuje się do domyślnych opcji stylizacji Bootstrap. Pomaga to uprościć proces dostosowywania. Aby zaimportować komponent taki jak przycisk, dodaj następujący element w any .smukły plik komponentowy, np src/App.svelte: