-
@for (subItem of item.items; track subItem.label) {
- {{subItem.label}} }
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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 6
Preguntas 1
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'
}
]
}
]
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>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?