Componente de botón reutilizable

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

Diego Lozano

student•

<div class="w-screen h-screen bg-gray-50 sm:bg-gray-50 relative">
  <div class="absolute w-full h-full hidden sm:block">
    <img
      loading="lazy"
      class="absolute w-60 lg:w-96 left-0 bottom-0"
      src="/assets/svg/login-bg-left.svg"
      alt="bg left"
    />
    <img
      loading="lazy"
      class="absolute w-60 lg:w-96 right-0 bottom-0"
      src="/assets/svg/login-bg-rigth.svg"
      alt="bg rigth"
    />
  </div>
  <div class="relative w-full sm:w-7/12 md:w-6/12 lg:w-4/12 m-auto">
    <header class="pt-6 pb-2 flex justify-center">
      <img
        loading="lazy"
        class="w-56"
        src="/assets/images/logo/logo-gradient-blue-trello.png"
        alt="Logo"
      />
    </header>
    <div class="bg-white rounded shadow-none sm:shadow-lg py-4 px-6 md:px-10">
      <div class="mb-4">
        <h1 class="text-center font-semibold pt-4 pb-8 text-gray-600">
          Log In to Trello
        </h2>
        <form novalidate class="space-y-4">
          <div class="relative">
            <input
              placeholder="Enter email"
              type="email"
              class="w-full rounded bg-gray-100 border-2 border-gray-300"
            />
          </div>
          <div class="relative">
            <input
              placeholder="Enter password"
              type="password"
              class="w-full rounded bg-gray-100 border-gray-300"
            />
          </div>
          <div>
            <button
              class="text-white w-full px-5 py-2 font-medium rounded text-sm bg-green-700"
              type="submit"
            >
              Log In
            </button>
          </div>
        </form>
        <hr class="my-4 border-b-1 border-r-gray-300" />
        <div
          class="flex justify-center items-center space-x-0 space-y-2 md:space-x-2 md:space-y-0 gap-"
        >
          <a href="/forgot-password" class="text-blue-600 font-light"
            >Can't log in?</a
          >
          <span class="text-gray-500 hidden md:block">*</span>
          <a href="/register" class="text-blue-600 font-light m-0"
            >Sign up for an account</a
          >
        </div>
      </div>
    </div>
    <hr class="mt-10 border-b-1 border-r-gray-300" />
      <div class="flex justify-center">
        <img
          loading="lazy"
          class="w-32 mt-4"
          src="/assets/images/logo/logo-atlassian-gray.png"
          alt="logo"
        />
      </div>
  </div>
</div>

David Trespalacios

student•

Para el reto de reutilizar el boton con otros alias de color:

Agregué un input para recibir el 'alias' en el componente del botón, luego con el ngOnChanges, concadeno el alias con el resto de string para crear la clase de bg y hover:bg así:

@Input() colorBtn: string = '';
  
classBtnCustom: string = '';

ngOnChanges(changes: SimpleChanges): void {
    const colorBtn = changes['colorBtn']?.currentValue;
    if (colorBtn) {
      this.classBtnCustom = `bg-${colorBtn}-500 hover:bg-${colorBtn}-800`;
    }
  }

Finalmente en el Html, uso binding para leer la variable creada 'classBtnCustom':

<button
  class="text-white w-full px-5 py-2 mb-6 font-medium rounded text-sm {{classBtnCustom}} focus:right-4"
  [type]="typeBtn"
>
  <ng-content></ng-content>
</button>

Alexander Gallo

student•

Funciones de los valores de los estilo0s en línea con TailwindCSS:

w-screen y h-screen: El elemento ocupará todo el espacio en pantalla
bg-'Nombre_del_color': Color de fondo del elemento
space-y-#: Espaciado entre elementos en el eje Y

Wilmion Navarrete

student•

Si desean que el tipo sea mas preciso ya que estaria usando desde los mismos props del button

@Input() typeBtn: HTMLButtonElement['type'] = 'submit';

Victor Alfredo Matzar Say

student•

Un poco más sobre ng-content :) : https://www.youtube.com/watch?v=pjINr3StGtI

Max Andy Diaz Neyra

student•

Mi solucion:

export class BtnComponent {
  // @Input() typeBtn: HTMLButtonElement['type'] = 'button';
  // @Input() bgColor = '';
  // classBtnCustom = '';

  // ngOnChanges(changes: SimpleChanges) {
  //   const colorBtn = changes['bgColor']?.currentValue;
  //   if (colorBtn) {
  //     this.classBtnCustom = `bg-${colorBtn}-700 hover:bg-${colorBtn}-800`;
  //   }
  //   console.log(this.bgColor, this.classBtnCustom);
  // }

