Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add scroll-area

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

<x-aura::scroll-area> bounds a piece of content and lets it scroll — a log, a long list, a wide table.

The part most custom scroll containers get wrong is the keyboard: someone who cannot use a pointer has to be able to focus the region before the arrow keys will move it. That is WCAG 2.1.1, and tabindex="0" with a name is the whole fix.

Basic Usage

  • Event number 1
  • Event number 2
  • Event number 3
  • Event number 4
  • Event number 5
  • Event number 6
  • Event number 7
  • Event number 8
  • Event number 9
  • Event number 10
  • Event number 11
  • Event number 12
<x-aura::scroll-area height="160px" label="Recent activity" class="border border-aura-surface-200">
    <ul class="divide-y divide-aura-surface-100 text-sm">
        @foreach (range(1, 12) as $i)
            <li class="px-3 py-2">Event number {{ $i }}</li>
        @endforeach
    </ul>
</x-aura::scroll-area>
<x-aura::scroll-area height="160px" label="Recent activity">
    @foreach ($events as $event)
        <div>{{ $event->title }}</div>
    @endforeach
</x-aura::scroll-area>

Horizontal

laravel livewire alpine tailwind filament pest vite 
<x-aura::scroll-area axis="horizontal" height="auto" label="Tags" class="border border-aura-surface-200">
    <div class="flex gap-2 p-3">
        @foreach (['laravel', 'livewire', 'alpine', 'tailwind', 'filament', 'pest', 'vite'] as $tag)
            <x-aura::badge>{{ $tag }}</x-aura::badge>
        @endforeach
    </div>
</x-aura::scroll-area>

Props

Prop Type Default Description
height string '300px' Fixed height.
maxHeight string|null null Used instead of height when given, so the region grows only until it needs to scroll.
axis string 'vertical' vertical, horizontal, both.
label string|null null Names the region. Defaults to the translated "Scrollable region".
fade bool true A gradient at the lower edge hinting there is more.

Accessibility

  • tabindex="0" and role="region" with a name: focusable, announced, and scrollable with the arrow keys.
  • Give it a real label when the page holds more than one. "Scrollable region" three times over is no better than nothing.
  • The fade is aria-hidden and pointer-events-none, so it neither gets announced nor swallows the gesture.