Instalacja widgetu dostępności – Vue

Paczka @dockcodes/accessibility-widget-vue umożliwia szybką integrację widgetu dostępności z aplikacjami opartymi o Vue 3, zapewniając dostęp do pełnej funkcjonalności biblioteki bazowej poprzez wygodny Provider oraz kompozycję useAccessibility().

1. Instalacja paczki

Za pomocą NPM:

npm install @dockcodes/accessibility-widget-vue

lub Yarn:

yarn add @dockcodes/accessibility-widget-vue

2. Podstawowe użycie

Najpierw owiń aplikację w <AccessibilityProvider> i przekaż swój token:

App.vue

<template>
  <AccessibilityProvider token="YOUR_TOKEN">
    <Demo />
  </AccessibilityProvider>
</template>

<script setup lang="ts">
import { AccessibilityProvider } from "@dockcodes/accessibility-widget-vue"
import Demo from './Demo.vue'
</script>

Demo.vue

<template>
  <div v-if="!ready">
    <p>Widget loading…</p>
  </div>

  <div v-else style="padding: 20px;">
    <h1>Demo Accessibility Widget</h1>

    <button @click="accessibility.setContrast(true)">Enable contrast</button>
    <button @click="accessibility.toggleInvertColors()">Invert colors</button>
    <button @click="accessibility.setFontSize(4)">Large font</button>
    <button @click="accessibility.resetAll()">Reset</button>
  </div>
</template>

<script setup lang="ts">
import { watchEffect } from "vue"
import { useAccessibility } from "@dockcodes/accessibility-widget-vue"

const { accessibility, ready } = useAccessibility()

watchEffect(() => {
  if (ready) {
    accessibility.onMenuOpen(() => console.log("Menu opened!"))
  }
})
</script>

3. Dokumentacja paczki bazowej

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

🔑 Pobierz darmowy token

Widget wymaga tokenu, który generujesz bezpłatnie w panelu:
👉 https://wcag.dock.codes/pl/moje-konto/tokens/

🤝 Współtworzenie

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