Respuesta háptica | Neural Native

Actívala en la aplicación nativa

Disponible desde Neural Native 0.1.0-beta.5. La háptica está desactivada por defecto. Instala el módulo nativo compatible con Expo y recompila tu aplicación Android o iOS; reiniciar JavaScript no enlaza un módulo nativo nuevo.

terminal

npx expo install expo-haptics

Crea src/haptics.ts con el código siguiente. Importa hapticProviders en tu archivo de arranque y añádelo con spread al array providers de las opciones de mount(). Conserva los demás proveedores y la configuración del renderizador de la plantilla.

src/haptics.ts

import { provideNeuHaptics } from '@neural-ui/native/haptics';

export const hapticProviders = [
  provideNeuHaptics({
    enabled: true,
    pressStyle: 'light',
    minimumIntervalMs: 80,
  }),
];

Elige la respuesta de cada control

Los botones y las acciones pulsables internas utilizan pressStyle. Checkbox, Switch, Radio y Slider solicitan un pulso de selección cuando el usuario cambia su valor. Los controles desactivados o de solo lectura, los cambios programáticos, un radio ya seleccionado y un slider en su límite no añaden un pulso de selección.

Button, IconButton, Checkbox, Switch, Radio y Slider exponen haptic. Utiliza false para silenciar un control. Puedes elegir press, selection, light, medium, heavy, soft, rigid, success, warning y error. press utiliza el pressStyle configurado. minimumIntervalMs limita las solicitudes repetidas durante interacciones rápidas.

template.html

<neu-button label="Continue" haptic="light" (pressed)="continue()" />
<neu-button label="Silent action" [haptic]="false" (pressed)="continue()" />

Respeta la preferencia del usuario

NeuHaptics.enabled es una signal escribible. Conéctala a un ajuste de la aplicación para activar o desactivar la respuesta sin volver a montar los controles. El ejemplo siguiente prueba una confirmación de forma explícita; el botón silencia su respuesta de pulsación para evitar dos solicitudes en una acción.

src/app/feedback-preferences.component.ts

import { Component, inject } from '@angular/core';
import { View } from '@ng-native/components';
import { NeuHaptics } from '@neural-ui/native/haptics';
import { NeuSwitchComponent } from '@neural-ui/native/switch';
import { NeuButtonComponent } from '@neural-ui/native/button';

@Component({
  selector: 'app-feedback-preferences',
  imports: [View, NeuSwitchComponent, NeuButtonComponent],
  template: `
    <view class="preferences">
      <neu-switch
        label="Haptic feedback"
        [checked]="haptics.enabled()"
        (checkedChange)="haptics.enabled.set($event)"
        [haptic]="false" />
      <neu-button
        label="Test confirmation feedback"
        [disabled]="!haptics.enabled()"
        [haptic]="false"
        (pressed)="haptics.play('success')" />
    </view>
  `,
  styles: `.preferences { padding: 24px; gap: 16px; }`,
})
export class FeedbackPreferencesComponent {
  readonly haptics = inject(NeuHaptics);
}

En una operación real, llama a play("success") solo cuando haya terminado correctamente. La háptica complementa los mensajes visibles y el estado accesible; no los sustituye.

Disponibilidad y pruebas

available indica si el módulo nativo está enlazado. play() indica si se envió una solicitud, no si un motor vibró. El sistema puede suprimir la respuesta. La ausencia del módulo o una solicitud fallida no bloquean la acción normal del control.

La vista previa web no reproduce la respuesta táctil nativa. Los emuladores y simuladores permiten comprobar llamadas al módulo y el comportamiento de los controles; la sensación solo se comprueba en un dispositivo físico. Prueba tu aplicación con la respuesta activada, desactivada y no disponible.