Crear un nuevo board: UI

Clase 12 de 22 • Curso Práctico de Angular: Construye un Clon de Trello

Adrian Silva

student•

Mi solución al reto:

<input
          id="sky-radio"
          type="radio"
          value="sky"
          name="backgroundColor"
          formControlName="backgroundColor"
          class="hidden peer"
        />
        <label
          for="sky-radio"
          class="inline-flex items-center justify-center w-8 h-8 text-transparent border border-gray-200 rounded cursor-pointer bg-sky-700 hover:bg-sky-500 peer-checked:text-white"
          >
          <fa-icon [icon]="faCheck"></fa-icon>
        </label>

Luis Jose Marquez Gonzalez

student•

Para hacer más dinámico el selector de colores, he hecho lo siguiente:

He creado un array de colores para los boars

export const BOARD_COLORS: string[] = ['sky','green', 'violet', 'yellow', 'gray'];

En el ts del componente he creado una variable que contiene esos valores y una función para que tailwind agregue las clases correspondientes:

colorList: string[] = BOARD_COLORS; 

getcolorClass(color: string): string {
  return COLORS[color as Colors];
}
```Si los estilos están un poco rotos, hay que agregar las clases variantes para los hover, focus y checked:

```js
checked:bg-sky-500 focus:bg-sky-500 checked:focus:bg-sky-500 hover:checked:bg-sky-500

3. En el HTML he utilizado el siguiente código para generar los inputs en forma de rectángulos:

<div 
        class="grid gap-2 mb-4 relative"
        [ngClass]="'grid-cols-5'"
    >
        @for(color of colorList; track color){
            <div class="relative mb-4">
                <input
                    formControlName="color"
                    type="radio"
                    placeholder="Board color"
                    class="border-0 cursor-pointer h-10 w-full rounded bg-gray-100 p-2 border-gray-300 checked:border-2 checked:border-gray-400"
                    [ngClass]="getcolorClass(color)"
                    [value]="color"
                >
            </div>
        }
    </div>
```Este ha sido el resultado:

![](https://static.platzi.com/media/user_upload/image-3e63406e-c7fa-4880-967b-2a92b1e756a3.jpg)

Camilo Del Valle Ledesma

student•

board-form.component.html

<form [formGroup]="form" novalidate class="space-y-4" (ngSubmit)="doSave()"> <div> <div class="flex flex-wrap"> <div class="flex items-center mr-4"> <input id="sky-radio" type="radio" value="sky" name="backgroundColor" formControlName="backgroundColor" class="w-4 h-4 text-sky-600 bg-gray-100 border-gray-300 focus:ring-sky-500 dark:focus:ring-sky-600 " /> <label for="sky-radio" class="ml-2 text-sm font-medium text-gray-900 " >Sky</label > </div> <div class="flex items-center mr-4"> <input id="yellow-radio" type="radio" value="yellow" name="backgroundColor" formControlName="backgroundColor" class="w-4 h-4 text-yellow-600 bg-gray-100 border-gray-300 focus:ring-yellow-500 dark:focus:ring-yellow-600 " /> <label for="yellow-radio" class="ml-2 text-sm font-medium text-gray-900" >Yellow</label > </div> <div class="flex items-center mr-4"> <input id="green-radio" type="radio" value="green" name="backgroundColor" formControlName="backgroundColor" class="w-4 h-4 text-green-600 bg-gray-100 border-gray-300 focus:ring-green-500 dark:focus:ring-green-600 " /> <label for="green-radio" class="ml-2 text-sm font-medium text-gray-900" >green</label > </div> <div class="flex items-center mr-4"> <input id="red-radio" type="radio" value="red" name="backgroundColor" formControlName="backgroundColor" class="w-4 h-4 text-red-600 bg-gray-100 border-gray-300 focus:ring-red-500 dark:focus:ring-red-600 " /> <label for="red-radio" class="ml-2 text-sm font-medium text-gray-900" >red</label > </div> <div class="flex items-center mr-4"> <input id="violet-radio" type="radio" value="violet" name="backgroundColor" formControlName="backgroundColor" class="w-4 h-4 text-violet-600 bg-gray-100 border-gray-300 focus:ring-violet-500 dark:focus:ring-violet-600 " /> <label for="violet-radio" class="ml-2 text-sm font-medium text-gray-900" >violet</label > </div> <div class="flex items-center mr-4"> <input id="gray-radio" type="radio" value="gray" name="backgroundColor" formControlName="backgroundColor" class="w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 focus:ring-gray-500 dark:focus:ring-gray-600 " /> <label for="gray-radio" class="ml-2 text-sm font-medium text-gray-900" >gray</label > </div> </div> </div> <div> <div class="relative"> <input formControlName="title" placeholder="Enter title" type="text" class="w-full rounded bg-gray-100 border-gray-300 border-2" /> </div> </div> <div> <app-btn typeBtn="submit" color="success"> Create </app-btn> </div> </form>

arlingholguin

student•

ng g c modules/layout/components/board-form --skip-tests --style=none