Skill maestro para Ionic Framework en Angular standalone (v7+). Cubre layout de página, navegación (tabs, menú, breadcrumbs), elementos de UI (cards, listas, accordion), overlays (modal, alert, toast, popover, action-sheet) y formularios (inputs, buttons, selects, toggles). Usar SIEMPRE que se construya o modifique cualquier componente Angular que use Ionic: estructuras de página, componentes de UI, formularios interactivos u overlays. Todos los imports son de '@ionic/angular/standalone'.
Guía maestra para usar Ionic Framework con Angular Standalone en este proyecto.
Todos los componentes Ionic se importan desde @ionic/angular/standalone:
import { IonContent, IonHeader, IonToolbar, IonTitle } from '@ionic/angular/standalone';
@Component({
imports: [IonContent, IonHeader, IonToolbar, IonTitle],
})
Los iconos requieren registro explícito vía addIcons de ionicons:
import { addIcons } from 'ionicons';
import { heart, star } from 'ionicons/icons';
constructor() {
addIcons({ heart, star });
}
IonicModule — siempre importar componentes individuales desde @ionic/angular/standalone..ion-page como clase raíz. Dentro: <ion-header> + <ion-content> + <ion-footer> (opcional).addIcons({...}) en el constructor del componente que los usa, o una vez en app.component.ts para uso global.primary, secondary, tertiary, success, warning, danger, light, medium, dark.mode="ios" o mode="md" para forzar estilos de plataforma.ion-padding, ion-margin, ion-text-center, ion-align-items-center, ion-justify-content-between, etc.aria-label en elementos sin texto visible (botones de solo icono, inputs sin label visual).