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-vlibras
ou com yarn:
yarn add angular-vlibras
Apó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)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 entre0
e1
. 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
.