Reto: colores y propiedades dinámicas

Clase 6 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS

Christian Michelle Torres Martínez

student•

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 :)

Midduar Arturo Matheus Tapia

student•

Lo más útil que decidí hacer, por mi parte, fue evitar la necesidad de aprender y depender de frameworks de CSS externos y de sus posibles cambios. En su lugar, opté por crear mi propio framework, integrándolo directamente en los estilos principales del proyecto.

De esta manera, todo el CSS se encuentra centralizado en un solo lugar, y además conozco perfectamente cada clase y cada regla, ya que fui yo mismo quien las diseñó e implementó.

Edward Rodríguez

student•

Para los que estén utilizando la versión 17 de Angular, el ngClass se debe importar en el componente:

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
  }
}

Rafael Bautista

student•

Si tienes el CommonModule no deberias de importar el NgClass

Genix Xavier Granados Elias

student•

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];
  }
}

Carlos Benitez

student•

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',
    }
  }

kolab Linkear

student•

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

Luis Jose Marquez Gonzalez

student•

No se que opine Nico, pero aquí dejo una opción un poco más limpia:

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'  }
&#x20; get colors() {    return this.colorClass\[this.color];  }}

Héctor Danilo Sebastián Salinas Ugalde

student•

Si tienen problemas en la aplicación del tema de colores o plugins del forms en el css añadir

@config "./tailwind.config.js";

@import "tailwindcss";

y en la raiz del src añadir el tailwind.config.js les dejo el codigo si les sirve const colors = require('tailwindcss/colors');

