InlineEditor

Uso

El lápiz inicia un borrador. Guardar aplica el borrador a value y emite valueCommitted con previousValue y value; cancelar conserva el valor aceptado. type elige el editor y options aporta las entradas del select. Mantén el tipo del modelo compatible con el editor. saveOnBlur es opcional; por defecto hay acciones explícitas.

Ejemplos

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

Prueba y configura

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

<neu-inline-editor
  [value]="value()"
  (valueChange)="value.set($event)"
  [type]="'text'"
  [options]="selectOptions"
  [size]="'md'"
  [saveOnBlur]="false"
  [disabled]="false"
  [readonly]="false"
  [invalid]="false"
  (valueCommitted)="record('valueCommitted', $event)"
  (editCancel)="record('editCancel', $event)"
  [cancelLabel]="'Cancelar edición'"
  [editLabel]="'Editar valor'"
  [emptyLabel]="'Vacío'"
  [saveLabel]="'Guardar valor'"
/>

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

export const value = signal("Atlas");

export const selectOptions = [
  "Atlas",
  "Birch",
  "Cedar"
];

Estado y eventos

El lápiz inicia un borrador. Guardar aplica el borrador a value y emite valueCommitted con previousValue y value; cancelar conserva el valor aceptado. type elige el editor y options aporta las entradas del select. Mantén el tipo del modelo compatible con el editor. saveOnBlur es opcional; por defecto hay acciones explícitas.

Accesibilidad y teclado

Activa el lápiz con Intro/Espacio. Intro guarda una edición de una línea; Escape cancela. Tab alcanza guardar y cancelar.

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.

Models

Un modelo admite [(propiedad)]="signal" o la pareja [propiedad] y (propiedadChange). Elige una de las dos formas, no ambas.

Outputs

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

Public Types

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

import type { NeuInlineMode } from '@neural-ui/core/inline-editor';
import type { NeuInlineValue } from '@neural-ui/core/inline-editor';

import type { NeuInlineEditorCommitEvent } from '@neural-ui/core/inline-editor';

// Declaración pública (solo referencia)
export interface NeuInlineEditorCommitEvent<M extends NeuInlineMode = NeuInlineMode> {
  readonly previousValue: NeuInlineValue<M>;
  readonly value: NeuInlineValue<M>;
}

import type { NeuInlineMode } from '@neural-ui/core/inline-editor';
import type { NeuInlineValue } from '@neural-ui/core/inline-editor';

import type { NeuInlineEditorComponent } from '@neural-ui/core/inline-editor';

// Declaración pública (solo referencia)
export type NeuInlineEditorComponent<M extends NeuInlineMode = 'text'> = NeuInlineEditorControl<NeuInlineValue<M>>;
const NeuInlineEditorComponent: typeof NeuInlineEditorControl;

import type { NeuInlineEditorSize } from '@neural-ui/core/inline-editor';

// Declaración pública (solo referencia)
export type NeuInlineEditorSize = 'sm' | 'md' | 'lg';

import type { NeuInlineMode } from '@neural-ui/core/inline-editor';

import type { NeuInlineEditorType } from '@neural-ui/core/inline-editor';

// Declaración pública (solo referencia)
export type NeuInlineEditorType = NeuInlineMode | 'select' | 'textarea' | 'date';

import type { NeuInlineMode } from '@neural-ui/core/inline-editor';

// Declaración pública (solo referencia)
export type NeuInlineMode = 'text' | 'number';

import type { NeuInlineMode } from '@neural-ui/core/inline-editor';

import type { NeuInlineValue } from '@neural-ui/core/inline-editor';

// Declaración pública (solo referencia)
export type NeuInlineValue<M extends NeuInlineMode> = M extends 'number' ? number | null : string;

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.

• ToggleButtonGroup
• SplitButton
• SpeedDial