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.
Instale a biblioteca angular-vlibras via npm:
npm install angular-vlibrasou com yarn:
yarn add angular-vlibrasApós a instalação, siga os passos abaixo para integrar o widget VLibras em sua aplicação Angular:
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 { }Adicione o componente <angular-vlibras /> ao seu template para ativar o widget VLibras:
<angular-vlibras />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)righttopbottombottomLefttopLeftbottomRighttopRight
Exemplo:
<angular-vlibras position="right" />
-
avatar: Especifica o avatar usado no widget VLibras. As opções incluem:icarohosanagugarandom(padrão)
Exemplo:
<angular-vlibras avatar="guga" />
-
opacity: Define a opacidade do widget VLibras. O valor deve ser um número entre0e1. O valor padrão é1.Exemplo:
<angular-vlibras opacity="0.8" />
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.