Componente de botón reutilizable
Contenido del curso
Maquetando con Tailwind
Componentes interactivos con Angular CDK
Drag and drop
Modales y listas
Table CDK
Próximos pasos para completar el Clon de Trello
Componente de botón reutilizable
Contenido del curso
Componente de botón reutilizable
Diego Lozano
Estudiante
David Trespalacios
Estudiante
Alexander Gallo
Estudiante
Wilmion Navarrete
Estudiante
Victor Alfredo Matzar Say
Estudiante
Max Andy Diaz Neyra
EstudianteMax Andy Diaz Neyra
Estudiante
Gabriel Oswaldo Montoya Huamani
Estudiante
Edwin Jesús
Estudiante<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>
Para el reto de reutilizar el boton con otros alias de color:
@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
Si desean que el tipo sea mas preciso ya que estaria usando desde los mismos props del button
@Input() typeBtn: HTMLButtonElement['type'] = 'submit';
Un poco más sobre ng-content :) : https://www.youtube.com/watch?v=pjINr3StGtI
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>
Tuve que agregar safelits
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 </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>