Creando acordeones

Curso de Maquetación con Angular CDK y Tailwind CSS

Contenido del curso

Introducción

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

Tomar examen

Creando acordeones

Brenda Sutara

Estudiante

Mi acordeon a la versión actual

<cdk-accordion>
      <cdk-accordion-item
        #accordionMenu="cdkAccordionItem">
          <!-- Contenido visible del accordion -->
          <h2 class="block font-bold pt-4 pb-2 px-2 text-xs text-blue-950">
            Tus espacios de trabajo
          </h3>
          <button type="button" (click)="accordionMenu.toggle()" class="w-full flex justify-between align-center px-2  hover:bg-gray-200 rounded-lg">
            <div
              class="flex items-center"
            >
              <img
                class="w-10 h-10 rounded-lg mx-2"
                src="https://api.lorem.space/image/face?w=400&h=400"
                alt=""
              />
              <div class="w-3/4 text-left text-sm block p-2 text-gray-700">
                Espacio de trabajo de Brenda Sutara
              </div>
            </div>
            <div class="flex justify-center items-center">
              <fa-icon [icon]="accordionMenu.expanded ? faAngleUp : faAngleDown"></fa-icon>
            </div>
          </button>
          <!-- FIN Contenido visible del accordion -->

          <!-- Parte desplegable -->
          <ul
            [style.display]="accordionMenu.expanded ? '' : 'none' "
            class="flex flex-col text-sm text-gray-700 mt-1">
            <li class="hover:bg-gray-200 rounded-lg cursor-pointer mb-1">
              <a class="block py-2 px-3 ml-5"
                ><fa-icon [icon]="faTrello" class="mr-3.5"></fa-icon> Boards</a
              >
            </li>
            <li class="hover:bg-gray-200 rounded-lg cursor-pointer mb-1">
              <a class="block py-2 px-3 ml-5"
                ><fa-icon [icon]="faHeart" class="mr-3"></fa-icon> Highlights</a
              >
            </li>
            <li class="hover:bg-gray-200 rounded-lg cursor-pointer mb-1">
              <a class="block py-2 px-3 ml-5"
                ><fa-icon [icon]="faBorderAll" class="mr-3.5"></fa-icon> Views</a
              >
            </li>
            <li class="hover:bg-gray-200 rounded-lg cursor-pointer mb-1">
              <a class="block py-2 px-3 ml-5"
                ><fa-icon [icon]="faUsers" class="mr-2"></fa-icon> Members</a
              >
            </li>
            <li class="hover:bg-gray-200 rounded-lg cursor-pointer mb-1">
              <a class="block py-2 px-3 ml-5"
                ><fa-icon [icon]="faGear" class="mr-3"></fa-icon> Settings</a
              >
            </li>
          </ul>
          <!-- FIN Parte desplegable -->
      </cdk-accordion-item>
    </cdk-accordion>

Creando acordeones

Introducción

¿Qué es el Angular CDK?

Instalando Angular CDK y TailwindCSS

Maquetando con Tailwind

Maquetando la página de login con Tailwind

Maquetando formularios con Tailwind

Componente de botón reutilizable

Reto: colores y propiedades dinámicas

Componentes interactivos con Angular CDK

Creando Overlays

Múltiples Overlays

Iconos en Angular con Font Awesome

Creando acordeones

Acordeones dinámicos

Drag and drop

Drag and drop con ordenamiento

Drag and drop con transferencia entre columnas

Drag and drop con columnas dinámicas

Modales y listas

Modales y diálogos

Modales recibiendo información

Listas con scroll

Listas con virtual scrolling

Table CDK

Tablas

Estilos en Tablas

Usando un DataSource en Tablas

Tablas con filtros y debounce

Próximos pasos para completar el Clon de Trello

Mejoras en UX y reusabilidad

Toma el Curso de Autenticación con Angular