BrutalLab UI
es
EnglishEspañol
PatternDisponible

Message Scroller

Contenedor de conversación con control para volver al último mensaje.

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/message-scroller.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx
'use client';

import {
  MessageScrollerProvider,
  MessageScroller,
  MessageScrollerViewport,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerButton,
} from '@/components/ui/message-scroller';

export default function Demo() {
  return (
    <MessageScrollerProvider>
      <MessageScroller className="h-64 w-full max-w-md rounded-lg border-2 border-ink bg-card">
        <MessageScrollerViewport>
          <MessageScrollerContent>
            {Array.from({ length: 12 }, (_, index) => (
              <MessageScrollerItem key={index}>
                <p className="m-3 rounded-md border-2 border-ink bg-muted p-3 bl-type-small">
                  Component update {index + 1}
                </p>
              </MessageScrollerItem>
            ))}
          </MessageScrollerContent>
        </MessageScrollerViewport>
        <MessageScrollerButton />
      </MessageScroller>
    </MessageScrollerProvider>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

  • La composición hereda los estados de sus controles. Prueba valores vacíos, contenido, carga y error cuando correspondan a la aplicación.
  • Los ejemplos de esta página son ejecutables; el código mostrado usa los mismos componentes. La lógica de negocio pertenece al consumidor.
  • Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

PropTipoDefaultDescripción
MessageScrollerProviderproviderrequiredWrap Root, Viewport, Content and Button in the shared scroll provider.
classNamestring?Extends the root visual styles without changing its semantics.
childrenReactNode?Compose the exported subcomponents as shown in the runnable example.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.