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
Acordeones dinámicos
Diego Inostroza
studentContenido del curso
Acordeones dinámicos
Diego Inostroza
student
LUIS ANTONIO CALVO QUISPE
studentLUIS ANTONIO CALVO QUISPE
student
Valentina Montoya
student
Brenda Sutara
student
Mauricio Gonzalo Aliendre Pérez
student
Jorge Morales
student
David Sanchez Alzate
studentSi están usando la sintaxis de Angular 17
<cdk-accordion> @for (item of items; track item.label) { <cdk-accordion-item #accordionItem="cdkAccordionItem"> <button class=" w-full text-left" type="button" (click)="accordionItem.toggle()"> {{item.label}} </button> <div [style.display]="accordionItem.expanded ? '' : 'none' "> <ul> @for (subItem of item.items; track subItem.label) { <li>{{subItem.label}}</li> } </ul> </div> </cdk-accordion-item> } </cdk-accordion>
Arreglo Items
items = [ { label: 'Item 1', items: [ { label: 'Sub Item 1.1' }, { label: 'Sub Item 1.2' } ] }, { label: 'Item 2', items: [ { label: 'Sub Item 2.1' } ] }, { label: 'Item 3', items: [ { label: 'Sub Item 3.1' }, { label: 'Sub Item 3.2' }, { label: 'Sub Item 3.3' } ] } ]
Personalizando:
<div class="pt-4"> <div class="text-lg py-1 px-2 flex justify-between font-semibold text-blue-950"> <p>Workspaces</p> <p>+</p> </div> <div> <cdk-accordion> <cdk-accordion-item #accordionMenu="cdkAccordionItem"> <button class="flex w-full justify-between px-4 py-1 font-semibold text-blue-950" type="button" (click)="accordionMenu.toggle()"> My Workspace <fa-icon [icon]="accordionMenu.expanded ? faAngleUp : faAngleDown"></fa-icon> </button> <div [style.display]="accordionMenu.expanded ? '' : 'none'"> <ul class="ml-2 flex flex-col text-sm text-gray-700"> <li> <a class="block px-3 py-1" ><fa-icon [icon]="faTrello"></fa-icon> Boards</a > </li> <li> <a class="block px-3 py-1" ><fa-icon [icon]="faHeart"></fa-icon> Highlights</a > </li> <li> <a class="block px-3 py-1" ><fa-icon [icon]="faBorderAll"></fa-icon> Views</a > </li> <li> <a class="block px-3 py-1" ><fa-icon [icon]="faUsers"></fa-icon> Members</a > </li> <li> <a class="block px-3 py-1" ><fa-icon [icon]="faGear"></fa-icon> Settings</a > </li> </ul> </div> </cdk-accordion-item> </cdk-accordion> <cdk-accordion> <cdk-accordion-item #accordionItem="cdkAccordionItem" *ngFor="let item of items"> <button class="w-full flex justify-between px-4 py-1 font-semibold text-blue-950" type="button" (click)="accordionItem.toggle()"> {{ item.label }} <fa-icon [icon]="accordionMenu.expanded ? faAngleUp : faAngleDown"></fa-icon> </button> <div [style.display]="accordionItem.expanded ? '' : 'none'"> <ul class="list-disc px-10 font-normal text-blue-950"> <li *ngFor="let subItem of item.items">{{ subItem.label }}</li> </ul> </div> </cdk-accordion-item> </cdk-accordion> </div> </div>
<cdk-accordion> <cdk-accordion-item> <button> "la parte donde se hace el click (esta siempre se muestra)" </button> <div> "la parte que se contrae "</div> </cdk-accordion-item> </cdk-accordion>
Si ahora lo quiero hacer con *ngFor a lo que hicimos en la clase anterior. Generé mis items con mis label correspondientes pero como hago para asignarle a cada items el icono correspondiente?
Hola! Quizás ya lo solucionaste, pero la manera en la que lo hice yo y siguiendo el ejemplo del muy buen aporte que pusiste en la anterior clase, lo hice de la siguiente manera:
Hice una lista con los labels que seran los nombres y los iconos que son los componentes que importamos desde @fortawesome/free-solid-svg-icons en boards.components.ts
iconsListForDeployableMenu = [ { label: 'Boards', icon: faTree }, { label: 'Highlights', icon: faHeart }, { label: 'Views', icon: faBorderAll }, { label: 'Members', icon: faUsers }, { label: 'Settings', icon: faGear } ]
<ul class="ml-2 flex flex-col text-sm text-gray-700"> @for (icon of iconsListForDeployableMenu; track icon.label) { <li class="hover:bg-gray-200 rounded-lg cursor-pointer mb-1"> <a class="block py-1 px-3 ml-3" ><fa-icon [icon]="icon.icon"></fa-icon> {{ icon.label }}</a > </li> } </ul>
<cdk-accordion> @for (item of items; track $index) { <cdk-accordion-item #accordionItem="cdkAccordionItem"> <button class="w-full text-left" type="button" (click)="accordionItem.toggle()" > {{ item.label }} </button> <div [style.display]="accordionItem.expanded ? '' : 'none'"> @for (subItems of item.items; track $index) { <ul> <li>{{ subItems.label }}</li> </ul> } </div> </cdk-accordion-item> } </cdk-accordion> ```\<cdk-accordion> @for (item of items; track $index) { \<cdk-accordion-item #accordionItem="cdkAccordionItem"> \<button class="w-full text-left" type="button" (click)="accordionItem.toggle()" > {{ item.label }} \</button> \<div \[style.display]="accordionItem.expanded ? '' : 'none'"> @for (subItems of item.items; track $index) { \<ul> \<li>{{ subItems.label }}\</li> \</ul> } \</div> \</cdk-accordion-item> } \</cdk-accordion>
Yo quise en la clase pasada separar el button de el texto de My workspace para que ya solo funcionara como accordion la flechita usando un <div>, lo dejare acá para los que quieran implementarlo igual
<div class="flex justify-between items-center"> <h3>My workspace</h3> <button class="py-1 px-2 flex justify-center" type="button" (click)="accordionMenu.toggle()" > <fa-icon [icon]="accordionMenu.expanded ? faAngleUp : faAngleDown" ></fa-icon> </button> </div>