Angular MDBootstrap Lectores de pantalla Utilidades

MDBootstrap es una biblioteca de interfaz de usuario angular basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. En este artículo, sabremos cómo usar Screenreaders Utilities en Angular MDBootstap. Las utilidades de lectores de pantalla se pueden usar para ocultar todo el contenido, excepto los lectores de pantalla, especificando la extensión . clase solo sr . Esto también se puede utilizar como mixins.

Sintaxis:

<div class="sr-only sr-only-focusable"> Content </div>

Acercarse:

• Descarga Angular MDBootstrap desde el sitio oficial .
• Extraiga los archivos al directorio de trabajo actual.
• Instale npm en el proyecto actual usando el siguiente comando:

npm install

• Después de crear la carpeta de su proyecto, es decir , el nombre de la aplicación, acceda a ella con el siguiente comando:

cd appname

• Inicie el servidor con el siguiente comando:

ng serve

Estructura del proyecto: después de la instalación completa, tendrá el siguiente aspecto:

Estructura del proyecto

Ejemplo: este es el ejemplo básico que ilustra cómo usar las utilidades de los lectores de pantalla en Angular MDBootstrap.

<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>Angular MDBootstrap Screenreaders Utilities</h4>
    <br />
    <div class="sr-only sr-only-focusable">
        GeeksforGeeks
    </div>
</div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule{}

Producción:

Angular MDBootstrap Lectores de pantalla Utilidades

Referencia: https://mdbootstrap.com/docs/angular/utilities/screenreaders/