Componente de botón reutilizable
Clase 5 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS
Contenido del curso
Diego Lozano
student•
hace 3 años
Clase 5 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS
Contenido del curso
Diego Lozano
David Trespalacios
Alexander Gallo
Wilmion Navarrete
Victor Alfredo Matzar Say
Max Andy Diaz Neyra
Max Andy Diaz Neyra
Gabriel Oswaldo Montoya Huamani
Edwin Jesús
<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>