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>