0

Estoy buscando la forma de aumentar, disminuir, regular el tamaño de letra, así como modificar contraste en todos los componentes de mi proyecto angular, cada función con un botón. No sé cómo aplicarlo en todo el proyecto.

Hice la prueba de una función en un componente y sí funciona, pero lo quiero replicar en todo el proyecto. Ayuda, por favor.

Anexo el código que agregué a un sólo componente de angular:

En el HTML:

<div id="slideout">
        <label for="menu-toggle" ngbTooltip="Controles de accesibilidad"><img class="accessibilityimage" src="./assets/accessibility.png" alt="Feedback" /></label>
        <input type="checkbox" id="menu-toggle"/>
        <div class="icon-bar" id="menu">
            <a class="b-1" (click)="increase()">Letra grande</a>
            <a class="b-1" (click)="decrease()">Letra pequeña</a>
            <a class="b-1" (click)="reset()">Letra regular</a>
            <a href="#" target="_blank" class="b-1">Alto contraste</a>
            <a href="#" class="b-2">Contraste regular</a>
        </div>
    </div>

Y en cada etiqueta de texto (h,p) coloqué:

<h3 [style.fontSize.px]="fontSize" class="card-title">Texto prueba</h3>

En el .ts coloqué:

const DEFAULT_FONT_SIZE = 15; 

export class CardsEntidadesComponent implements OnInit {
  

 fontSize: number;

  constructor(){
    this.fontSize = DEFAULT_FONT_SIZE;
  }

  decrease(){
    this.fontSize = (this.fontSize * 0.8);
  }

  increase(){
    this.fontSize = (this.fontSize * 1.2);
  }

  reset(){
    this.fontSize = DEFAULT_FONT_SIZE;
  }  
}

Les agradezco su ayuda. Saludos

1 respuesta 1

0

Podrías tener un fichero CSS con los estilos por defecto de tu aplicación y otro CSS con los estilos para accesibilidad mejorada y cambiar de uno a otro al pulsar un botón. He encontrado este ejemplo en el que hacen algo similar aunque en este caso es solo para cambiar el tema visual. Espero que te sirva de ayuda: https://stackblitz.com/edit/angular-material-theme-switch

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.