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

Crear un nuevo board: UI

Introducción

Bienvenida y setup del proyecto

Funcionamiento de la API y análisis del proyecto

Integración entre UI y API

Conectando los boards del usuario

Creando el card color component

Typing Colors

Detalle de un board

Drag and Drop

Algoritmo para detectar la posición de la card

Detectar tipo de movimiento: drag and drop

Calcular la posición

Actualizar una sola card

Actualizar lista

Boards

Crear un nuevo board: UI

Crear un nuevo board: conectar con la API

Cerrar el overlay

Cards

Crear una nueva card: UI

Crear una nueva card: formulario

Crear una nueva card: conectar con la API

Listas

Crear una nueva lista: UI

Crear una nueva list: conectar con la API

Backgrounds

Background dinámico

Estado para el Background

Próximos pasos

¿Quieres más cursos de Angular?