Acordeones dinámicos

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

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>

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

Acordeones dinámicos

Drag and drop

Drag and drop con ordenamiento

Drag and drop con transferencia entre columnas

Drag and drop con columnas dinámicas

Modales y listas

Modales y diálogos

Modales recibiendo información

Listas con scroll

Listas con virtual scrolling

Table CDK

Tablas

Estilos en Tablas

Usando un DataSource en Tablas

Tablas con filtros y debounce

Próximos pasos para completar el Clon de Trello

Mejoras en UX y reusabilidad

Toma el Curso de Autenticación con Angular