Contenido del curso
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
Creando acordeones
Valentina Montoya
studentContenido del curso
Creando acordeones
Valentina Montoya
student
Brenda Sutara
student
Jesusamado Salvador Llica García
student
Diego Lozano
student
Kevin Bueno
student
Marco Andres Vasquez
student
Victor Alfredo Matzar Say
student
Luis Jose Marquez Gonzalez
student
Manuel Alberto Goicochea Medina
student
Elioenai Garcia
studentHola, 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>
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>
Nico es mi pastor, nada me faltará
import {CdkAccordionModule} from '@angular/cdk/accordion';
Había implementado acordeones con ng-bootstrap y ionic, es la primera vez con el CDK
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 ?
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:
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 .
Mi acordeón con la nueva versión de Trello:
entuvo muy interesante!
Había implementado acordeones con angular material y materializecss, es la primera vez con CDK! 💯