angular-cdk-integration
Crear interfaz de usuario Angular con utilidades CDK
Crear interfaces de arrastrar y soltar, superposiciones y listas de desplazamiento virtual requiere un conocimiento profundo de los patrones de Angular CDK. Esta habilidad proporciona ejemplos de código listos para usar y mejores prácticas para implementar interacciones de interfaz de usuario complejas en aplicaciones Angular.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "angular-cdk-integration". Crear una interfaz de arrastrar y soltar con dos listas conectadas
Erwartetes Ergebnis:
- Importar CdkDropList y CdkDrag desde @angular/cdk/drag-drop
- Configurar drop list con [cdkDropListConnectedTo] para vincular listas
- Manejar eventos de drop con la interfaz CdkDragDrop
- Usar moveItemInArray para reordenar, transferArrayItem para mover entre listas
- Agregar placeholder de arrastre con *cdkDragPlaceholder para retroalimentación visual
Verwendung von "angular-cdk-integration". Crear una lista de desplazamiento virtual para 5000 elementos
Erwartetes Ergebnis:
- Importar ScrollingModule desde @angular/cdk/scrolling
- Usar cd-virtual-scroll-viewport con atributo itemSize
- Implementar directiva *cdkVirtualFor para renderizado de elementos
- Configurar altura y ancho del viewport en estilos
- Considerar la complejidad de elementos para rendimiento de desplazamiento suave
Sicherheitsaudit
SicherPure documentation skill containing only markdown content with TypeScript code examples. No executable code, scripts, network calls, filesystem access, or external commands detected. All 48 static findings are false positives caused by pattern-matching without semantic understanding of documentation context.
Risikofaktoren
🌐 Netzwerkzugriff (5)
📁 Dateisystemzugriff (1)
⚙️ Externe Befehle (19)
Qualitätsbewertung
Was du bauen kannst
Tableros de tareas interactivos
Crear tableros de tareas estilo kanban con funcionalidad de arrastrar y soltar entre columnas
Menús flotantes
Crear menús desplegables accesibles, tooltips y popovers utilizando el sistema Overlay
Listas de alto rendimiento
Implementar desplazamiento virtual para mostrar miles de elementos de manera eficiente
Probiere diese Prompts
Crear un tablero de tareas de arrastrar y soltar con tres columnas usando el módulo drag-drop de Angular CDK. Incluir estilos de placeholder para los elementos arrastrados.
Implementar un menú desplegable utilizando el servicio Overlay de Angular CDK. Incluir manejo de clics en el fondo y limpieza adecuada al destruir.
Crear un componente de desplazamiento virtual usando ScrollingModule de Angular CDK que renderice eficientemente 10000 elementos con itemSize de 50 píxeles.
Crear un componente que detecte y muestre las capacidades actuales del navegador y plataforma móvil utilizando el servicio Platform.
Bewährte Verfahren
- Importar módulos específicos de CDK en lugar del paquete completo @angular/cdk para un tamaño de bundle más pequeño
- Siempre limpiar superposiciones, suscripciones y adjuntos de portal en ngOnDestroy
- Usar desplazamiento virtual para listas que superen 100 elementos para mantener el rendimiento
Vermeiden
- Usar directivas CDK en servicios o repositorios en lugar de componentes de capa UI
- Crear superposiciones sin implementar lógica de disposición
- Omitir pruebas de accesibilidad al implementar interacciones de arrastrar y soltar y superposiciones