Skip to content

angular-a11y/angular-vlibras

Repository files navigation

Angular VLibras

Angular VLibras é uma biblioteca Angular que integra o widget de acessibilidade VLibras em suas aplicações Angular. O VLibras fornece tradução automática de conteúdo digital para a Língua Brasileira de Sinais (Libras), aumentando a acessibilidade para os usuários.

Instalação

Instale a biblioteca angular-vlibras via npm:

npm install angular-vlibras

ou com yarn:

yarn add angular-vlibras

Uso

Após a instalação, siga os passos abaixo para integrar o widget VLibras em sua aplicação Angular:

1. Importe o Componente AngularVlibras

No módulo raiz da sua aplicação (geralmente app.module.ts), importe o componente AngularVlibras:

import { Component } from '@angular/core';
import { AngularVlibras } from 'angular-vlibras';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AngularVlibras],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent { }

2. Use o Componente <angular-vlibras />

Adicione o componente <angular-vlibras /> ao seu template para ativar o widget VLibras:

<angular-vlibras />

Propriedades

O componente aceita as seguintes propriedades de entrada:

  • position: Define a posição do widget VLibras na tela. Os valores possíveis são:

    • left (padrão)
    • right
    • top
    • bottom
    • bottomLeft
    • topLeft
    • bottomRight
    • topRight

    Exemplo:

    <angular-vlibras position="right" />
  • avatar: Especifica o avatar usado no widget VLibras. As opções incluem:

    • icaro
    • hosana
    • guga
    • random (padrão)

    Exemplo:

    <angular-vlibras avatar="guga" />
  • opacity: Define a opacidade do widget VLibras. O valor deve ser um número entre 0 e 1. O valor padrão é 1.

    Exemplo:

    <angular-vlibras opacity="0.8" />

Exemplo

Aqui está um exemplo de como configurar o widget VLibras com propriedades personalizadas:

<angular-vlibras 
  position="bottomRight" 
  avatar="hosana" 
  opacity="0.9" />

Essa configuração posicionará o widget no canto inferior direito da tela, usará o avatar hosana e definirá a opacidade como 0.9.