Wprowadzenie do Svelte i Integracja z Tabler.io

#

Svelte to nowoczesny framework komponentów, który pozwala tworzyć szybkie i wydajne aplikacje webowe. Jeśli jesteś nowy w świecie Svelte i chcesz dodać do niego atrakcyjne style z Tabler.io, jesteś we właściwym miejscu. W tym wpisie pokażę, jak zainstalować Svelte i dodać do niego Tabler.io.

Instalacja Svelte

#

Jeśli chcesz zainstalować Svelte, polecam odniesienie się do oficjalnej dokumentacji Svelte.dev. Tam znajdziesz szczegółową instrukcję krok po kroku.

Integracja Svelte z Tabler.io

#

Tabler.io to zestaw narzędzi do tworzenia interfejsów użytkownika, które są zarówno estetyczne, jak i funkcjonalne. Dzięki poniższym krokom można szybko dodać Tabler.io do projektu Svelte.

1. Instalacja Tabler.io

   Aby zainstalować core Tabler.io, otwórz terminal w folderze projektu i wpisz:

   npm install @tabler/core
   

2. Importowanie styli i skryptów Tabler.io

   Edytuj plik src/routes/+page.svelte i dodaj poniższy kod:

   <script>
       import { onMount } from 'svelte';
       let tabler;
   
       onMount(() => {
           tabler = require('@tabler/core/dist/js/tabler.js');
       });
   
       import '@tabler/core/dist/css/tabler.min.css';
   </script>
   

   Wykorzystujemy tutaj onMount z Svelte, aby załadować skrypty Tabler.io dopiero po pełnym załadowaniu strony. Dzięki temu zapewniamy płynne działanie aplikacji.