Tags
v1.2.0-beta.50
v1.2.0-beta.49
v1.2.0-beta.48
v1.2.0-beta.47
v1.2.0-beta.46
v1.2.0-beta.45
v1.2.0-beta.44
v1.2.0-beta.43
v1.2.0-beta.42
v1.2.0-beta.41
v1.2.0-beta.40
v1.2.0-beta.39
v1.2.0-beta.38
v1.2.0-beta.37
v1.2.0-beta.36
v1.2.0-beta.35
v1.2.0-beta.34
v1.2.0-beta.33
v1.2.0-beta.32
v1.2.0-beta.31
v1.2.0-beta.30
v1.2.0-beta.29
v1.2.0-beta.28
v1.2.0-beta.27
v1.2.0-beta.26
v1.2.0-beta.25
v1.2.0-beta.24
v1.2.0-beta.23
v1.2.0-beta.22
v1.2.0-beta.21
v1.2.0-beta.20
v1.2.0-beta.19
v1.2.0-beta.18
v1.2.0-beta.17
v1.2.0-beta.16
v1.2.0-beta.15
v1.2.0-beta.14
v1.2.0-beta.13
v1.2.0-beta.12
v1.2.0-beta.11
v1.2.0-beta.10
v1.2.0-beta.9
v1.2.0-beta.8
v1.2.0-beta.7
v1.2.0-beta.6
v1.2.0-beta.5
v1.2.0-beta.4
v1.2.0-beta.3
v1.2.0-beta.2
v1.2.0-beta.1
<ScrollArea Class="h-72 w-48 rounded-md border">
<div class="p-4">
<h4 class="mb-4 text-sm leading-none font-medium">Tags</h4>
@foreach (var tag in Tags)
{
<div class="text-sm">@tag</div>
<Separator Class="my-2" />
}
</div>
</ScrollArea>
@code {
private static readonly string[] Tags =
[
"v1.2.0-beta.50",
"v1.2.0-beta.49",
"v1.2.0-beta.48",
"v1.2.0-beta.47",
"v1.2.0-beta.46",
"v1.2.0-beta.45",
"v1.2.0-beta.44",
"v1.2.0-beta.43",
"v1.2.0-beta.42",
"v1.2.0-beta.41",
"v1.2.0-beta.40",
"v1.2.0-beta.39",
"v1.2.0-beta.38",
"v1.2.0-beta.37",
"v1.2.0-beta.36"
];
}Installation
blazor-shadcn add scroll-areaUsage
@using BlazorShadcn.Components.UI<ScrollArea Class="h-[200px] w-[350px] rounded-md border p-4">
Your scrollable content here.
</ScrollArea>Examples
Horizontal
Use ScrollBar with Orientation="ScrollBar.ScrollBarOrientation.Horizontal" for horizontal scrolling.
<ScrollArea Class="w-96 rounded-md border whitespace-nowrap" ShowDefaultScrollbar="false">
<div class="flex w-max space-x-4 p-4">
@foreach (var artwork in Works)
{
<figure class="shrink-0">
<div class="overflow-hidden rounded-md">
<img src="@artwork.Art"
alt="Photo by @artwork.Artist"
class="aspect-[3/4] h-fit w-fit object-cover"
width="300"
height="400" />
</div>
</figure>
}
</div>
<ScrollBar Orientation="ScrollBar.ScrollBarOrientation.Horizontal" />
</ScrollArea>
@code {
private static readonly Artwork[] Works =
[
new("Ornella Binni", "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"),
new("Tom Byrom", "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80"),
new("Vladimir Malyavko", "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80")
];
private sealed record Artwork(string Artist, string Art);
}API Reference
See the Radix UI Scroll Area documentation.