Scroll area

A scrollable region with a thin, themed scrollbar.

1 fichier

<pb-ui.scroll-area class="h-72 w-48 rounded-md border">
  <div class="p-4">
    <h4 class="mb-4 text-sm leading-none font-medium">Tags</h4>
    @for(tag in tags)
    <div class="text-sm">{{ tag }}</div>
    <pb-ui.separator class="my-2" />
    @endfor
  </div>
</pb-ui.scroll-area>

Installation

pyblade-ui add scroll-area

Copiez ce fichier dans votre projet

components/ui/scroll_area.html

<div data-slot="scroll-area" tabindex="0" {{ attributes.cn("relative overflow-auto rounded-[inherit] outline-none [scrollbar-color:var(--border)_transparent] [scrollbar-width:thin] focus-visible:ring-[3px] focus-visible:ring-ring/50") }}>{{ slot }}</div>

Adaptez le chemin à votre projet
Le dossier components est celui déclaré dans pyblade.toml.

Utilisation

La balise <pb-ui.scroll-area> est disponible dans tous vos templates.

<pb-ui.scroll-area class="h-72 w-48 rounded-md border">...</pb-ui.scroll-area>

Exemples

Horizontal

<pb-ui.scroll-area class="w-full max-w-md rounded-md border whitespace-nowrap">
  <div class="flex w-max gap-4 p-4">
    @for(tag in tags)
    <div class="grid h-32 w-36 shrink-0 place-items-center rounded-md bg-muted text-sm">{{ tag }}</div>
    @endfor
  </div>
</pb-ui.scroll-area>

‹ Aspect ratio Resizable ›