Fundamentos
Principios de diseño
Construye tareas móviles coherentes con una base compartida y controles adaptados a cada plataforma.
Coherencia con espacio para la plataforma
Neural Native lleva el lenguaje visual de Neural UI a Angular Native: colores, superficies, jerarquía de acciones y contratos de componentes compartidos. La coherencia significa que una misma acción conserva su significado entre pantallas. No exige que todos los controles del sistema operativo tengan una apariencia idéntica.
Switch utiliza el interruptor de la plataforma, por lo que su forma e interacción pueden variar entre Android e iOS. Componentes como Button y Card utilizan los estilos compartidos de la biblioteca. Prueba la tarea real en ambas plataformas: el preview web permite explorar las APIs, pero no determina el comportamiento nativo del teclado, los gestos o la accesibilidad.
Haz evidente la siguiente acción
Da a la pantalla un propósito claro. Usa un botón solid para su acción principal, tonal u outline para las acciones secundarias y text para acciones de menor énfasis. La variante expresa la jerarquía visual: no cambia el significado del evento pressed ni navega automáticamente.
<neu-button label="Save preferences" variant="solid" (pressed)="save()" />
<neu-button label="Reset" variant="text" (pressed)="reset()" />Escribe las acciones con verbos y mantén visibles las etiquetas de los campos. Un placeholder es un ejemplo del dato esperado, no un sustituto de la etiqueta. Coloca ayudas y errores junto al campo y muestra el resultado tras una acción, sin obligar al usuario a adivinarlo.
Espaciado, tipografía e interacción táctil
Separa los grupos independientes con más espacio que los campos relacionados. Empieza con una distribución vertical sencilla y utiliza SafeAreaView en el límite de la pantalla para respetar las zonas seguras del dispositivo. En tabletas, limita las líneas de lectura largas y agrupa los controles relacionados en lugar de extender todos los campos a lo ancho.
Button e IconButton tienen por defecto un tamaño táctil mínimo de 48 unidades de layout nativo. No reduzcas su área de pulsación al tamaño de un icono pequeño. Reserva espacio para traducciones largas y texto del sistema ampliado: una fila de altura fija que funciona con una etiqueta corta puede recortar contenido real.
Compón una tarea completa
Esta pantalla de preferencias combina edición, un interruptor de la plataforma, acciones principal y secundaria y un resultado visible. El estado permanece en la aplicación. El método save prepara los datos; conecta tu servicio para guardarlos. El ejemplo no realiza una petición de red.
Coloca el componente siguiente dentro del neu-theme raíz de la aplicación.
import { Component, computed, signal } from '@angular/core';
import { Text, View } from '@ng-native/components';
import { NeuInputComponent } from '@neural-ui/native/input';
import { NeuSwitchComponent } from '@neural-ui/native/switch';
import { NeuButtonComponent } from '@neural-ui/native/button';
@Component({
selector: 'app-preferences',
imports: [Text, View, NeuInputComponent, NeuSwitchComponent, NeuButtonComponent],
template: `
<view class="content">
<neu-input label="Full name" [(value)]="name" hint="Shown to your team" />
<neu-switch label="Team notifications" [(checked)]="notifications" />
<neu-button label="Save preferences" [disabled]="!canSave()" (pressed)="save()" />
<neu-button label="Reset" variant="text" (pressed)="reset()" />
<text class="feedback">{{ feedback() }}</text>
</view>
`,
styles: `
.content { padding: 24px; gap: 16px; }
.feedback { color: var(--neu-text); }
`,
})
export class PreferencesComponent {
readonly name = signal('Ada Lovelace');
readonly notifications = signal(true);
readonly canSave = computed(() => this.name().trim().length > 0);
readonly feedback = signal('');
save(): void {
if (!this.canSave()) return;
const preferences = { name: this.name().trim(), notifications: this.notifications() };
this.feedback.set('Preferences ready for ' + preferences.name);
// Pass preferences to your application service to persist them.
}
reset(): void {
this.name.set('Ada Lovelace');
this.notifications.set(true);
this.feedback.set('');
}
}