Caroa UI

ScrollArea

カスタムスクロールバー付きのスクロール領域コンポーネント。

インポート

import { ScrollArea } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import { ScrollArea } from '@caroainc/ui-components/scroll-area'

基本的な使い方

Loading...
<ScrollArea className="h-[200px] w-[300px] rounded-md border p-4">
  <div className="space-y-4">
    {Array.from({ length: 20 }).map((_, i) => (
      <p key={i}>項目 {i + 1}</p>
    ))}
  </div>
</ScrollArea>

リスト表示

Loading...
<ScrollArea className="h-[200px] w-[300px] rounded-md border">
  <div className="p-4">
    <h4 className="mb-4 text-sm font-medium">通知</h4>
    {notifications.map((notification) => (
      <div key={notification.id} className="flex items-center gap-2">
        <Avatar className="h-8 w-8">
          <AvatarFallback>{notification.initial}</AvatarFallback>
        </Avatar>
        <div>
          <p className="text-sm font-medium">{notification.title}</p>
          <p className="text-xs text-muted-foreground">{notification.time}</p>
        </div>
      </div>
    ))}
  </div>
</ScrollArea>

横スクロール

デフォルトでは垂直スクロールバーのみ描画されます。横スクロールを機能させるにはorientation="horizontal"を指定してください（未指定だと横方向の可視スクロールバーが描画されません）。

Loading...
<ScrollArea orientation="horizontal" className="w-[350px] whitespace-nowrap rounded-md border">
  <div className="flex space-x-4 p-4">
    {Array.from({ length: 10 }).map((_, i) => (
      <div key={i} className="w-[150px] shrink-0">
        カード {i + 1}
      </div>
    ))}
  </div>
</ScrollArea>

縦横両方のスクロール

コンテンツが縦横どちらにも溢れる場合はorientation="both"を指定します。

Loading...
<ScrollArea orientation="both" className="h-[200px] w-[300px] rounded-md border p-4">
  <div className="w-[600px] space-y-4">{/* ... */}</div>
</ScrollArea>

Props

PropTypeDefaultDescription
orientation'vertical' | 'horizontal' | 'both''vertical'表示するスクロールバーの向き。指定した向きのScrollBarのみ描画する
classNamestring-高さと幅を指定するCSSクラス

Resizable

ドラッグでサイズ変更可能なパネルコンポーネント。

Select

ドロップダウン選択コンポーネント。

On this page

インポート基本的な使い方リスト表示横スクロール縦横両方のスクロールProps