Creando acordeones

Clase 10 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS

Valentina Montoya

student•

Hola, cuando estaba importando los icon, el de "faGear" no importaba correcta mente en el 'boards.component.ts', como si no lo encontrara, pero usando "faCog" ya todo perfecto.

            <li>
              <a class="block py-1 px-3"
                ><fa-icon [icon]="faCog"></fa-icon> Settings</a
              >
            </li>

Brenda Sutara

student•

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>

Jesusamado Salvador Llica García

student•

Nico es mi pastor, nada me faltará

Diego Lozano

student•

import {CdkAccordionModule} from '@angular/cdk/accordion';

Kevin Bueno

student•

Había implementado acordeones con ng-bootstrap y ionic, es la primera vez con el CDK

Marco Andres Vasquez

student•

con una variable boleana podría tener el estado de mostrar o no el div y el icono

¿que ventaja más hay al usar el CdkAcordionModule ?

Victor Alfredo Matzar Say

student•

Tiene muchas ventajas :):

Mejora la accesibilidad: El componente Accordion es accesible para personas con discapacidades visuales, ya que puede ser controlado con el teclado y funciona con lectores de pantalla
Facilidad de uso: El componente Accordion es fácil de implementar y personalizar con Angular Material CDK. Solo es necesario proporcionar el contenido que se debe mostrar dentro de cada sección del acordeón, y Angular Material CDK se encarga de:
1. Gestionar el estado de expansión y contracción de las secciones del acordeón, así como de la animación de la transición entre los estados.
2. Proporciona funcionalidades adicionales como la posibilidad de expandir o contraer múltiples secciones del acordeón de forma simultánea y la opción de personalización de la apariencia del acordeón

Entonces este componente, se encarga de proporcionar una solución completa y lista para usar para la creación de un acordeón interactivo, lo que reduce significativamente el tiempo y la complejidad de la implementación .

Luis Jose Marquez Gonzalez

student•

Mi acordeón con la nueva versión de Trello:

Manuel Alberto Goicochea Medina

student•

entuvo muy interesante!

Elioenai Garcia

student•

Había implementado acordeones con angular material y materializecss, es la primera vez con CDK! 💯

<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