  typeBtn = input<HTMLButtonElement['type']>('button');
  bgColor = input('primary');

  classBtnCustom = computed(() => {
    const bgColor = this.bgColor();
    return `bg-${bgColor}-700 hover:bg-${bgColor}-800`;
  });
}

Html:

<button
  class="text-white w-full px-5 py-2 font-medium rounded text-sm {{
    classBtnCustom()
  }}"
  [type]="typeBtn()"
>
  <ng-content></ng-content>
</button>

Max Andy Diaz Neyra

student•

Tuve que agregar safelits

Gabriel Oswaldo Montoya Huamani

student•

Reto de la clase:

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

Edwin Jesús

student•

before:content-['value'] text-[#color] bg-[#color]

<div class="w-screen h-screen bg-gray-50 sm:bg-gray-50 relative">
  <div class="absolute w-full h-full hidden sm:block">
    <img loading="lazy" class="absolute w-60 lg:w-96 left-0 bottom-0" src="/assets/svg/login-bg-left.svg"
      alt="bg left" />
    <img loading="lazy" class="absolute w-60 lg:w-96 right-0 bottom-0" src="/assets/svg/login-bg-right.svg"
      alt="bg rigth" />
  </div>
  <div class="relative w-full sm:w-7/12 md:w-6/12 lg:w-4/12 m-auto bg-white">
    <header class="pt-6 pb-2 flex justify-center">
      <img loading="lazy" class="w-56" src="/assets/images/logo/logo-gradient-blue-trello.png" alt="Logo" />
    </header>
    <div class="bg-white rounded shadow-none sm:shadow-lg py-4 px-6 md:px-10">
      <div class="mb-4">
        <h1 class="text-center font-semibold pt-4 pb-8 text-gray-600">
          Log In to Trello
        </h2>
        <form novalidate class="space-y-4">
          <div class="relative">
            <input placeholder="Enter email" type="email" class="w-full rounded bg-gray-100 border-2 border-gray-300" />
          </div>
          <div class="relative">
            <input placeholder="Enter password" type="password" class="w-full rounded bg-gray-100 border-gray-300" />
          </div>
          <div>
            <button class="text-white w-full px-5 py-2 font-medium rounded text-sm bg-green-700" type="submit">
              Log In
            </button>
          </div>
        </form>
        <hr class="my-4 border-b-1 border-r-gray-300" />
        <div class="text-center">
          <a href="/forgot-password" class="text-[#0052cc] text-sm mr-2">Can't log in?</a>
          <span class="before:content-['\2022'] text-[#0052cc] text-sm"></span>
          <a href="/register" class="text-[#0052cc] text-sm m-0 ml-2">Sign up for an account</a>
        </div>
      </div>
    </div>
    <hr class="mt-10 border-b-1 border-r-gray-300" />
    <div class="flex justify-center">
      <img loading="lazy" class="w-32 mt-4" src="/assets/images/logo/logo-atlassian-gray.png" alt="logo" />
    </div>
  </div>
</div>

<div class="w-screen h-screen bg-gray-50 sm:bg-gray-50 relative">
  <div class="absolute w-full h-full hidden sm:block">
    <img
      loading="lazy"
      class="absolute w-60 lg:w-96 left-0 bottom-0"
      src="/assets/svg/login-bg-left.svg"
      alt="bg left"
    />
    <img
      loading="lazy"
      class="absolute w-60 lg:w-96 right-0 bottom-0"
      src="/assets/svg/login-bg-rigth.svg"
      alt="bg rigth"
    />
  </div>
  <div class="relative w-full sm:w-7/12 md:w-6/12 lg:w-4/12 m-auto">
    <header class="pt-6 pb-2 flex justify-center">
      <img
        loading="lazy"
        class="w-56"
        src="/assets/images/logo/logo-gradient-blue-trello.png"
        alt="Logo"
      />
    </header>
    <div class="bg-white rounded shadow-none sm:shadow-lg py-4 px-6 md:px-10">
      <div class="mb-4">
        <h1 class="text-center font-semibold pt-4 pb-8 text-gray-600">
          Log In to Trello
        </h2>
        <form novalidate class="space-y-4">
          <div class="relative">
            <input
              placeholder="Enter email"
              type="email"
              class="w-full rounded bg-gray-100 border-2 border-gray-300"
            />
          </div>
          <div class="relative">
            <input
              placeholder="Enter password"
              type="password"
              class="w-full rounded bg-gray-100 border-gray-300"
            />
          </div>
          <div>
            <button
              class="text-white w-full px-5 py-2 font-medium rounded text-sm bg-green-700"
              type="submit"
            >
              Log In
            </button>
          </div>
        </form>
        <hr class="my-4 border-b-1 border-r-gray-300" />
        <div
          class="flex justify-center items-center space-x-0 space-y-2 md:space-x-2 md:space-y-0 gap-"
        >
          <a href="/forgot-password" class="text-blue-600 font-light"
            >Can't log in?</a
          >
          <span class="text-gray-500 hidden md:block">*</span>
          <a href="/register" class="text-blue-600 font-light m-0"
            >Sign up for an account</a
          >
        </div>
      </div>
    </div>
    <hr class="mt-10 border-b-1 border-r-gray-300" />
      <div class="flex justify-center">
        <img
          loading="lazy"
          class="w-32 mt-4"
          src="/assets/images/logo/logo-atlassian-gray.png"
          alt="logo"
        />
      </div>
  </div>
</div>

@Input() colorBtn: string = '';
  
classBtnCustom: string = '';

ngOnChanges(changes: SimpleChanges): void {
    const colorBtn = changes['colorBtn']?.currentValue;
    if (colorBtn) {
      this.classBtnCustom = `bg-${colorBtn}-500 hover:bg-${colorBtn}-800`;
    }
  }

export class BtnComponent {
  // @Input() typeBtn: HTMLButtonElement['type'] = 'button';
  // @Input() bgColor = '';
  // classBtnCustom = '';

  // ngOnChanges(changes: SimpleChanges) {
  //   const colorBtn = changes['bgColor']?.currentValue;
  //   if (colorBtn) {
  //     this.classBtnCustom = `bg-${colorBtn}-700 hover:bg-${colorBtn}-800`;
  //   }
  //   console.log(this.bgColor, this.classBtnCustom);
  // }

  typeBtn = input<HTMLButtonElement['type']>('button');
  bgColor = input('primary');

  classBtnCustom = computed(() => {
    const bgColor = this.bgColor();
    return `bg-${bgColor}-700 hover:bg-${bgColor}-800`;
  });
}

<div class="w-screen h-screen bg-gray-50 sm:bg-gray-50 relative">
  <div class="absolute w-full h-full hidden sm:block">
    <img loading="lazy" class="absolute w-60 lg:w-96 left-0 bottom-0" src="/assets/svg/login-bg-left.svg"
      alt="bg left" />
    <img loading="lazy" class="absolute w-60 lg:w-96 right-0 bottom-0" src="/assets/svg/login-bg-right.svg"
      alt="bg rigth" />
  </div>
  <div class="relative w-full sm:w-7/12 md:w-6/12 lg:w-4/12 m-auto bg-white">
    <header class="pt-6 pb-2 flex justify-center">
      <img loading="lazy" class="w-56" src="/assets/images/logo/logo-gradient-blue-trello.png" alt="Logo" />
    </header>
    <div class="bg-white rounded shadow-none sm:shadow-lg py-4 px-6 md:px-10">
      <div class="mb-4">
        <h1 class="text-center font-semibold pt-4 pb-8 text-gray-600">
          Log In to Trello
        </h2>
        <form novalidate class="space-y-4">
          <div class="relative">
            <input placeholder="Enter email" type="email" class="w-full rounded bg-gray-100 border-2 border-gray-300" />
          </div>
          <div class="relative">
            <input placeholder="Enter password" type="password" class="w-full rounded bg-gray-100 border-gray-300" />
          </div>
          <div>
            <button class="text-white w-full px-5 py-2 font-medium rounded text-sm bg-green-700" type="submit">
              Log In
            </button>
          </div>
        </form>
        <hr class="my-4 border-b-1 border-r-gray-300" />
        <div class="text-center">
          <a href="/forgot-password" class="text-[#0052cc] text-sm mr-2">Can't log in?</a>
          <span class="before:content-['\2022'] text-[#0052cc] text-sm"></span>
          <a href="/register" class="text-[#0052cc] text-sm m-0 ml-2">Sign up for an account</a>
        </div>
      </div>
    </div>
    <hr class="mt-10 border-b-1 border-r-gray-300" />
    <div class="flex justify-center">
      <img loading="lazy" class="w-32 mt-4" src="/assets/images/logo/logo-atlassian-gray.png" alt="logo" />
    </div>
  </div>
</div>

Componente de botón reutilizable

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