Estoy tratando de crear mi propia biblioteca de interfaz de usuario usando angular y Tailwind, tengo un problema al usar ngClass:
<button [ngClass]="{ 'px-4 py-2 text-sm': size === 'md', 'px-4 py-2 text-base': size === 'lg', }" > My Button </button> Quiero que mi clase sea una de las anteriores cuando se cumpla la condición del size . El problema es cuando el size es igual a 'md' y se cumple la primera condición: la clase en el dom es solo text-sm en lugar de px-4 py-2 text-sm
La documentación de ngClass dice:
las claves son clases de CSS que se agregan cuando la expresión dada en el valor se evalúa como un valor verdadero; de lo contrario, se eliminan
Tengo entendido que en mi ejemplo:
px-4 py-2 text-base se elimina de la clase, por lo que el único que queda es text-sm .Creo que pude entender el problema, pero como soy nuevo en angular y me gustaría aprender a usar correctamente ngClass, ¿alguien tiene una solución para resolver esto?
Agregue las clases comunes a su atributo de class regular, así:
<button [ngClass]="{ 'text-sm': size === 'md', 'text-base': size === 'lg', }" class="px-4 py-2" > My Button </button>Aquí tienes, hazlo así con múltiples condiciones:
[ngClass]="property === value1 ? 'css-class-name1' : property === value2 ? 'css-class-name2' : property === value3 ? 'css-class-name3' : 'default-css'"