Acordeones dinámicos
Clase 11 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS
Contenido del curso
Diego Inostroza
student•
hace 2 años
Clase 11 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS
Contenido del curso
Diego Inostroza
LUIS ANTONIO CALVO QUISPE
LUIS ANTONIO CALVO QUISPE
Valentina Montoya
Brenda Sutara
Mauricio Gonzalo Aliendre Pérez
Jorge Morales
David Sanchez Alzate
Si 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>