Jak stylizować smukłe aplikacje
Frameworki internetowe przychodzą i odchodzą, ale jednym z najbardziej obiecujących jest Svelte. Svelte to świetna alternatywa dla React i chociaż ma już dużą społeczność, zdecydowanie jest to framework, na który należy uważać. Svelte ułatwia stylizowanie aplikacji, oferując kilka dostępnych podejść.
Stylizacja smukłych aplikacji
Svelte oferuje wiele metod stylizacji aplikacji, w tym importowanie plików CSS, używanie stylów wbudowanych i alternatywną składnię znaną jako „szczeliny”. Każde podejście ma różne zalety i wady, które programiści powinni dokładnie rozważyć przy wyborze tego, które najlepiej odpowiada ich potrzebom.
Konfigurowanie Twojego smukłego projektu
Aby pomyślnie zainstalować Svelte za pomocą narzędzia ViteJS do budowania front-endu, niezbędne jest preinstalowanie środowiska uruchomieniowego Node.js i Node Package Manager (NPM) w systemie. To ostatnie można potwierdzić poprzez proste sprawdzenie za pośrednictwem terminala, wykonując następujące polecenie:
node -v
Po upewnieniu się, że Node działa, uruchom sesję interfejsu wiersza poleceń i kolejno wykonaj kolejne polecenia:
npm create vite
Lub:
yarn create vite
Aby utworzyć nowy projekt oparty na Svelte przy użyciu Vite z określoną konfiguracją, wykonaj następujące kroki:1. Użyj polecenia vite init w swoim terminalu lub zintegrowanym środowisku programistycznym (IDE), aby wygenerować nowy projekt z podanymi specyfikacjami. Upewnij się, że projekt został utworzony w wybranym folderze.2. Zmień bieżący katalog roboczy na nowo wygenerowany folder projektu, wykonując polecenie cd, po którym następuje ścieżka do folderu zawierającego pliki projektu.3. Aby skonfigurować wymagane zależności dla projektu, wykonaj odpowiednie polecenia instalacyjne. W tym przypadku wymagałoby to zainstalowania pakietów, takich jak @sveltejs/kit , @sveltejs/vite i wszelkich innych wymaganych bibliotek lub frameworków potrzebnych do zbudowania aplikacji.
npm install
Lub:
yarn
Aby rozpocząć proces rozwoju, należy najpierw zainstalować wszystkie niezbędne zależności wymagane w projekcie. Aby zainicjować serwer programistyczny, po prostu wykonaj odpowiednie polecenie w terminalu lub w wierszu polecenia.
npm run dev
Lub:
yarn dev
Definiowanie znaczników projektu
Rzeczywiście, aby rozpocząć zadanie, uzyskaj dostęp do projektu za pomocą preferowanego interfejsu kodowania i usuń foldery „assets” i „lib”. Ponadto upewnij się, że zawartość pliku „app.css” i „App.svelte” jest wyczyszczona. Następnie otwórz plik „main.js” i wstaw następujący tekst:
import App from './App.svelte'
const app = new App({
target: document.getElementById('app'),
})
export default app
Rzeczywiście, przejdźmy teraz do uzyskania dostępu do głównej sekcji skryptu komponentu Svelte, przeglądając strukturę folderów projektu. Po dotarciu do pliku App.svelte zlokalizuj w nim element . Następnie możesz zdefiniować nową zmienną tablicową JavaScript o nazwie „links” przy użyciu nowoczesnej składni JavaScript. Ten zbiór elementów danych będzie przechowywać różne zasoby hiperłączy dla naszej aplikacji.
<script>
let imageLinks = [
"https://images.pexels.com/photos/1170986/pexels-photo-1170986.jpeg",
"https://images.pexels.com/photos/1754986/pexels-photo-1754986.jpeg",
"https://images.pexels.com/photos/3257811/pexels-photo-3257811.jpeg",
"https://images.pexels.com/photos/3643714/pexels-photo-3643714.jpeg",
"https://images.pexels.com/photos/755834/pexels-photo-755834.jpeg",
"https://images.pexels.com/photos/2928158/pexels-photo-2928158.jpeg",
];
</script>
W kontekście dokumentu HTML użyj tagu do zdefiniowania podstawowego elementu kontenera, który powinien być stylizowany jako główny komponent w swojej strukturze nadrzędnej. Ten scentralizowany kontener służy jako pojemnik do przechowywania różnych elementów wizualnych pochodzących z szeregu linków do obrazów zebranych pod nagłówkiem „imageLinks”. W trakcie tego procesu stosuj techniki iteracyjne do tworzenia pojedynczych wystąpień elementu HTML, dołączając je w razie potrzeby do otaczającej jednostki kontenera.
<main>
<h1>Cute Cat Gallery</h1>
<h3>See the cutest images of cats from the internet</h3>
<div class="container">
{#each imageLinks as url}
<div class="image-container">
<img src={url} />
</div>
{/each}
</div>
</main>
Po ustaleniu składni znaczników można przejść dalej i zastosować inauguracyjne podejście do stylizacji oprogramowania poprzez bezpośredni import CSS.
Stylizacja smukłych komponentów za pomocą bezpośredniego importu CSS
Włączenie komponentu Svelte często wiąże się z utworzeniem zewnętrznego pliku CSS i zaimportowaniem go bezpośrednio do sekcji skryptu komponentu. Aby to zrobić, można umieścić następującą instrukcję na najwyższej hierarchii w tagu script: javascriptimport { css } z „./app.css”;
import "./app.css";
Zmodyfikuj plik app.css, ustawiając właściwość display klasy „container” na „grid” i dostosowując dopełnienie klasy „image-container” na 10 pikseli. Wpłynie to na układ i odstępy między obrazami w ich kontenerze na karcie Styl.
.container {
display: grid;
grid-template-columns: 33.3% 33.3% 33.3%;
}
.image-container {
padding:10px;
}
Zmieniaj rozmiar elementów wizualnych, aby dostosować je do różnych rozmiarów ekranu i stosuj określone opcje projektowe, gdy użytkownik wchodzi w interakcję z wyświetlanymi obrazami, korzystając z technik zmiany rozmiaru i obsługi zdarzeń w CSS i JavaScript.
img {
max-width: 100%;
height: auto;
border-radius: 10px;
transition: 250ms;
}
img:hover {
scale: 1.03;
transition: 250ms;
}
Po wykonaniu kodu w środowisku przeglądarki internetowej należy zaobserwować następujący ekran:
Zalety bezpośredniego importu CSS
Ponowne wykorzystanie poprzez wykorzystanie obcego dokumentu do nakreślenia kaskadowych arkuszy stylów umożliwia bezproblemowe zastosowanie spójnych elementów wizualnych w różnych charakterystycznych elementach, co może być szczególnie korzystne, gdy dąży się do ustalenia jednolitości w ramach różnych elementów projektu.
Ponowne zdefiniowanie układu i wyglądu strony internetowej jest często osiągane poprzez zmianę warstwy prezentacji za pomocą zewnętrznego dokumentu CSS, zamiast dostosowywania podstawowej struktury treści. Izolując te dwa elementy, łatwiej jest wprowadzać zmiany w jednym bez wpływu na drugi, promując w ten sposób większą wszechstronność podczas dostosowywania cech wizualnych witryny.
Wady bezpośredniego importu CSS
Chociaż korzystanie z zewnętrznych plików CSS ma potencjał, może również powodować nieprzewidziane ingerencje i zastępowania, gdy style zewnętrzne pokrywają się ze sobą. Takie zdarzenia mogą powodować wydłużone procesy debugowania i naprawy. Aby wykluczyć niechciane starcia stylistyczne w aplikacjach Svelte, inkorporacja
Na proces ładowania strony wpływa konieczność pobrania dodatkowych zasobów poza podstawowym plikiem HTML, takich jak zewnętrzny plik CSS. Chociaż na pierwszy rzut oka to opóźnienie może wydawać się nieistotne, może kumulować się w wielu zewnętrznych arkuszach stylów, ostatecznie wpływając na ogólną wydajność.
Stylizacja przy użyciu smukłych znaczników stylu
Jedno alternatywne podejście do dostosowywania wyglądu komponentu Svelte polega na wykorzystaniu atrybutów stylu oferowanych przez sam Svelte, które są zgodne ze specyficzną składnią implementacji. Ta składnia przypomina następującą strukturę:
<script>
<!-- Your logic goes here -->
</script>
<!-- Markup goes here -->
<style>
<!-- styling goes here -->
</style>
Główną zaletą tego podejścia jest jego charakter oparty na zakresie, w którym style każdego komponentu są od siebie odizolowane, co zapobiega interferencji między różnymi komponentami. Należy zauważyć, że style wbudowane w Svelte mają pierwszeństwo przed zewnętrznymi stylami CSS zastosowanymi do tego samego elementu. Można to zaobserwować, dodając następujący fragment kodu na końcu pliku App.svelte:
<style>
h1 {
background-color: red;
}
</style>
Dołącz dostarczony fragment kodu na końcu pliku App.css do celów stylizacyjnych.
h1 {
background-color: yellow;
}
Rzeczywiście, gdy kod jest wykonywany w przeglądarce internetowej, można zauważyć, że właściwości prezentacyjne elementu # zostały zmienione w celu włączenia szkarłatnego odcienia, zastępując cytrynowy odcień poprzednio określony w App.css plik.
Stylizacja za pomocą preprocesorów CSS
Powszechnie stosowana technika projektowania komponentów Svelte obejmuje włączenie preprocesora CSS do atrybutu style. Takie preprocesory oferują wiele korzyści, takich jak ułatwienie wykorzystania złożonych operacji, takich jak zaawansowane funkcje, domieszki i umożliwienie zagnieżdżania stylów, innowacja, która została niedawno wprowadzona do standardowych praktyk CSS.
Wybierając preprocesor do stylizacji swojej strony internetowej, istnieje szereg dostępnych opcji, w tym między innymi LessCSS, Sass i Stylus. Aby skorzystać z preferowanego preprocesora, należy go zainstalować jako zależność programistyczną za pomocą polecenia „npm install [preprocessor] –save-dev”.
npm install -D <css-preprocessor>
Lub:
yarn add -D <css-preprocessor>
Aby wykorzystać określony preprocesor w swoim projekcie, upewnij się, że w następnym poleceniu zastąpiłeś jego nazwę „preprocesorem”. Na przykład, jeśli chcesz zintegrować Less i zastosować go w swoim projekcie, wykonaj następujące kroki:
npm install -D less
Lub:
yarn add -D less
Po wykonaniu tego zadania możesz zastosować atrybut lang do elementu i przypisać mu wartość „less
<style lang="less">
</style>
Rzeczywiście, implementując Less CSS w swoim komponencie Svelte, możesz teraz wykorzystać jego szeroki zakres możliwości do projektowania i formatowania elementów wizualnych aplikacji internetowej.
Co sprawia, że Svelte jest niesamowity?
Jasne! Oto moja próba przeformułowania: Aby plik mógł zostać uznany za plik Svelte, musi kończyć się sufiksem „.svelte”. Po napotkaniu tego pliku przez kompilator Svelte jego zawartość jest analizowana i odpowiednio przetwarzana. W wyniku tej analizy kompilator generuje odpowiedni kod JavaScript i CSS, które następnie można wysłać do przeglądarki. Wykorzystując te wydajne formaty wyjściowe, użytkownicy mogą cieszyć się bardziej usprawnionym przeglądaniem dzięki krótszym czasom ładowania związanym z generowaną treścią.
Gdy włączenie zewnętrznej biblioteki JavaScript jest uważane za odpowiednie w kontekście twojego projektu opartego na Svelte, możliwe jest włączenie jej bezpośrednio do pliku .svelte , rezygnując z wymogu elementu zawierającego, zwykle kojarzonego z alternatywami, takimi jak React.