module.exports = {

content: [

"./src/**/*.{html,ts}",

theme: {

extend: {

colors: {

success: colors.green,

primary: colors.blue,

danger: colors.red,

}

plugins: [

require('@tailwindcss/forms'),

}

Cesar González Caballero

student•

Mi propuesta:

<button

class="w-full font-medium rounded text-sm p-2 text-white"

[type]="type"

[ngClass]="{

'bg-green-600 hover:bg-green-700 ' : varyant === 'success',

'bg-red-700 hover:bg-red-800' : varyant === 'error',

'bg-yellow-600 hover:bg-yellow-700' : varyant === 'alert'

}"

>

<ng-content></ng-content>

</button>

import { Component, Input } from '@angular/core';

import { NgClass } from '@angular/common';

@Component({

selector: 'app-btn',

standalone: true,

templateUrl: './btn.html',

styleUrl: './btn.css',

imports: [NgClass],

})

export class Btn {

@Input() type?: 'button' | 'submit' | 'reset' = 'button';

@Input() varyant?: 'success' | 'error' | 'alert' = 'success';

}

<app-btn

class="block w-full"

type="submit"

varyant="success"

>

Login

</app-btn>

Platzi Team

student•

No seria mejor por ejemplo algo como esto: :root { --color-fondo: #007bff; /* Azul por defecto */ }

.primary, .success { background-color: var(--color-fondo); color: white; }

.success { --color-fondo: #28a745; /* Verde para el botón éxito */ } Donde solo llamamos a una clase y reasignamos el valor ?

Midduar Arturo Matheus Tapia

student•

claro eso sería lo más fácil para un solo elemento, pero como queremos cambiar sus propiedades según se necesite más adelante he allí la complicación y la necesidad de declarar múltiples estilos para un solo componente, en donde solo se le cambiara el tipo de botón y el color; ósea se hizo todo eso para más adelante no volver a hacer todo el botón.

David Cubilos

student••

También puedes lograr esto sin Tailwind, al igual que en la clase debemos crear un get con nuestras clases de css.

Button.css

button {
  transition: transform 300ms ease-out, background-color 300ms ease-in;
  font-weight: 600;
}

button:active {
  transform: scale(.95);
}


.primary.full {
  background-color: var(--primary);
  color: var(--primary-foreground);

  &:hover {
    background-color: var(--primary-hover);
  }
}

.primary.outline {
  outline-color: var(--primary);
}

.red.full {
  background-color: var(--color-red-700);
  color: var(--color-white);
}

.red.outline {
  outline-color: var(--color-red-700);
}

Button.ts

import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';

export type TypeButton = 'submit' | 'button' | 'reset';
// las variantes y los colores deben coincidir con lo que tenemos en nuestro css
export type VariantButton = 'full' | 'outline';
export type ColorsButton = 'primary' | 'red';

@Component({
  selector: 'component-button',
  imports: [CommonModule],
  templateUrl: './button.html',
  styleUrl: './button.css',
})
export class Button {
  @Input({ required: false }) type: TypeButton = 'button';
  @Input({ required: false }) class: string = '';
  @Input({ required: false }) variant: VariantButton = 'full';
  @Input({ required: false }) color: ColorsButton = 'primary';

  get buttonClasses() {
    return {
      [this.class]: true,
      [this.variant]: true,
      [this.color]: true,
    };
  }
}

Button.html

<button [type]="type" [ngClass]="buttonClasses">
  <ng-content></ng-content>
</button>

Amado León

student•

import { NgClass } from '@angular/common';
import { Component, computed, input } from '@angular/core';

@Component({
  selector: 'app-btn',
  imports: [NgClass],
  templateUrl: './btn.html'
})
export class Btn {
  readonly type = input.required<'button' | 'submit' | 'reset'>();
  readonly color = input<'success' | 'warning' | 'error' | 'primary' | 'secondary'>('primary');

  clases = computed(() => {
    const color = this.color();
    if (!color) return;
    return {
      'bg-success-700': color === 'success',
      'bg-warning-700': color === 'warning',
      'bg-error-700': color === 'error',
      'bg-primary-700': color === 'primary',
      'bg-secondary-700': color === 'secondary',
      'hover:bg-success-800': color === 'success',
      'hover:bg-warning-800': color === 'warning',
      'hover:bg-error-800': color === 'error',
      'hover:bg-primary-800': color === 'primary',
      'hover:bg-secondary-800': color === 'secondary',
      'focus:ring-success-300': color === 'success',
      'focus:ring-warning-300': color === 'warning',
      'focus:ring-error-300': color === 'error',
      'focus:ring-primary-300': color === 'primary',
      'focus:ring-secondary-300': color === 'secondary'
    };
  });
}

Daniel Arturo Dominguez Lopez

student•

no seria mejor manejar var()?

Platzi

student•

No, no sería mejor manejar var(). El uso de var sin paréntesis es la forma correcta de declarar variables implícitamente en C#. Var() no es una sintaxis válida.

Gustavo Medina Limon

student•

Por alguna razón no se renderizan los colores y quizás también el tipo submit. Lo extraño es que en la consola si aparecen las propiedades. Intente con los 3 colores, hasta intente utilizar otro color en la consola y no funciona. Alguna idea de como puedo solucionar este extraño fallo?

Manuel Alberto Goicochea Medina

student•

/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors');
module.exports = {
  purge: {
    content: ["./src/**/*.{html,js}"],
    options: {
      safelist: [
        'bg-success-700', 'hover:bg-success-800', 'focus:ring-success-300',
        'bg-primary-700', 'hover:bg-primary-800', 'focus:ring-primary-300',
        'bg-red-700', 'hover:bg-red-800', 'focus:ring-red-300',
        'text-white'
      ]
    }
  },
  theme: {
    extend: {
      colors:{
        success: colors.green,
        primary: colors.blue,
        red: colors.red,      
      } 
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

Nieles Yhosmel Flores Vargas

student•

Hola a todos, Habra alguna forma de retornar mapa de colores personalizados quizas poniendo un alias a las clases de tailwindcss...

Max Andy Diaz Neyra

student•

Para los que vengan de Angular 19, esta seria mi solución adaptada a la forma moderna:

Bonnier Nilss Mamani Larico

student•

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

Manuel Alberto Goicochea Medina

student•

hola , use esto en en el archivo tailwind.config.js y se soluciono :

/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors');
module.exports = {
  purge: {
    content: ["./src/**/*.{html,js}"],
    options: {
      safelist: [
        'bg-success-700', 'hover:bg-success-800', 'focus:ring-success-300',
        'bg-primary-700', 'hover:bg-primary-800', 'focus:ring-primary-300',
        'bg-red-700', 'hover:bg-red-800', 'focus:ring-red-300',
        'text-white'
      ]
    }
  },
  theme: {
    extend: {
      colors:{
        success: colors.green,
        primary: colors.blue,
        red: colors.red,      
      } 
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

Camilo Del Valle Ledesma

student•

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

JOHN MELENDEZ

student•

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..

Arlin Holguin

student•

dejé asi mi componente btn

<ng-content></ng-content>

</button>

y en mi componente login así.

Gabriel Oswaldo Montoya Huamani

student•

Tambien podemos usar ngClass en el html, en mi opinión se ve más ordenado:

<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;
  }
}

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
  }
}

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];
  }
}

  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',
    }
  }

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'  }
&#x20; get colors() {    return this.colorClass\[this.color];  }}

button {
  transition: transform 300ms ease-out, background-color 300ms ease-in;
  font-weight: 600;
}

button:active {
  transform: scale(.95);
}


.primary.full {
  background-color: var(--primary);
  color: var(--primary-foreground);

  &:hover {
    background-color: var(--primary-hover);
  }
}

.primary.outline {
  outline-color: var(--primary);
}

.red.full {
  background-color: var(--color-red-700);
  color: var(--color-white);
}

.red.outline {
  outline-color: var(--color-red-700);
}

import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';

export type TypeButton = 'submit' | 'button' | 'reset';
// las variantes y los colores deben coincidir con lo que tenemos en nuestro css
export type VariantButton = 'full' | 'outline';
export type ColorsButton = 'primary' | 'red';

@Component({
  selector: 'component-button',
  imports: [CommonModule],
  templateUrl: './button.html',
  styleUrl: './button.css',
})
export class Button {
  @Input({ required: false }) type: TypeButton = 'button';
  @Input({ required: false }) class: string = '';
  @Input({ required: false }) variant: VariantButton = 'full';
  @Input({ required: false }) color: ColorsButton = 'primary';

  get buttonClasses() {
    return {
      [this.class]: true,
      [this.variant]: true,
      [this.color]: true,
    };
  }
}

import { NgClass } from '@angular/common';
import { Component, computed, input } from '@angular/core';

@Component({
  selector: 'app-btn',
  imports: [NgClass],
  templateUrl: './btn.html'
})
export class Btn {
  readonly type = input.required<'button' | 'submit' | 'reset'>();
  readonly color = input<'success' | 'warning' | 'error' | 'primary' | 'secondary'>('primary');

  clases = computed(() => {
    const color = this.color();
    if (!color) return;
    return {
      'bg-success-700': color === 'success',
      'bg-warning-700': color === 'warning',
      'bg-error-700': color === 'error',
      'bg-primary-700': color === 'primary',
      'bg-secondary-700': color === 'secondary',
      'hover:bg-success-800': color === 'success',
      'hover:bg-warning-800': color === 'warning',
      'hover:bg-error-800': color === 'error',
      'hover:bg-primary-800': color === 'primary',
      'hover:bg-secondary-800': color === 'secondary',
      'focus:ring-success-300': color === 'success',
      'focus:ring-warning-300': color === 'warning',
      'focus:ring-error-300': color === 'error',
      'focus:ring-primary-300': color === 'primary',
      'focus:ring-secondary-300': color === 'secondary'
    };
  });
}

/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors');
module.exports = {
  purge: {
    content: ["./src/**/*.{html,js}"],
    options: {
      safelist: [
        'bg-success-700', 'hover:bg-success-800', 'focus:ring-success-300',
        'bg-primary-700', 'hover:bg-primary-800', 'focus:ring-primary-300',
        'bg-red-700', 'hover:bg-red-800', 'focus:ring-red-300',
        'text-white'
      ]
    }
  },
  theme: {
    extend: {
      colors:{
        success: colors.green,
        primary: colors.blue,
        red: colors.red,      
      } 
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors');
module.exports = {
  purge: {
    content: ["./src/**/*.{html,js}"],
    options: {
      safelist: [
        'bg-success-700', 'hover:bg-success-800', 'focus:ring-success-300',
        'bg-primary-700', 'hover:bg-primary-800', 'focus:ring-primary-300',
        'bg-red-700', 'hover:bg-red-800', 'focus:ring-red-300',
        'text-white'
      ]
    }
  },
  theme: {
    extend: {
      colors:{
        success: colors.green,
        primary: colors.blue,
        red: colors.red,      
      } 
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

<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;
  }
}

Reto: colores y propiedades dinámicas

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