No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Componente de botón reutilizable

5/24
Recursos

Aportes 7

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

<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
        </h1>
        <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>

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

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

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

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

Si desean que el tipo sea mas preciso ya que estaria usando desde los mismos props del button `@Input() typeBtn: HTMLButtonElement['type'] = 'submit';`
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;  }}

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
        </h1>
        <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>