ScrollArea

Uso

El desplazamiento nativo es el predeterminado. Define maxHeight y maxWidth opcional con dimensiones CSS. enhanced añade barras temáticas sin sustituir rueda, táctil o desplazamiento nativo. variant controla la visibilidad de las barras; mask añade degradados en los bordes. ariaLabel nombra el área, tabindex controla su foco y step el movimiento de las barras mejoradas. scrollTo() permite volver al inicio; scrollPositionChange comunica dimensiones y posiciones observadas.

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-scroll-area
  maxHeight="200px"
  [enhanced]="false"
  [mask]="true"
  variant="auto"
  [step]="40"
  [tabindex]="0"
  ariaLabel="Pedidos recientes"
  (scrollPositionChange)="position.set($event)"
>
  <ol>
    @for (n of entries; track n) {
      <li>Pedido {{ n }}</li>
    }
  </ol>
</neu-scroll-area>

Datos y contenido

El contenido se aporta por proyección por defecto. scrollPositionChange comunica observaciones, no una propuesta de valor controlado. left es una posición lógica normalizada para RTL. Utiliza scrollTo() para desplazar el contenido desde tu aplicación.

Accesibilidad y teclado

Asigna ariaLabel al contenido desplazable para que el área con foco sea una región con nombre. Flechas y teclas de página conservan el desplazamiento nativo. Las barras mejoradas exponen su rol, ID del área controlada y valores actual, mínimo y máximo. Mantén tabindex en 0 cuando se necesite acceso por teclado.

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.

Métodos públicos

Public Types

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

import type { NeuScrollAreaVariant } from '@neural-ui/core/panel';

// Declaración pública (solo referencia)
export type NeuScrollAreaVariant = 'auto' | 'hover' | 'scroll' | 'always' | 'hidden';

import type { NeuScrollPosition } from '@neural-ui/core/panel';

// Declaración pública (solo referencia)
export interface NeuScrollPosition {
  clientHeight: number;
  clientWidth: number;
  left: number;
  scrollHeight: number;
  scrollWidth: number;
  top: 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.

• Panel
• Splitter