Creando acordeones

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

Valentina Montoya

student•

Hola, cuando estaba importando los icon, el de "faGear" no importaba correcta mente en el 'boards.component.ts', como si no lo encontrara, pero usando "faCog" ya todo perfecto.

            <li>
              <a class="block py-1 px-3"
                ><fa-icon [icon]="faCog"></fa-icon> Settings</a
              >
            </li>

Brenda Sutara

student•

Mi acordeon a la versión actual

<cdk-accordion>
      <cdk-accordion-item
        #accordionMenu="cdkAccordionItem">
          <!-- Contenido visible del accordion -->
          <h2 class="block font-bold pt-4 pb-2 px-2 text-xs text-blue-950">
            Tus espacios de trabajo
          </h3>
          <button type="button" (click)="accordionMenu.toggle()" class="w-full flex justify-between align-center px-2  hover:bg-gray-200 rounded-lg">
            <div
              class="flex items-center"
            >
              <img
                class="w-10 h-10 rounded-lg mx-2"
                src="https://api.lorem.space/image/face?w=400&h=400"
                alt=""
              />
              <div class="w-3/4 text-left text-sm block p-2 text-gray-700">
                Espacio de trabajo de Brenda Sutara
              </div>
            </div>
            <div class="flex justify-center items-center">
              <fa-icon [icon]="accordionMenu.expanded ? faAngleUp : faAngleDown"></fa-icon>
            </div>
          </button>
          <!-- FIN Contenido visible del accordion -->

          <!-- Parte desplegable -->
          <ul
            [style.display]="accordionMenu.expanded ? '' : 'none' "
            class="flex flex-col text-sm text-gray-700 mt-1">
            <li class="hover:bg-gray-200 rounded-lg cursor-pointer mb-1">
              <a class="block py-2 px-3 ml-5"
                ><fa-icon [icon]="faTrello" class="mr-3.5"></fa-icon> Boards</a
              >
            </li>
            <li class="hover:bg-gray-200 rounded-lg cursor-pointer mb-1">
              <a class="block py-2 px-3 ml-5"
                ><fa-icon [icon]="faHeart" class="mr-3"></fa-icon> Highlights</a
              >
            </li>
            <li class="hover:bg-gray-200 rounded-lg cursor-pointer mb-1">
              <a class="block py-2 px-3 ml-5"
                ><fa-icon [icon]="faBorderAll" class="mr-3.5"></fa-icon> Views</a
              >
            </li>
            <li class="hover:bg-gray-200 rounded-lg cursor-pointer mb-1">
              <a class="block py-2 px-3 ml-5"
                ><fa-icon [icon]="faUsers" class="mr-2"></fa-icon> Members</a
              >
            </li>
            <li class="hover:bg-gray-200 rounded-lg cursor-pointer mb-1">
              <a class="block py-2 px-3 ml-5"
                ><fa-icon [icon]="faGear" class="mr-3"></fa-icon> Settings</a
              >
            </li>
          </ul>
          <!-- FIN Parte desplegable -->
      </cdk-accordion-item>
    </cdk-accordion>

Jesusamado Salvador Llica García

student•

Nico es mi pastor, nada me faltará

Diego Lozano

student•

import {CdkAccordionModule} from '@angular/cdk/accordion';

Kevin Bueno

student•

Había implementado acordeones con ng-bootstrap y ionic, es la primera vez con el CDK

Marco Andres Vasquez

student•

con una variable boleana podría tener el estado de mostrar o no el div y el icono

¿que ventaja más hay al usar el CdkAcordionModule ?

Victor Alfredo Matzar Say

student•

Tiene muchas ventajas :):

Mejora la accesibilidad: El componente Accordion es accesible para personas con discapacidades visuales, ya que puede ser controlado con el teclado y funciona con lectores de pantalla
Facilidad de uso: El componente Accordion es fácil de implementar y personalizar con Angular Material CDK. Solo es necesario proporcionar el contenido que se debe mostrar dentro de cada sección del acordeón, y Angular Material CDK se encarga de:
1. Gestionar el estado de expansión y contracción de las secciones del acordeón, así como de la animación de la transición entre los estados.
2. Proporciona funcionalidades adicionales como la posibilidad de expandir o contraer múltiples secciones del acordeón de forma simultánea y la opción de personalización de la apariencia del acordeón

Entonces este componente, se encarga de proporcionar una solución completa y lista para usar para la creación de un acordeón interactivo, lo que reduce significativamente el tiempo y la complejidad de la implementación .

Luis Jose Marquez Gonzalez

student•

Mi acordeón con la nueva versión de Trello:

Manuel Alberto Goicochea Medina

student•

entuvo muy interesante!

Elioenai Garcia

student•

Había implementado acordeones con angular material y materializecss, es la primera vez con CDK! 💯