No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Acordeones dinámicos

11/24
Recursos

Aportes 6

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Si están usando la sintaxis de Angular 17 ```html <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>
    @for (subItem of item.items; track subItem.label) {
  • {{subItem.label}}
  • }
</cdk-accordion-item> } </cdk-accordion> ```

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>

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'
        }
      ]
    }
  ]
```js <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>
@for (subItems of item.items; track $index) {
  • {{ subItems.label }}
}
</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> \
@for (subItems of item.items; track $index) { \
    \
  • {{ subItems.label }}\
  • \
} \
\</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">
            <h2>My workspace</h2>
            <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>