Soy más del gusto de no trabajar con frameworks para css, pero sinceramente estas bondades o pros que te da tailwind sobre bootstrap, foundation, etc. lo hace atractivo, practico y un puntito a favor, gran curso 😃
Introducción
¿Qué es el Angular CDK?
Instalando Angular CDK y TailwindCSS
Maquetando con Tailwind
Maquetando la página de login con Tailwind
Maquetando formularios con Tailwind
Componente de botón reutilizable
Reto: colores y propiedades dinámicas
Componentes interactivos con Angular CDK
Creando Overlays
Múltiples Overlays
Iconos en Angular con Font Awesome
Creando acordeones
Acordeones dinámicos
Drag and drop
Drag and drop con ordenamiento
Drag and drop con transferencia entre columnas
Drag and drop con columnas dinámicas
Modales y listas
Modales y diálogos
Modales recibiendo información
Listas con scroll
Listas con virtual scrolling
Table CDK
Tablas
Estilos en Tablas
Usando un DataSource en Tablas
Tablas con filtros y debounce
Próximos pasos para completar el Clon de Trello
Mejoras en UX y reusabilidad
Toma el Curso de Autenticación con Angular
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
14 Días
12 Hrs
13 Min
23 Seg
Reto: colores y propiedades dinámicas
6/24Recursos
Aportes 14
Preguntas 5
Ordenar por:
export class BtnComponent implements OnInit {
@Input() typeBtn: 'button' | 'submit' | 'reset' | 'submit' = 'button';
@Input() color: string = 'primary';
constructor() {}
ngOnInit(): void {}
get colors() {
const colorsList: { [key: string]: string } = {
success: 'bg-success-700 hover:bg-success-800 focus:ring-success-300',
danger: 'bg-red-700 hover:bg-red-800 focus:ring-red-300',
primary: 'bg-primary-700 hover:bg-primary-800 focus:ring-primary-300',
};
return colorsList[this.color];
}
}
Para los que estén utilizando la versión 17 de Angular, el **ngClass** se debe importar en el componente:
```js
import { NgClass } from '@angular/common'
@Component({
selector: 'app-button',
standalone: true,
imports: [NgClass],
templateUrl: './button.component.html'
})
export class ButtonComponent {
@Input() btnType: 'button' | 'reset' | 'submit' = 'button'
@Input() btnColor: string = 'success'
get colors (): string {
// get color
}
}
```
De esta forma el getter es mas legible y evitas tener muchas lineas de codigo:
get colors() {
return {
'bg-success-700 hover:bg-success-800 focus:ring-success-300': this.colorBtn === 'success',
'bg-primary-700 hover:bg-primary-800 focus:ring-primary-300': this.colorBtn === 'primary',
'bg-red-700 hover:bg-red-800 focus:ring-red-300': this.colorBtn === 'red',
}
}
No se que opine Nico, pero aquí dejo una opción un poco más limpia:
```js
export class BtnComponent {
@Input() type: 'submit' | 'button' | 'reset' = 'button';
@Input() color: 'primary' | 'success' | 'danger' = 'primary';
colorClass = {
primary: 'bg-primary-500 hover:bg-primary-800 focus:ring-primary-300',
success: 'bg-success-500 hover:bg-success-800 focus:ring-success-300',
danger: 'bg-red-500 hover:bg-red-800 focus:ring-red-300'
}
get colors() {
return this.colorClass[this.color];
}
```export class BtnComponent { @Input() type: 'submit' | 'button' | 'reset' = 'button'; @Input() color: 'primary' | 'success' | 'danger' = 'primary'; colorClass = { primary: 'bg-primary-500 hover:bg-primary-500 focus:ring-primary-500', success: 'bg-success-500 hover:bg-success-500 focus:ring-success-500', danger: 'bg-danger-500 hover:bg-danger-500 focus:ring-danger-500' }
get colors() { return this.colorClass\[this.color]; }}
no se si es por la versión en la que esta tailwindcss pero si no uso las clases que declaramos en get colors antees de llamar al button estpan no se aplican
Recuerden importar el módulo CommonModule en btn.component.ts para que les pueda traer de ángular los módulos propios para que en el inspector se pueda revisar
voy a probar este framework css y les cuento como me va... no me parece eso que no le pueda pasar el nombre por parámetro... tal vez volviendo a construir el html se pueda.. nunca me ha pasado pero me gustan los retos ya les cuento..
dejé asi mi componente btn
\<button \[type]="typeBtn" class="w-full">
\<ng-content>\</ng-content>
\</button>
y en mi componente login así.
\
\<app-btn \[typeBtn]="'submit'" class="bg-success text-white rounded font-medium text-sm py-2"> Log In \</app-btn> \
Por donde lo veo esto es bueno y malo
Malo
Porque si querías algo dinámico no vale como tal, a menos que este definido
Bueno
Porque me permite tener una paleta de colores establecida para la app
Tambien podemos usar ngClass en el html, en mi opinión se ve más ordenado:
```js
<button
class="w-full text-center py-3 text-white font-medium rounded-md"
[disabled]="this.isDisabled"
[ngClass]="{
'bg-primary': this.moodButton == 'main',
'bg-red-500 cursor-not-allowed': this.moodButton == 'dangerous',
'bg-slate-500 cursor-not-allowed': this.moodButton === 'disabled'}"
[type]="this.typeButton">
<ng-content></ng-content>
</button>
```y en nuestro componente:
```js
import { Component, Input, OnInit } from '@angular/core';
type typeBtn = 'submit' | 'button' | 'reset';
type moodBtn = 'dangerous' | 'main' |'disabled';
@Component({
selector: 'app-button',
templateUrl: './button.component.html',
})
export class ButtonComponent implements OnInit{
// typeButton para saber que tipo de boton es
@Input() typeButton: typeBtn = 'button';
// moodButton es un input para saber que estilos debemos agregar a nuestro boton, usamos los type para tener un buen tipado.
@Input() moodButton: moodBtn = 'main';
// isDisabled para cuando el boton tiene el mood "disabled".
public isDisabled!: boolean;
ngOnInit(): void {
this.moodButton == 'disabled' ? this.isDisabled = true : this.isDisabled = false;
}
}
```
Wow, no tienes idea de como necesitaba este curso. Gracias Nico. Una maravilla este contenido
Con la solución planteada por mí en la clase anterior me funcionó (al menos en desarrollo), imagino porque utilizo el ciclo de visa ngOnChanges que se ejecuta antes del renderizado.
Primero pensé en usar ngClass, pero como muestra el teacher mucho código. y al final enviando el nombre del alias es suficiente.
<app-btn [typeBtn]="'submit'" [colorBtn]="'primary'">Log in</app-btn>
@nicobyte es correcto esto?
en un proyecto con nextjs tuve ese problema con clases dinámicas y no sabia el porque… ahora entiendo 😄
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?