Jak zainstalować widżet dostępności w Svelte

Paczka @dockcodes/accessibility-widget-svelte umożliwia łatwą integrację widgetu dostępności z aplikacjami Svelte. Udostępnia wrapper AccessibilityProvider oraz reaktywny accessibilityStore.

---

1. Instalacja

Za pomocą NPM:

npm install @dockcodes/accessibility-widget-svelte
Skopiuj tekst

lub Yarn:

yarn add @dockcodes/accessibility-widget-svelte
Skopiuj tekst

---

2. Podstawowe użycie

Owiń swoją aplikację komponentem AccessibilityProvider i przekaż swój token.

App.svelte

<script>
    import { AccessibilityProvider } from "@dockcodes/accessibility-widget-svelte";
    import Demo from "./Demo.svelte";
</script>

<AccessibilityProvider token="TWÓJ_TOKEN">
    <Demo />
</AccessibilityProvider>
Skopiuj tekst

Demo.svelte

<script lang="ts">
    import { accessibilityStore } from '@dockcodes/accessibility-widget-svelte';

    $: ready = $accessibilityStore.ready;
    $: accessibility = $accessibilityStore.accessibility;
</script>

{#if !ready || !accessibility}
    <p>Ładowanie widgetu…</p>
{:else}
<div style="padding:20px">
    <h1>Demo Widget Dostępności</h1>

    <button on:click={() => accessibility.setContrast(true)}>Włącz kontrast</button>
    <button on:click={() => accessibility.toggleInvertColors()}>Odwróć kolory</button>
    <button on:click={() => accessibility.setFontSize(4)}>Duża czcionka</button>
    <button on:click={() => accessibility.setLanguage("en")}>EN</button>
    <button on:click={() => accessibility.resetAll()}>Reset</button>
</div>
{/if}
Skopiuj tekst

---

3. Dokumentacja paczki bazowej

Wszystkie metody widgetu, zdarzenia, konfiguracja i API dostępne są w dokumentacji paczki głównej: 👉 @dockcodes/accessibility-widget (otwiera nową kartę)

---

🔑 Pobierz darmowy token

Widget wymaga tokenu, który generujesz bezpłatnie w panelu: 👉 https://wcag.dock.codes/pl/moje-konto/tokens/ (otwiera nową kartę)

---

🤝 Współtworzenie

🤝 Współtworzenie

Jeśli chcesz zgłosić błąd, zaproponować poprawkę lub nową funkcję, zapraszamy do zgłaszania issue lub PR: 👉 GitHub (otwiera nową kartę)