Acordeones dinámicos

Clase 11 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS

Contenido del curso

Introducción

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

Tomar examen

Comentarios

Diego Inostroza

student•

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>

LUIS ANTONIO CALVO QUISPE

student•

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'
        }
      ]
    }
  ]

LUIS ANTONIO CALVO QUISPE

student•

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>

Valentina Montoya

student•

    <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>

Brenda Sutara

student•

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?

Mauricio Gonzalo Aliendre Pérez

student•

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
    }
  ]

Ya luego siguiendo la sintaxis the Angular 17, hice el @for con esa lista de la siguiente manera

          <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>

Jorge Morales

student•

<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>

David Sanchez Alzate

student•

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>

<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>

  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'
        }
      ]
    }
  ]

 <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>

  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>

<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>

Acordeones dinámicos

Introducción

¿Qué es el Angular CDK?

Instalando Angular CDK y TailwindCSS

Maquetando con Tailwind

Maquetando la página de login con Tailwind

Maquetando formularios con Tailwind

Componente de botón reutilizable

Reto: colores y propiedades dinámicas

Componentes interactivos con Angular CDK

Creando Overlays

Múltiples Overlays

Iconos en Angular con Font Awesome

Creando acordeones