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