Creando acordeones
Contenido del curso
Creando acordeones
Contenido del curso
Valentina Montoya
Brenda Sutara
Jesusamado Salvador Llica García
Diego Lozano
Kevin Bueno
Marco Andres Vasquez
Victor Alfredo Matzar Say
Luis Jose Marquez Gonzalez
Manuel Alberto Goicochea Medina
Elioenai Garcia
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>
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! 💯
