Przewiń do głównej treści

#011 - svelte and tabler.io

·170 słów·1 min· loading · loading ·
Banan
Autor
Banan
Only sky is the limit

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.