Splitter

Uso

panes define una entrada por neu-splitter-pane proyectado, en el mismo orden. size es un porcentaje; min y max son límites en píxeles. Los tamaños omitidos comparten el porcentaje restante. orientation elige paneles contiguos o apilados. Define una altura para la distribución vertical. Acepta sizesChange actualizando size para conservar el cambio al terminar el arrastre.

Ejemplos

Prueba el comportamiento y abre Código para consultar la implementación.

Prueba y configura

Cambia las opciones y prueba el resultado. El template generado sigue tu configuración; Código contiene la implementación ejecutable completa.

<neu-splitter
  orientation="horizontal"
  [panes]="panes()"
  (sizesChange)="accept($event)"
  (resizeStart)="starts.update(increment)"
  (resize)="resizes.update(increment)"
>
  <neu-splitter-pane>
    <section>Carpetas</section>
  </neu-splitter-pane>
  <neu-splitter-pane>
    <section>Detalles</section>
  </neu-splitter-pane>
</neu-splitter>

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

export const panes = signal([
  {
    "size": 40,
    "min": 40
  },
  {
    "size": 60,
    "min": 40
  }
]);

import type { NeuSplitterPane } from '@neural-ui/core/splitter';

readonly panes = signal<readonly NeuSplitterPane[]>([
  {
    "size": 40,
    "min": 40
  },
  {
    "size": 60,
    "min": 40
  }
]);

Datos y contenido

sizesChange propone porcentajes en el orden de panes. resizeStart comunica el inicio de un arrastre y resize sus avances válidos. El teclado emite sizesChange. El contenido se proyecta en elementos neu-splitter-pane; esta etiqueta es una zona de contenido, no un componente Angular exportado.

Accesibilidad y teclado

Cada tirador es un separador con foco, orientación y valores actual, mínimo y máximo. Izquierda y derecha redimensionan paneles horizontales y arriba y abajo los verticales en un 2%. El movimiento horizontal respeta RTL. Los límites deben dejar espacio utilizable para el contenido.

API

Inputs y Outputs corresponden al paquete fijado. Los tipos con nombre enlazan a sus definiciones; cada Template disponible tiene un ejemplo ejecutable.

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.

Public Types

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

import type { NeuSplitterDirection } from '@neural-ui/core/splitter';

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

import type { NeuSplitterPane } from '@neural-ui/core/splitter';

// Declaración pública (solo referencia)
export interface NeuSplitterPane {
  max?: number;
  min?: number;
  size?: number;
}

Estilos y tokens

Utiliza tokens públicos de espaciado, superficie, texto y foco. Comprueba el contenido proyectado y los controles en ambos temas y con anchos reducidos.

Componentes relacionados

Combina estos componentes para construir la interfaz del entorno.

• ScrollArea
• Panel