Compare

Uso

Compare es un único control antes/después, compuesto por tres piezas auxiliares, no cuatro comparadores diferentes. Importa NeuCompareComponent, NeuCompareItemComponent, NeuCompareIndicatorComponent y NeuCompareHandleComponent desde @neural-ui/core/compare. Los ejemplos completos de esta página muestran cómo encajan. La misma ilustración de costa aparece en gris antes y en color después; esos estilos de imagen pertenecen a la aplicación.

Utiliza dos CompareItem, un CompareIndicator y un CompareHandle. position="before" o "after" identifica cada superficie. Acepta valueChange asignando $event.value al valor aplicado; defaultValue es un respaldo, no un estado local persistente. El indicador y el control heredan la orientación y posición del padre y deben estar dentro de Compare.

Ejemplos

Prueba esta interacción gestionada por la aplicación. Código incluye los eventos y los datos iniciales.

Ejemplos

Reiniciar ejemplo

Demo Código

Antes

Después

Eventos: 0

Prueba y configura

Cambia las opciones públicas, prueba el resultado y consulta el template actualizado. Código contiene la implementación ejecutable completa.

Prueba y configura

Reiniciar ejemplo

Demo Código

Antes

Después

Eventos: 0

orientation horizontal

disabledslideOnHover

step

Opciones avanzadas · 3

Comportamiento y contenido

defaultValue

max

min

Los datos estructurados, callbacks y templates se muestran en los ejemplos y en la API.

El código añade las opciones avanzadas cuando difieren del valor predeterminado. Los datos y valores de esta configuración aparecen en el estado del template.

template.html Copiar código

<neu-compare
  class="remaining-compare"
  [value]="position()"
  (valueChange)="position.set($event.value)"
  (valueChangeEnd)="record('valueChangeEnd', $event.value)"
  [orientation]="'horizontal'"
  [disabled]="false"
  [slideOnHover]="false"
  [step]="5"
  ><neu-compare-item position="before"
    ><div class="remaining-compare-surface remaining-before remaining-compare-surface--image">
      <img class="remaining-compare-image" src="assets/media/coast.svg" [alt]="t('Coastal light before color adjustment', 'Luz de costa antes del ajuste de color')" width="800" height="450" draggable="false" />
      <span class="remaining-compare-caption">{{ t("Before", "Antes") }}</span>
    </div></neu-compare-item
  ><neu-compare-item position="after"
    ><div class="remaining-compare-surface remaining-after remaining-compare-surface--image">
      <img class="remaining-compare-image" src="assets/media/coast.svg" [alt]="t('Coastal light after color adjustment', 'Luz de costa después del ajuste de color')" width="800" height="450" draggable="false" />
      <span class="remaining-compare-caption">{{ t("After", "Después") }}</span>
    </div></neu-compare-item
  ><neu-compare-indicator
    ><span class="remaining-compare-line"></span></neu-compare-indicator
  ><neu-compare-handle
    [ariaLabel]="t('Compare position', 'Posición de comparación')"
    ></neu-compare-handle
  ></neu-compare
>

Estado y datos de esta configuración

Estos valores corresponden a la vista previa actual. Los handlers, imports de Core y templates completos están en Código.

configured-state.ts Copiar código

import { signal } from '@angular/core';

export const position = signal(50);

Estado y eventos

Compón Compare con dos CompareItem, un CompareIndicator y un CompareHandle. position="before" o "after" identifica cada superficie. Acepta valueChange asignando $event.value al valor aplicado; defaultValue es un valor de respaldo, no un estado local persistente. El indicador y el control heredan la orientación y posición del padre y deben estar dentro de Compare. El contenido proyectado pertenece a la aplicación.

Accesibilidad y teclado

Enfoca CompareHandle con Tab. Las flechas ajustan la posición e Inicio/Fin alcanzan los límites. El arrastre propone cambios mediante los mismos Outputs.

API

Inputs, modelos y Outputs se extraen del paquete Core instalado. Los tipos públicos enlazan a sus definiciones. Los Templates incluyen ejemplos ejecutables.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Nombre	Mecanismo	Contrato
* Contenido proyectado Ver ejemplo	Proyección de contenido Contenido proporcionado por la aplicación.	<ng-content /> Contexto utilizado: —

Cada ejemplo muestra un template diferente. Alterna entre Demo y Código para consultar su implementación, imports y estado.

Contenido proyectado

*

Contenido proyectado

Reiniciar ejemplo

Demo Código

Antes

Después

Eventos: 0

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

import type { NeuCompareOrientation } from '@neural-ui/core/compare';

// Declaración pública (solo referencia)
type NeuCompareOrientation = 'horizontal' | 'vertical';

import type { NeuCompareValueChangeEvent } from '@neural-ui/core/compare';

// Declaración pública (solo referencia)
interface NeuCompareValueChangeEvent {
  originalEvent: Event;
  value: number;
}

Estilos y tokens

Usa los tokens públicos de la referencia. El diseño del contenedor pertenece a tu aplicación; comprueba el resultado en modo claro y oscuro y en espacios estrechos.

Componentes relacionados

Consulta los componentes relacionados cuando necesites otra interacción o un control compuesto.

• CompareHandle
• CompareIndicator
• CompareItem